A simple Tailwind CSS plugin that adds dotted backgrounds with all for all configured colors and spacing.
npm install tailwindcss-dotted-backgroundA simple Tailwind CSS plugin that adds dotted backgrounds with all for all configured colors and spacing.
First install the package:
``sh`
npm install -D tailwindcss-dotted-background
or
`sh`
yarn add tailwindcss-dotted-background -D
Then require the installed plugin directly in your tailwind.config.js:
`js`
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-dotted-background'),
// ...
],
}
Combine the bg-dotted-spacing-{spacing} and bg-dotted-{colors} classes to specify the spacing and the color of the dots.
`html
The default radius of the dots is
1px. Use bg-dotted-radius-{spacing} to change the size.`html
`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.`html
`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.