{"id":19382624,"url":"https://github.com/prosazhin/tailwind-dictionary","last_synced_at":"2026-03-02T12:39:32.176Z","repository":{"id":248714493,"uuid":"792216898","full_name":"prosazhin/tailwind-dictionary","owner":"prosazhin","description":"Creating a Tailwind Theme from design tokens","archived":false,"fork":false,"pushed_at":"2025-03-31T17:57:02.000Z","size":101,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T17:57:50.381Z","etag":null,"topics":["build-system","build-tool","design","design-system","design-tokens","design-tool","dictionary","style","system","tailwind","tailwind-theme","theme","tokens","tool"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwind-dictionary","language":"JavaScript","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/prosazhin.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}},"created_at":"2024-04-26T08:04:12.000Z","updated_at":"2025-03-31T17:56:48.000Z","dependencies_parsed_at":"2024-07-16T18:12:05.452Z","dependency_job_id":"51afc315-d271-46fb-bdce-486abdf26978","html_url":"https://github.com/prosazhin/tailwind-dictionary","commit_stats":null,"previous_names":["prosazhin/tailwind-dictionary"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Ftailwind-dictionary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Ftailwind-dictionary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Ftailwind-dictionary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Ftailwind-dictionary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prosazhin","download_url":"https://codeload.github.com/prosazhin/tailwind-dictionary/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250509833,"owners_count":21442507,"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":["build-system","build-tool","design","design-system","design-tokens","design-tool","dictionary","style","system","tailwind","tailwind-theme","theme","tokens","tool"],"created_at":"2024-11-10T09:22:30.693Z","updated_at":"2026-03-02T12:39:27.127Z","avatar_url":"https://github.com/prosazhin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Dictionary\n\nTailwind Dictionary is a package based on [Style Dictionary](https://github.com/amzn/style-dictionary) that allows creating a Tailwind Theme from design tokens.\n\n## Installation\n\n```bash\n$ npm install tailwind-dictionary --save-dev\n# or\n$ yarn add tailwind-dictionary --dev\n```\n\n## Usage\n\n```bash\n$ tailwind-dictionary\n```\n\n| Flag              | Short Flag | Description                                      |\n| ----------------- | ---------- | ------------------------------------------------ |\n| --config \\[path\\] | -c         | Set the config file to use. Must be a .json file |\n\n## Example\n\nAs an example of usage, you can look at the [pbstyles](https://github.com/prosazhin/pbstyles) style library.\n\n### config.json\n\n```json\n{\n  \"source\": [\"tokens/**/*.json\"],\n  \"output\": \"./styles\",\n  \"themeAliases\": { ... }\n}\n```\n\n| Property     | Type   | Description                                                                                                                                                                             |\n| :----------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| source       | Array  | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files. Exactly like [Style Dictionary](https://github.com/amzn/style-dictionary).                    |\n| output       | String | Base path to build the files, must end with a trailing slash. By default is \"./styles\".                                                                                                 |\n| themeAliases | Object | Aliases for the Tailwind Theme. [Complete theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js) and [documentation](https://tailwindcss.com/docs/theme). |\n\n### Example of theme aliases\n\nThe entire list of keys for the Tailwind theme can be found in the [documentation](https://tailwindcss.com/docs/theme) or [the full default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js). The most important thing is to use the same keys in the config for the theme as in the original theme, such as “fontFamily”.\n\nAliases must include a category for CTI, for example `rounded`. They can also include both a category and a type, for instance `font/family`, where `font` is the category and `family` is the type.\n\n#### Config\n\n```json\n{\n  ...\n  \"themeAliases\": {\n    \"fontFamily\": \"font/family\",\n    \"fontWeight\": \"font/weight\",\n    \"lineHeight\": \"font/leading\",\n    \"borderRadius\": \"rounded\",\n    \"extend\": {\n      \"opacity\": \"opacity\"\n    }\n  }\n}\n```\n\n#### Design-tokens\n\n```json\n{\n  \"font\": {\n    \"family\": {\n      \"sans\": { \"value\": \"Inter, sans-serif\" }\n    },\n    \"weight\": {\n      \"regular\": { \"value\": 400 },\n      \"medium\": { \"value\": 600 },\n      \"bold\": { \"value\": 700 }\n    },\n    \"leading\": {\n      \"none\": { \"value\": 1 },\n      \"tight\": { \"value\": 1.25 },\n      \"normal\": { \"value\": 1.5 }\n    }\n  },\n  \"rounded\": {\n    \"0\": { \"value\": \"0px\" },\n    \"4\": { \"value\": \"4px\" },\n    \"6\": { \"value\": \"6px\" },\n    \"8\": { \"value\": \"8px\" },\n    \"999\": { \"value\": \"999px\" }\n  },\n  \"opacity\": {\n    \"0\": { \"value\": \"0\" },\n    \"50\": { \"value\": \"0.5\" },\n    \"100\": { \"value\": \"1\" }\n  }\n}\n```\n\n#### Tailwind Theme\n\n```javascript\nmodule.exports = {\n  fontFamily: {\n    sans: 'Inter, sans-serif',\n  },\n  fontWeight: {\n    regular: 400,\n    medium: 600,\n    bold: 700,\n  },\n  lineHeight: {\n    none: 1,\n    tight: 1.25,\n    normal: 1.5,\n  },\n  borderRadius: {\n    0: '0px',\n    4: '4px',\n    6: '6px',\n    8: '8px',\n    999: '999px',\n  },\n  extend: {\n    opacity: {\n      0: '0',\n      50: '0.5',\n      100: '1',\n    },\n  },\n};\n```\n\n### Usage in a Tailwind theme\n\n```javascript\nconst theme = require('./styles/tailwind-theme');\n\nmodule.exports = {\n  ...\n  theme: {\n    ...theme,\n    extend: {\n      ...theme.extend,\n    },\n  },\n  ...\n};\n```\n\n### Example of typography mixins\n\n#### Config\n\n```json\n{\n  ...\n  \"themeAliases\": {\n    ...\n    \"fontSize\": \"font/size\",\n    ...\n  }\n}\n```\n\n#### Design-tokens\n\n```json\n{\n  \"font\": {\n    \"size\": {\n      \"12\": { \"value\": \"{size.12}\" },\n      \"16\": { \"value\": \"{size.16}\" },\n      \"20\": { \"value\": \"{size.20}\" }\n    },\n    \"h64\": {\n      \"font-size\": {\n        \"value\": \"64px\",\n        \"mixin\": \"h64\"\n      },\n      \"line-height\": {\n        \"value\": \"1.25\",\n        \"mixin\": \"h64\"\n      },\n      \"font-weight\": {\n        \"value\": \"700\",\n        \"mixin\": \"h64\"\n      }\n    }\n  }\n}\n```\n\n#### Tailwind Theme\n\n```javascript\nmodule.exports = {\n  fontSize: {\n    12: '12px',\n    16: '16px',\n    20: '20px',\n    h64: ['64px', { lineHeight: 1.25, fontWeight: 700 }],\n  },\n};\n```\n\n### Example of media query\n\n#### Config\n\n```json\n{\n  ...\n  \"themeAliases\": {\n    ...\n    \"screens\": \"screen\",\n    ...\n  }\n}\n```\n\n#### Design-tokens\n\n```json\n{\n  \"screen\": {\n    \"xl\": {\n      \"min\": { \"value\": \"1441px\" }\n    },\n    \"lg\": {\n      \"max\": { \"value\": \"1440px\" },\n      \"min\": { \"value\": \"921px\" }\n    }\n  }\n}\n```\n\n#### Tailwind Theme\n\n```javascript\nmodule.exports = {\n  screens: {\n    xl: { min: '1441px' },\n    lg: { max: '1440px', min: '921px' },\n  },\n};\n```\n\n### Example of animation\n\n#### Config\n\n```json\n{\n  ...\n  \"themeAliases\": {\n    ...\n    \"extend\": {\n      \"animation\": \"animation\",\n      \"keyframes\": \"keyframes\"\n    }\n  }\n}\n```\n\n#### Design-tokens\n\n```json\n{\n  \"animation\": {\n    \"show\": {\n      \"value\": \"show 300ms ease-in forwards\"\n    }\n  },\n  \"keyframes\": {\n    \"show\": {\n      \"from\": {\n        \"opacity\": {\n          \"value\": 0,\n          \"mixin\": \"show\"\n        }\n      },\n      \"to\": {\n        \"opacity\": {\n          \"value\": 1,\n          \"mixin\": \"show\"\n        }\n      }\n    }\n  }\n}\n```\n\n#### Tailwind Theme\n\n```javascript\nmodule.exports = {\n  extend: {\n    animation: {\n      show: 'show 300ms ease-in forwards',\n    },\n    keyframes: {\n      show: {\n        from: {\n          opacity: 0,\n        },\n        to: {\n          opacity: 1,\n        },\n      },\n    },\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprosazhin%2Ftailwind-dictionary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprosazhin%2Ftailwind-dictionary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprosazhin%2Ftailwind-dictionary/lists"}