@yet3/tailwindcss-bg-patterns

!GitHub license

!npm

A plugin that adds css background patterns to TailwindCss

Live Demo

See a live demo

Table of Contents

- Installation
- Config
- Example usage
- Pattern offsets
- Patterns
- Horizontal lines
- Vertical lines
- Grid
- Checkers
- Hatching
- Cross-Hatching
- Polka dot
- Hexagonal Polka dot
- Todo
- Support

Installation

``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],
};
`

$3

`js
import bgPatterns from "@yet3/tailwindcss-bg-patterns";

export default {
// ...
plugins: [
bgPatterns({
prefix: "bg-",
}),
],
};
`

Example usage

`html
class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
/>
`

this code will result in:

Pattern offsets

Offset also accept arbritary values bg-pattern-offset-x-[321px] as well as negative values -bg-pattern-offset-y-24

Patterns

$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"
/>
``

Todo

- [ ] Add utility to adjust pattern opacity
- [ ] Add pattern: honeycomb
- [ ] Add pattern: bricks

Support