{"id":15064833,"url":"https://github.com/thenaubit/tailwind-dot-grid-backgrounds","last_synced_at":"2025-04-10T12:41:41.980Z","repository":{"id":233500077,"uuid":"787317364","full_name":"TheNaubit/tailwind-dot-grid-backgrounds","owner":"TheNaubit","description":"🎨 A tiny Tailwind plugin to add dot and grid customizable backgrounds fast","archived":false,"fork":false,"pushed_at":"2025-01-06T05:59:35.000Z","size":385,"stargazers_count":26,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T14:16:25.463Z","etag":null,"topics":["dot","dot-background","grid","grid-background","tailwind","tailwind-css","tailwind-dot-background","tailwind-grid-background","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheNaubit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-16T09:45:14.000Z","updated_at":"2025-02-01T06:56:24.000Z","dependencies_parsed_at":"2024-10-13T00:21:55.896Z","dependency_job_id":"1c797903-b5af-4b03-914b-5bfeff12b247","html_url":"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds","commit_stats":null,"previous_names":["thenaubit/tailwind-dot-grid-backgrounds"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Ftailwind-dot-grid-backgrounds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Ftailwind-dot-grid-backgrounds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Ftailwind-dot-grid-backgrounds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Ftailwind-dot-grid-backgrounds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheNaubit","download_url":"https://codeload.github.com/TheNaubit/tailwind-dot-grid-backgrounds/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217156,"owners_count":21066634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dot","dot-background","grid","grid-background","tailwind","tailwind-css","tailwind-dot-background","tailwind-grid-background","tailwindcss","tailwindcss-plugin"],"created_at":"2024-09-25T00:27:01.067Z","updated_at":"2025-04-10T12:41:41.961Z","avatar_url":"https://github.com/TheNaubit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  🎨 tailwind-dot-grid-backgrounds\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/blob/92a8b6c3f527533ded1f497f035c8515c85cb995/images/header.png\" alt=\"tailwind-dot-grid-backgrounds\" /\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003eA tiny Tailwind plugin to add dot and grid customizable backgrounds fast\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions\"\u003e\n    \u003cimg src=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/release.yml/badge.svg\"\n         alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@nauverse/tailwind-dot-grid-backgrounds\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/%40nauverse/tailwind-dot-grid-backgrounds\" alt=\"minzipped size\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#what\"\u003eWhat?\u003c/a\u003e •\n  \u003ca href=\"#guide-and-examples\"\u003eGuide and examples\u003c/a\u003e •\n  \u003ca href=\"#help\"\u003eHelp\u003c/a\u003e •\n  \u003ca href=\"#contribute\"\u003eContribute\u003c/a\u003e\n\u003c/p\u003e\n\n## tl;dr\nThis is a Tailwind plugin that allows you to add background grids and background dots in an easy and customizable way:\n\n### 1. Installing the dependency:\n```bash\nnpm install --save @nauverse/tailwind-dot-grid-backgrounds\n```\n\n### 2. Add the plugin to the `tailwind.config.js` file:\n~~~js\n// ... the rest of your tailwind.config.js file\n\nconst config: Config = {\n  // ... the rest of your config\n  plugins: [\n    require('@nauverse/tailwind-dot-grid-backgrounds')\n    // ... the rest of your Tailwind plugins\n  ],\n};\n~~~\n\n### 3. You are done! 🪄\nTry it by adding this HTML to your UI:\n```html\n\u003cdiv class=\"h-screen w-screen bg-yellow-300 bg-grid-8-s-2-neutral-950\"\u003e\u003c/div\u003e\n```\n\n## What\nYou 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.\n\n### Features\n- 🎨 Fully integrated with Tailwind CSS\n- 🏃‍♂️ Performant (it uses CSS to render the backgrounds)\n- 0️⃣ Zero dependencies\n- 🧪 Has tests!\n- 🎉 Easy to use, straight to the point\n\n## Guide and examples\n\n### Background Grid\nPattern: `bg-grid-\u003cSIZE\u003e-s-\u003cSTROKE_WIDTH\u003e-\u003cCOLOR\u003e`\n\n- `\u003cSIZE\u003e` 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.\n- `\u003cSTROKE_WIDTH\u003e` 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).\n- `\u003cCOLOR\u003e` is the color of the strokes. It allows any valid classname color in Tailwind.\n\n#### Examples:\n`bg-grid-8-s-2-neutral-950`\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/blob/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-8-s-2-neutral-950.png\" alt=\"tailwind-dot-grid-backgrounds bg-grid-8-s-2-neutral-950\" /\u003e\n\u003c/p\u003e\n\n`bg-grid-48-s-8-blue-700/80`\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/blob/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-48-s-8-blue-700_80.png\" alt=\"tailwind-dot-grid-backgrounds bg-grid-48-s-8-blue-700/80\" /\u003e\n\u003c/p\u003e\n\n### Background Dots\nPattern: `bg-dot-\u003cSIZE\u003e-s-\u003cDOT_SIZE\u003e-\u003cCOLOR\u003e`\n\n- `\u003cSIZE\u003e` 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.\n- `\u003cDOT_SIZE\u003e` 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).\n- `\u003cCOLOR\u003e` is the color of the dots. It allows any valid classname color in Tailwind.\n\n#### Examples:\n`bg-dot-8-s-2-neutral-950`\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/blob/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-8-s-2-neutral-950.png\" alt=\"tailwind-dot-grid-backgrounds bg-dot-8-s-2-neutral-950\" /\u003e\n\u003c/p\u003e\n\n`bg-dot-16-s-8-blue-700/80`\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/blob/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-16-s-8-blue-700_80.png\" alt=\"tailwind-dot-grid-backgrounds bg-dot-16-s-8-blue-700/80\" /\u003e\n\u003c/p\u003e\n\n## Help\n\nThank you for using *tailwind-dot-grid-backgrounds*!\n\nIf 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.\n\n## Contribute\n\nContributions 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.\n\n### Building from source\n\nBuilding 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.\n\nYou need to have a reasonably recent version of node.js to build *tailwind-dot-grid-backgrounds*. \nTested on node version 18.0.0 and npm version 8.6.0.\n\nFirst, clone the git repository:\n\n```\ngit clone git@github.com:TheNaubit/tailwind-dot-grid-backgrounds.git\n```\n\nThen switch to the newly created tailwind-dot-grid-backgrounds directory and install the dependencies:\n\n```\ncd tailwind-dot-grid-backgrounds\nnpm install\n```\n\nYou can then run the unit tests to verify that everything works correctly:\n\n```\nnpm run test:run\n```\n\nAnd finally, build the library:\n\n```\nnpm run build\n```\n\nThe output will appear in the `dist` directory.\n\nHappy hacking!\n\n## Contributors ✨\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://albertadler.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22015497?v=4?s=100\" width=\"100px;\" alt=\"Al \u0026#124; Naucode\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAl \u0026#124; Naucode\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues?q=author%3ATheNaubit\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/commits?author=TheNaubit\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/commits?author=TheNaubit\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-TheNaubit\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#infra-TheNaubit\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/commits?author=TheNaubit\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenaubit%2Ftailwind-dot-grid-backgrounds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthenaubit%2Ftailwind-dot-grid-backgrounds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenaubit%2Ftailwind-dot-grid-backgrounds/lists"}