tailwindcss-pattern

Tailwindcss plugin to add beautiful background patterns.

Features

• 11 background patterns.
• Use existing tailwind colors and extend with new colors.
• Change pattern on hover.
• responsive variants.
• dark mode support.

Installation

npm install -D tailwindcss-pattern

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-pattern'),
    // ...
    ],
};

Usage

Minimal example:

<div class="pattern-grid"></div>

Example with tailwind colors:

<div class="bg-red-300 pattern-grid pattern-color-red-500"></div>

Change pattern size: Predefined sizes: are sm md lg and xl and you can use custom sizes like 2rem 12px etc.

<div class="pattern-grid-lg"></div>
<div class="pattern-checks-[2rem]"></div>
<div class="pattern-dots-[12px]"></div>

Try on Playground: Tailwindcss Patterns Playground

Pattern Classes

| Class | |--- | |pattern-checks| |pattern-grid| |pattern-dots| |pattern-cross-dots| |pattern-diagonal-lines| |pattern-horizontal-lines| |pattern-vertical-lines| |pattern-diagonal-stripes| |pattern-horizontal-stripes| |pattern-vertical-stripes| |pattern-triangles| |pattern-zigzag|

LICENSE

MIT