{"id":15513619,"url":"https://github.com/mathieutu/tailwind-ts","last_synced_at":"2025-07-25T04:02:23.085Z","repository":{"id":135923277,"uuid":"255720102","full_name":"mathieutu/tailwind-ts","owner":"mathieutu","description":"TailwindCss plugin to export Typescript typings, helpers and const from your config.","archived":false,"fork":false,"pushed_at":"2020-04-15T13:34:42.000Z","size":722,"stargazers_count":57,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-09T03:49:40.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mathieutu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2020-04-14T20:36:20.000Z","updated_at":"2025-02-14T04:03:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"c1f9c2a8-dd5f-4831-80b8-810df5c69b95","html_url":"https://github.com/mathieutu/tailwind-ts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mathieutu/tailwind-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Ftailwind-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Ftailwind-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Ftailwind-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Ftailwind-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathieutu","download_url":"https://codeload.github.com/mathieutu/tailwind-ts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Ftailwind-ts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266952311,"owners_count":24011499,"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-07-25T02:00:09.625Z","response_time":70,"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":[],"created_at":"2024-10-02T09:54:28.408Z","updated_at":"2025-07-25T04:02:23.027Z","avatar_url":"https://github.com/mathieutu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Tailwind TS Generator\n\n[![npm](https://img.shields.io/npm/v/tailwind-ts.svg)](https://www.npmjs.com/package/tailwind-ts)\n[![npm](https://img.shields.io/npm/dt/tailwind-ts.svg)](https://www.npmjs.com/package/tailwind-ts) \n\n\n**⚡️ Generate Tailwind type from your own configuration!**\n\nThis package is a [Tailwindcss](https://tailwindcss.com) plugin that generates code out of your tailwind configuration.\nIt has full support of your personalised config, and your plugins.\n\nFor example, it is used daily with `@tailwind/ui` and `@tailwindcss/custom-forms`.\nIt doesn't change anything to your other postcss plugins like `autoprefixer` and `purgecss`. \n\n\u003cbr\u003e\n\n\u003cimg src=\"./.github/assets/array.png\" width=\"400\" alt=\"usage with array\"\u003e\n\n\u003cimg src=\".github/assets/tw.png\" width=\"400\" alt=\"usage with helper\"\u003e\n\n\u003cbr\u003e\n\n## Installation\nAdd it to your dependencies\n\n```bash\nyarn add -D tailwind-ts\n\n# or\nnpm install --save-dev tailwind-ts\n```\n\nAdd it at the end of the [plugins list](https://tailwindcss.com/docs/configuration/#plugins) in your `tailwind.config.js` file.\n```js\nmodule.exports = {\n  ...\n  plugins: [\n    ...\n    require('tailwind-ts'),\n  ],\n};\n``` \n\nAnd _voilà_!\n\nNow a `tailwind-types.ts` file will be generated each time you generate your css with tailwind.\n \n## Configuration\n\nYou can select what you want to include in the generated file by passing options to the plugin:\n\n```js\nmodule.exports = {\n  ...\n  plugins: [\n    ...\n    require('tailwind-ts')({ path: 'my-custom-file.ts' }),\n  ],\n};\n```\n\n| Option                 | Type    | Default value        | Usage                                                                 |\n|----------------------- |---------|----------------------|---------------------------------------------------------------------- |\n| path                   | string  | `'tailwind-type.ts'` | Path of the generated file (relative to your configuration file)      |\n| exportClassesChoice    | boolean | `true`               | To generate the `TailwindClass` type (see [usage](#tailwindclass))            |\n| exportClassesList      | boolean | `false`              | To generate the `TailwindClasses` type (see [usage](#tailwindclasses))          |\n| exportClassNamesHelper | boolean | `false`              | To generate the `tw` helper (see [usage](#tw))                     |\n| exportConstants        | boolean | `false`              | To generate all the tailwind inspired constants (see [usage](#tailwind-constants)) |\n\n\n## Usage\n\n### TailwindClass\nWith `exportClassesChoice` set, the package will generate and export an \n[union type](https://www.tutorialsteacher.com/typescript/typescript-union) `TailwindClass` with all Tailwind available utilities :\n\n```ts \nexport type TailwindClass = 'sr-only' | 'not-sr-only' | 'focus:sr-only' | ...\n``` \n\nYou can use it directly by importing the type from the generated file.\n\nFor example:\n```tsx\nimport { TailwindClass } from './tailwind-types'\nconst globalPaddingClass: TailwindClass = 'px-2.5'\n\nconst btnClasses: TailwindClass[] = [\n  'inline-flex', 'items-center',\n  globalPaddingClass, 'py-1.5', 'border', 'border-transparent',\n  'text-xs', 'leading-4', 'font-medium', 'rounded',\n  'text-indigo-700', 'bg-indigo-100',\n  'hover:bg-indigo-50', \n  ...\n]\n\nreturn \u003cbutton className={btnClasses.join(' ')}\u003eFoo !\u003c/button\u003e\n```\n\n\n### tailwindClasses\nWith `exportClassesList` set, the package will generate and export an array `tailwindClasses` \nwhich lists all Tailwind available utilities:\n\n```ts \nexport const tailwindClasses = [\n  'sr-only',\n  'not-sr-only',\n  'focus:sr-only', \n  ...\n] as const\n``` \n\nYou can use it directly by importing the const from the generated file.\n\nFor example:\n```ts\nimport { tailwindClasses } from './tailwind-types'\n\nconst xlClasses = tailwindClasses\n  .filter(className =\u003e className.includes('xl'))\n  .map(className =\u003e className.replace('xl:', ''))\n  ... \n\n```\n\n### tw\nWith `exportClassNamesHelper` set, the package will generate and export a function `tw` \nwhich is just a typed wrapper of [classnames](https://github.com/JedWatson/classnames) package:\n\n```ts \ntype TailwindClassNamesFunction = ...\n\nexport const tw: TailwindClassNamesFunction = require('classnames')\n```\n\nYou can use it directly by importing the function from the generated file.\n\nFor example:\n```tsx\nimport { tw } from './tailwind-types'\n\nconst shouldBeRed = true / false //useState, computed or whatever... your logic here!\nconst shouldBeBordered = true / false //useState, computed or whatever... your logic here!\n\nconst btnClasses = tw(\n  'inline-flex', 'items-center',\n  'px-0.5', 'py-1.5',\n  'text-xs', 'leading-4', 'font-medium', 'rounded',\n  'hover:bg-indigo-50', \n  shouldBeRed ? ['text-red-700', 'bg-red-100'] : ['text-indigo-700', 'bg-indigo-100'],\n  { 'border': shouldBeBordered },\n)\n\nreturn \u003cbutton className={btnClasses}\u003eFoo !\u003c/button\u003e\n```\n\nThis is exactly the same syntax and features than [classNames](https://github.com/JedWatson/classnames) function here, \nbut fully Tailwind typed.\n\n### Tailwind Constants\nThis one is a bit more special. \nWith `exportConstants` set, the package will generate and export all the tailwind utilities as constants.\n\n```ts \nexport const twBgGray50 = 'bg-gray-50' as const\nexport const twBgGray100 = 'bg-gray-100' as const\nexport const twHoverFontBold = 'hover:font-bold' as const\nexport const twH64 = 'h-64' as const\n...\n```\nYou can use it directly by importing the constants from the generated file.\n\nFor example:\n```tsx\nimport { twText3Xl } from './tailwind-types'\n\nreturn \u003ch1 className={twText3Xl}\u003eFoo !\u003c/h1\u003e\n\n```\n\nYou have to note that because constants in javascript follow a specific syntax, and some words are forbidden, some rules have to be applied:\n  - constants are camelCased,\n  - a `tw` prefix is added. (mainly because of `static` utility which is not allowed as const name and so becomes `twStatic`),\n  - all the `:` and `-` characters are removed,\n  - the `.` is replace by `Dot`: `w-3.5` becomes `twW3Dot5`\n  - the `/` is replace by `On`: `w-3/5` becomes `twW3On5`\n  \n\n### Other?\n\nBy the way the plugin is made, it is really easy to add generated content from the list of classes. \nNew generators could be added the core, or be the subject of plugins if there are some needs.\n\nExample of generators: ReasonMl or flow typings, pure javascript constants, etc. \n\n**Please feel free to open an issue, so we can discuss that.**\n\n## FAQ\n\n### Will tailwind-ts be in my browser bundle?\nIt's a big nope!\nThe package is a nodejs tool, and is meant to be used only during development phase.\n\nThe generated file however can be included in your bundle depending on what you do with it, \nso be attentive to your building process, and the size of your bundle. \n\n### What are the dependencies of this package.\n\nThe only needed dependency of this package is [ramda](https://ramdajs.com), a tool for data manipulation with \nfunctional programming flavor. Please check out of [the code](./src) of this package to understand why and how it is amazing.\n\nThe package has also tailwindcss as a peerDependency, but it should not be a problem as it's actually a tool for Tailwind.\n\nYou also will need [camelCase](https://github.com/sindresorhus/camelcase) if you want to export the constants, \nand [classnames](https://github.com/JedWatson/classnames) if you want to export the classNames wrapper.\n\nAt the end, as said previously, this package will not be included in your bundle. \nYou even can remove it after having generated the type if you want. \n\n### Another question?\n\nPlease feel free to [ask](https://github.com/mathieutu/tailwind-ts/issues/new)!\n\n\n## License\n\nThis package is an open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n\n\n## Contributing\n\nIssues and PRs are obviously welcomed and encouraged, both for bugs and new features as well as documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathieutu%2Ftailwind-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathieutu%2Ftailwind-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathieutu%2Ftailwind-ts/lists"}