Installation

Install the plugin from npm:

npm install @freeloop/tailwindcss-backgrounds

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@freeloop/tailwindcss-backgrounds'),
    // ...
  ],
}

Usage

Use default styles.

<div class="bg-dot"></div>
<div class="bg-grid"></div>

Use custom color.

<div class="bg-dot bg-dot-black/25"></div>
<div class="bg-grid bg-grid-green-500"></div>

Use custom width.

<div class="bg-dot bg-dot-gap-1"></div>
<div class="bg-grid bg-grid-gap-12"></div>

Playground