https://github.com/hiimnit/tailwindcss-dotted-background

A simple Tailwind CSS plugin that adds dotted backgrounds with all for all configured colors and spacing.
https://github.com/hiimnit/tailwindcss-dotted-background

tailwind tailwind-css tailwindcss tailwindcss-extension tailwindcss-plugin

Last synced: 27 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hiimnit/tailwindcss-dotted-background
• Owner: hiimnit
• Created: 2022-07-24T14:58:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-03T21:52:54.000Z (over 1 year ago)
• Last Synced: 2024-09-29T10:45:52.275Z (about 1 month ago)
• Topics: tailwind, tailwind-css, tailwindcss, tailwindcss-extension, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 11.7 KB
• Stars: 15
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 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:

```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'),

    // ...

  ],

}

```

## Usage

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](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) are supported for both `bg-dotted-spacing-{spacing}` and `bg-dotted-{colors}` classes.