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