{"id":29013156,"url":"https://github.com/ntsd/tailwind-plugin-boilerplate","last_synced_at":"2026-04-24T22:33:12.607Z","repository":{"id":300255234,"uuid":"1005087110","full_name":"ntsd/tailwind-plugin-boilerplate","owner":"ntsd","description":"Tailwind plugin boilerplate, Support Tailwind v4","archived":false,"fork":false,"pushed_at":"2025-06-20T16:55:28.000Z","size":17,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-21T05:43:09.824Z","etag":null,"topics":["postcss","tailwind","tailwind-css","tailwind-plugin","tailwindcss","tailwindcss-plugin","tailwindv4"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwind-plugin-boilerplate","language":"HTML","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/ntsd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"zenodo":null}},"created_at":"2025-06-19T16:38:59.000Z","updated_at":"2025-06-26T05:43:01.000Z","dependencies_parsed_at":"2025-06-20T17:44:53.570Z","dependency_job_id":"fd7b5753-c988-4e1a-a6e7-19fcbfcedc8b","html_url":"https://github.com/ntsd/tailwind-plugin-boilerplate","commit_stats":null,"previous_names":["ntsd/tailwind-plugin-boilerplate"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/ntsd/tailwind-plugin-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntsd%2Ftailwind-plugin-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntsd%2Ftailwind-plugin-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntsd%2Ftailwind-plugin-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntsd%2Ftailwind-plugin-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ntsd","download_url":"https://codeload.github.com/ntsd/tailwind-plugin-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntsd%2Ftailwind-plugin-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32243309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["postcss","tailwind","tailwind-css","tailwind-plugin","tailwindcss","tailwindcss-plugin","tailwindv4"],"created_at":"2025-06-25T19:10:17.005Z","updated_at":"2026-04-24T22:33:12.578Z","avatar_url":"https://github.com/ntsd.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS Plugin Boilerplate\n\nA boilerplate for creating Tailwind CSS plugins with TypeScript.\n\nSupporting Tailwind V4.\n\n## Installation\n\n```bash\nnpm install tailwind-plugin-boilerplate\n```\n\n## Usage\n\nThere are multiple ways to use this plugin with Tailwind CSS v4:\n\n### Option 1: Import in your CSS file\n\n```css\n@layer base, theme, utilities, components;\n\n@import \"tailwindcss\";\n@plugin \"tailwind-plugin-boilerplate\";\n\n/* Optional: customize the plugin */\n@theme {\n  /* Custom colors for the example-color match utility */\n  --example-color-primary: #ff5733;\n  --example-color-secondary: #33ff57;\n  --example-color-accent: #5733ff;\n}\n```\n\nFor this to work, make sure you have PostCSS configured:\n\n```js\n// postcss.config.js\nexport default {\n  plugins: [\n    \"@tailwindcss/postcss\",\n    // Other plugins...\n  ],\n}\n```\n\n### Option 2: Using with Vite\n\n```js\n// vite.config.js\nimport { defineConfig } from \"vite\"\nimport tailwindcss from \"@tailwindcss/vite\"\n\nexport default defineConfig({\n  plugins: [\n    tailwindcss({\n      // If you need additional plugins\n      plugins: [\"tailwind-plugin-boilerplate\"],\n    }),\n  ],\n})\n```\n\n## Features\n\nThis plugin boilerplate demonstrates several features of Tailwind CSS plugins:\n\n- **Theme integration**: Access and use values from the Tailwind theme\n- **Custom utilities**: Create your own utility classes\n- **Custom components**: Define reusable component classes\n- **Match utilities**: Generate utilities with modifiers\n\n## Example Components\n\nThe plugin includes examples of:\n\n1. **Basic Utility**\n\n   ```html\n   \u003cdiv class=\"example-utility\"\u003e...\u003c/div\u003e\n   ```\n\n2. **Component Example**\n\n   ```html\n   \u003cdiv class=\"example-component\"\u003e...\u003c/div\u003e\n   ```\n\n3. **Match Utility - Colors**\n   ```html\n   \u003cdiv class=\"example-color-primary\"\u003ePrimary Color Text\u003c/div\u003e\n   \u003cdiv class=\"example-color-secondary\"\u003eSecondary Color Text\u003c/div\u003e\n   \u003cdiv class=\"example-color-accent\"\u003eAccent Color Text\u003c/div\u003e\n   ```\n\n## Customization\n\nYou can customize the plugin behavior through Tailwind's theming system. Here's how to customize the colors for the example-color utility:\n\n```css\n/* in your CSS file */\n@theme {\n  /* Custom colors for the example-color match utility */\n  --example-color-primary: #ff5733; /* Customized primary color */\n  --example-color-secondary: #33ff57; /* Customized secondary color */\n  --example-color-accent: #5733ff; /* Customized accent color */\n}\n```\n\n## Plugin Structure\n\nThe plugin demonstrates three main types of Tailwind extensions:\n\n1. **Utilities (addUtilities)**: Simple utility classes that apply specific CSS properties\n\n   ```js\n   addUtilities({\n     \".example-utility\": {\n       position: \"relative\",\n       display: \"inline-block\",\n       gap: theme(\"spacing.4\", \"1rem\"),\n     },\n   })\n   ```\n\n2. **Components (addComponents)**: More complex, reusable components\n\n   ```js\n   addComponents({\n     \".example-component\": {\n       padding: \"1rem\",\n       borderRadius: theme(\"borderRadius.md\", \"0.375rem\"),\n     },\n   })\n   ```\n\n3. **Match Utilities (matchUtilities)**: Dynamic utilities with modifiers\n   ```js\n   matchUtilities(\n     {\n       \"example-color\": (value) =\u003e ({\n         color: value,\n       }),\n     },\n     {\n       values: {\n         primary: theme(\"example-color-primary\", \"#3b82f6\"),\n         secondary: theme(\"example-color-secondary\", \"#10b981\"),\n         accent: theme(\"example-color-accent\", \"#f59e0b\"),\n       },\n     },\n   )\n   ```\n\n## Development\n\n1. Clone the repository\n2. Install dependencies with `npm install`\n3. Run development build with `npm run dev`\n4. Build the plugin with `npm run build`\n5. Check the example in the `/example` folder\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntsd%2Ftailwind-plugin-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fntsd%2Ftailwind-plugin-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntsd%2Ftailwind-plugin-boilerplate/lists"}