A tailwindcss plugin to add beautiful background patterns
npm install tailwindcss-patternTailwindcss plugin to add beautiful background patterns.
- 11 background patterns.
- Use existing tailwind colors and extend with new colors.
- Change pattern on hover.
- responsive variants.
- dark mode support.
``bash`
npm install -D tailwindcss-pattern
Add the plugin to your tailwind.config.js file:
`js`
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-pattern'),
// ...
],
};
Minimal example:
`html`
Example with tailwind colors:
`html`
Change pattern size:
Predefined sizes: are sm md lg and xl and you can use custom sizes like 2rem 12px etc.
`html``
Try on Playground: Tailwindcss Patterns Playground
| 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|
MIT