Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TheNaubit/tailwind-dot-grid-backgrounds
🎨 A tiny Tailwind plugin to add dot and grid customizable backgrounds fast
https://github.com/TheNaubit/tailwind-dot-grid-backgrounds
dot dot-background grid grid-background tailwind tailwind-css tailwind-dot-background tailwind-grid-background tailwindcss tailwindcss-plugin
Last synced: 3 months ago
JSON representation
🎨 A tiny Tailwind plugin to add dot and grid customizable backgrounds fast
- Host: GitHub
- URL: https://github.com/TheNaubit/tailwind-dot-grid-backgrounds
- Owner: TheNaubit
- License: mit
- Created: 2024-04-16T09:45:14.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-02T11:46:19.000Z (4 months ago)
- Last Synced: 2024-07-04T15:31:02.351Z (4 months ago)
- Topics: dot, dot-background, grid, grid-background, tailwind, tailwind-css, tailwind-dot-background, tailwind-grid-background, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds
- Size: 213 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-tailwindcss - Dot & Grid Backgrounds - Adds `bg-grid` and `bg-dot` classes to add easy-to-customize grid and dot pattern backgrounds with just CSS. (Plugins)
README
🎨 tailwind-dot-grid-backgrounds
A tiny Tailwind plugin to add dot and grid customizable backgrounds fast
What? •
Guide and examples •
Help •
Contribute
## tl;dr
This is a Tailwind plugin that allows you to add background grids and background dots in an easy and customizable way:
### 1. Installing the dependency:
```bash
npm install --save @nauverse/tailwind-dot-grid-backgrounds
```
### 2. Add the plugin to the `tailwind.config.js` file:
~~~js
// ... the rest of your tailwind.config.js file
const config: Config = {
// ... the rest of your config
plugins: [
require('@nauverse/tailwind-dot-grid-backgrounds')
// ... the rest of your Tailwind plugins
],
};
~~~
### 3. You are done! 🪄
Try it by adding this HTML to your UI:
```html
```
## What
You could achieve the same by just using some Tailwind code but... I found myself adding this kind of background in my projects very often. So I created a small Tailwind plugin to allow me adding these background but at the same allowing all the customization offered by Tailwind.
### Features
- 🎨 Fully integrated with Tailwind CSS
- 🏃♂️ Performant (it uses CSS to render the backgrounds)
- 0️⃣ Zero dependencies
- 🧪 Has tests!
- 🎉 Easy to use, straight to the point
## Guide and examples
### Background Grid
Pattern: `bg-grid--s--`
- `` is the size of the grid squares. It allows the numeric values of the `width` prop in Tailwind. You will see the available options in Intellisense.
- `` is the width of the strokes of the grid squares. It allows the numeric values of the `borderWidth` prop in Tailwind and also the value `1` (since Tailwind does not have a `border-1` class).
- `` is the color of the strokes. It allows any valid classname color in Tailwind.
#### Examples:
`bg-grid-8-s-2-neutral-950`
`bg-grid-48-s-8-blue-700/80`
### Background Dots
Pattern: `bg-dot--s--`
- `` is the size of the space (in both axis) between the dots. It allows the numeric values of the `width` prop in Tailwind. You will see the available options in Intellisense.
- `` is the size of the dots. It allows the numeric values of the `borderWidth` prop in Tailwind and also the value `1` (since Tailwind does not have a `border-1` class).
- `` is the color of the dots. It allows any valid classname color in Tailwind.
#### Examples:
`bg-dot-8-s-2-neutral-950`
`bg-dot-16-s-8-blue-700/80`
## Help
Thank you for using *tailwind-dot-grid-backgrounds*!
If you need any help using this plugin, feel free to [create a GitHub issue](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues/new/choose), and ask your questions. I'll try to answer as quickly as possible.
## Contribute
Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! If you like this project and want to help, but feel like you are stuck, feel free to contact the maintainers.
### Building from source
Building the project should be quick and easy. If it isn't, it's the maintainer's fault. Please report any problems with building in a GitHub issue.
You need to have a reasonably recent version of node.js to build *tailwind-dot-grid-backgrounds*.
Tested on node version 18.0.0 and npm version 8.6.0.
First, clone the git repository:
```
git clone [email protected]:TheNaubit/tailwind-dot-grid-backgrounds.git
```
Then switch to the newly created tailwind-dot-grid-backgrounds directory and install the dependencies:
```
cd tailwind-dot-grid-backgrounds
npm install
```
You can then run the unit tests to verify that everything works correctly:
```
npm run test:run
```
And finally, build the library:
```
npm run build
```
The output will appear in the `dist` directory.
Happy hacking!
## Contributors ✨
[](#contributors-)
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
## Contributors
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
