TailwindCSS plugin that css background patterns
npm install @yet3/tailwindcss-bg-patternsA plugin that adds css background patterns to TailwindCss
See a live demo
- Installation
- Config
- Example usage
- Pattern offsets
- Patterns
- Horizontal lines
- Vertical lines
- Grid
- Checkers
- Hatching
- Cross-Hatching
- Polka dot
- Hexagonal Polka dot
- Todo
- Support
``sh`
npm install --save-dev @yet3/tailwindcss-bg-patterns
`sh`
yarn add -D @yet3/tailwindcss-bg-patterns
`sh`
pnpm add -D @yet3/tailwindcss-bg-patterns
In tailwind.config.js
`js
import bgPatterns from "fluid-tailwind";
export default {
// ...
plugins: [bgPatterns],
};
`
`js
import bgPatterns from "@yet3/tailwindcss-bg-patterns";
export default {
// ...
plugins: [
bgPatterns({
prefix: "bg-",
}),
],
};
`
`html`
class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
/>
this code will result in:

bg-pattern-offset-x and bg-pattern-offset-yOffset also accept arbritary values
bg-pattern-offset-x-[321px] as well as negative values -bg-pattern-offset-y-24Patterns
$3
See it live here
`html
class="bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
/>
`
$3
See it live here
`html
class="bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
/>
``
- [ ] Add utility to adjust pattern opacity
- [ ] Add pattern: honeycomb
- [ ] Add pattern: bricks
