@yet3/tailwindcss-bg-patterns

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

npm install --save-dev @yet3/tailwindcss-bg-patterns

yarn add -D @yet3/tailwindcss-bg-patterns

pnpm add -D @yet3/tailwindcss-bg-patterns

In tailwind.config.js

import bgPatterns from "fluid-tailwind";

export default {
  // ...
  plugins: [bgPatterns],
};

Customizing config

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

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

Example usage

<div
  class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
/>

this code will result in:

Pattern offsets

Each pattern can be offset using bg-pattern-offset-x and bg-pattern-offset-y

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

Patterns

Horizontal lines

See it live here

<div
  class="bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
/>

Vertical lines

See it live here

<div
  class="bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
/>

Grid

See it live here

<div
  class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
/>

Checkers

See it live here

<div
  class="bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32"
/>

Hatching

See it live here

<div
  class="bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right"
/>

Cross-Hatching

See it live here

<div
  class="bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16"
/>

Polka dot

See it live here

<div
  class="bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
/>

Hexagonal polka dot

See it live here

<div
  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