Tailwind CSS dotted background plugin

A simple Tailwind CSS plugin that adds dotted backgrounds with all for all configured colors and spacing.

Installing

First install the package:

npm install -D tailwindcss-dotted-background

or

yarn add tailwindcss-dotted-background -D

Then require the installed plugin directly in your tailwind.config.js:

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

Usage

Combine the bg-dotted-spacing-{spacing} and bg-dotted-{colors} classes to specify the spacing and the color of the dots.

<div class="bg-dotted-spacing-4 bg-dotted-gray-200" />

<div class="bg-dotted-spacing-[9px] bg-dotted-red-300 hover:bg-dotted-spacing-2" />

The default radius of the dots is 1px. Use bg-dotted-radius-{spacing} to change the size.

<div class="bg-dotted-spacing-6 bg-dotted-red-700 bg-dotted-radius-1" />

bg-dotted-spacing-{spacing} changes both the width and height at once. Use bg-dotted-spacing-x-{spacing} and bg-dotted-spacing-y-{spacing} to specify different height and width.

<div class="bg-dotted-spacing-x-6 bg-dotted-spacing-y-3 bg-dotted-cyan-900" />

Compatibility

Dots are created using background-image and background-size so these utilities are incompatible with any classes using these properties.

Arbitrary values are supported for both bg-dotted-spacing-{spacing} and bg-dotted-{colors} classes.