{"id":15289053,"url":"https://github.com/zamotany/tailwind-ts-gen","last_synced_at":"2026-01-19T05:33:03.562Z","repository":{"id":36465536,"uuid":"224926294","full_name":"zamotany/tailwind-ts-gen","owner":"zamotany","description":"Generate TS/JS constants with Tailwind CSS class names for better IntelliSense and autocompletion/autosuggestion.","archived":false,"fork":false,"pushed_at":"2023-01-05T01:58:32.000Z","size":2160,"stargazers_count":2,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T11:47:11.896Z","etag":null,"topics":["autocomplete","autosuggest","cli","generator","intellisense","javascript","js","nodejs","postcss","tailwind","tailwind-css","tailwindcss","tool","ts","typescript"],"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/zamotany.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2019-11-29T21:48:53.000Z","updated_at":"2023-12-01T08:06:32.000Z","dependencies_parsed_at":"2023-01-17T01:45:34.921Z","dependency_job_id":null,"html_url":"https://github.com/zamotany/tailwind-ts-gen","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamotany%2Ftailwind-ts-gen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamotany%2Ftailwind-ts-gen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamotany%2Ftailwind-ts-gen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamotany%2Ftailwind-ts-gen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zamotany","download_url":"https://codeload.github.com/zamotany/tailwind-ts-gen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427012,"owners_count":20937214,"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":["autocomplete","autosuggest","cli","generator","intellisense","javascript","js","nodejs","postcss","tailwind","tailwind-css","tailwindcss","tool","ts","typescript"],"created_at":"2024-09-30T15:58:39.500Z","updated_at":"2026-01-19T05:33:03.553Z","avatar_url":"https://github.com/zamotany.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `tailwind-ts-gen`\n\n[![GitHub Workflow Status][build-badge]][build] [![Version][version]][package] [![MIT License][license-badge]][license]\n\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n[![Code of Conduct][coc-badge]][coc]\n\nGenerate TS/JS constants with Tailwind CSS class names for better IntelliSense and autocompletion/autosuggestion.\n\n## Installation \u0026 usage\n\n`tailwind-ts-gen` only support Tailwind CSS used __with PostCSS__.\n\nInstall the package:\n```bash\nyarn add postcss tailwindcss tailwind-ts-gen\n```\n\nThen:\n```bash\nyarn tw2ts --out tailwind.ts tailwind.css\n```\n\nIt will generate a `tailwind.ts` file based on `--out` option with all of the classes from `tailwind.css` file. \n\nAssuming your `tailwind.css` file looks like this:\n\n```css\n@import \"tailwindcss/base\";\n\n@import \"tailwindcss/components\";\n\n@import \"tailwindcss/utilities\";\n```\n\n__Don't forget to configure PostCSS with `postcss-import` plugin.__ Otherwise `tailwind-ts-gen` won't be able to find any Tailwind CSS classes.\n\nThe generated file will look similarity to:\n```ts\n/**\n * @file Tailwind CSS class names exported as const variables.\n *       Auto-generated file. Do not modify.\n * @author tailwind-ts-gen\n */\n\n/** Constant for `container` */\nexport const container = 'container';\n// ... etc\n/** Constant for `bg-gray-100` */\nexport const bg_gray_100 = 'bg-gray-100';\n/** Constant for `bg-gray-200` */\nexport const bg_gray_200 = 'bg-gray-200';\n/** Constant for `bg-gray-300` */\nexport const bg_gray_300 = 'bg-gray-300';\n// ... etc\n/** Constant for `hover:font-bold` */\nexport const hover_font_bold = 'hover:font-bold';\n// ... etc\n```\n\n__Additionally:__\n\n- You can use both `.ts` and `.js` extensions for the generate file.\n- You can specify multiple input files eg: `tw2ts --out output.ts input1.css input2.css`.\n- You can use SASS, SCSS, LESS and other extensions for input files as long as PostCSS is configured to understand them.\n- If you pass relative file for `--out` or for input files, it will be resolved based on current working directory.\n- If you have `prettier` installed the generated code will be prettified. You can use `--prettier-config` to specify custom Prettier configuration, otherwise it will be inferred.\n- You can specify path to custom PostCSS config with `--postcss-config`.\n\n## `tw2ts -h`\n\n```\ntw2ts \u003cinput...\u003e\n\nGenerate file with Tailwind CSS class names. If Prettier config file and\nPrettier package is available, it will be used to format the generated file.\n\nYou can pass multiple input files - class names from all of them, will be\nextracted to a single file specified by -o, --out option.\n\nPositionals:\n  input  CSS/SASS/LESS file with Tailwind CSS imports.                  [string]\n\nOptions:\n  --version          Show version number                               [boolean]\n  --out, -o          Path to an output file with generated code.\n                                                             [string] [required]\n  --postcss-config   Path to PostCSS config file.                       [string]\n  --prettier-config  Path to Prettier config file.                      [string]\n  --help             Show help                                         [boolean]\n```\n\n[version]: https://img.shields.io/npm/v/tailwind-ts-gen.svg?style=flat-square\n[package]: https://www.npmjs.com/package/tailwind-ts-gen\n[build]: https://github.com/zamotany/tailwind-ts-gen/actions\n[build-badge]: https://img.shields.io/github/workflow/status/zamotany/tailwind-ts-gen/Node%20CI?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/tailwind-ts-gen.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs-welcome]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/zamotany/tailwind-ts-gen/blob/master/CODE_OF_CONDUCT.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzamotany%2Ftailwind-ts-gen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzamotany%2Ftailwind-ts-gen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzamotany%2Ftailwind-ts-gen/lists"}