{"id":28244193,"url":"https://github.com/superiorjt/tailwindcss-turbine","last_synced_at":"2026-05-18T09:03:26.704Z","repository":{"id":49222082,"uuid":"377016428","full_name":"SuperiorJT/tailwindcss-turbine","owner":"SuperiorJT","description":"Tailwind CSS component generator plugin to easily create components with modifiers based on your theme.","archived":false,"fork":false,"pushed_at":"2021-06-23T14:54:15.000Z","size":315,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-12T09:18:38.452Z","etag":null,"topics":["color","components","modifiers","tailwindcss","tailwindcss-plugin","theme"],"latest_commit_sha":null,"homepage":"","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/SuperiorJT.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}},"created_at":"2021-06-15T02:48:14.000Z","updated_at":"2021-12-31T07:31:37.000Z","dependencies_parsed_at":"2022-09-13T11:20:52.621Z","dependency_job_id":null,"html_url":"https://github.com/SuperiorJT/tailwindcss-turbine","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/SuperiorJT/tailwindcss-turbine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperiorJT%2Ftailwindcss-turbine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperiorJT%2Ftailwindcss-turbine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperiorJT%2Ftailwindcss-turbine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperiorJT%2Ftailwindcss-turbine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SuperiorJT","download_url":"https://codeload.github.com/SuperiorJT/tailwindcss-turbine/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperiorJT%2Ftailwindcss-turbine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278386111,"owners_count":25978113,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["color","components","modifiers","tailwindcss","tailwindcss-plugin","theme"],"created_at":"2025-05-19T08:13:20.489Z","updated_at":"2025-10-04T22:58:11.581Z","avatar_url":"https://github.com/SuperiorJT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-turbine ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/SuperiorJT/tailwindcss-turbine/CI?color=%2306B6D4) ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/Superiorjt/tailwindcss-turbine?color=%2306B6D4\u0026sort=semver) ![NPM](https://img.shields.io/npm/l/tailwindcss-turbine?color=06b6d4)\n\n\u003e **Note** - This plugin currently only officially supports **Tailwind CSS v2.1** and upwards\n\n`tailwindcss-turbine` is a plugin that was built to easily generate different component classes for your application. The goal of this project is to be able to easily use custom Tailwind CSS elements within your own app.\n\nFor example, the default options for Turbine will generate `.btn` classes based on the buttons designed in [tail-kit](https://www.tailwind-kit.com/components/buttons). It's easy to make reusable components by simply copying the Tailwind CSS styles into the Turbine config and using the generated classes.\n\n### Installation\n\n```bash\nnpm i -D tailwindcss-turbine\n```\n\n## Usage\n\nIn your `tailwind.config.js`:\n\n```javascript\nconst turbine = require('tailwindcss-turbine');\n\nmodule.exports = {\n  ...\n  plugins: [\n    turbine, // Defaults to tail-kit buttons\n    \n    // Full example\n    turbine({\n      prefix: 'my-prefix',\n      baseStyles: 'px-4 py-2 ...',\n      modifiers: {\n        sm: 'px-3 py-0.5 ...',\n        lg: 'px-5 py-3 ...',\n      },\n      colorStyles: (color) =\u003e `bg-${color}-500 text-white`,\n      colorValidator: (color, values) =\u003e color !== 'gray' \u0026\u0026 values[500]\n    })\n  ]\n}\n```\n\n### How It Works\n\nFor each color in your theme, Turbine will generate a class name resembling `.{prefix}-{color}` and have the provided styles for each color. Styles are applied in separate steps following a specific hierarchy:\n\n`baseStyles` \u003c `modifiers` \u003c `colorStyles`\n\nBy styles being organized in this way, you are easily able to override styles when needed without any conflicts (hopefully).\n\nModifiers will insert their prefix in between the `prefix` and the `color` to resemble `.{prefix}-{modifier}-{color}`.\n\nFor the example above, the class name for a small blue component would be `.my-prefix-sm-blue`. For this, Turbine will generate:\n```css\n.my-prefix-sm-blue {\n  @apply px-4 py-2 ...\n  @apply px-3 py-0.5 ...\n  @apply bg-blue-500 text-white\n}\n```\n\nAnd after Tailwind CSS handles overrides, you end up with:\n\n```css\n.my-prefix-sm-blue {\n  @apply px-3 py-0.5 ... bg-blue-500 text-white\n}\n```\n\n## Turbine Config\n\n|        Name       |               Type               |                                           Description                                          |                        Example                       |\n| ----------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------- |\n| `prefix`          | `string`                         | Class prefix used to identify your components                                                  | `'btn'`                                              |\n| `baseStyles?`     | `string`                         | Base Tailwind CSS styles for the component                                                     | `'@apply px-4 py-2'`                                 |\n| `modifiers?`      | `{ [modifier: string]: string }` | Object where each key is a modifier prefix and values are Tailwind CSS overrides               | `{ sm: '@apply px3 py-0.5' }`                        |\n| `colorStyles`     | `(color) =\u003e string`              | Function which returns Tailwind CSS styles that utilize theme colors                           | `` (color) =\u003e `@apply bg-${color}-500 text-white` `` |\n| `colorValidator?` | `(color, values) =\u003e boolean`     | Function which is used to only generate components for theme colors that meet the requirements | `(color, values) =\u003e color !== 'gray'`                |\n\n## Troubleshooting\n\n\u003e *Tailwind CSS is throwing a class not found error for one of my colors.*\n\nThis has to do with one of the colors in your theme not having a value for the color class you are requesting. There are two solutions for this:\n  1. Add a color value to your theme config that matches the class name used in your `colorStyles`\n  2. Modify/Add the `colorValidator` to prevent the target color/value from having Turbine-generated styles\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperiorjt%2Ftailwindcss-turbine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperiorjt%2Ftailwindcss-turbine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperiorjt%2Ftailwindcss-turbine/lists"}