{"id":14962232,"url":"https://github.com/smastrom/tw-variables","last_synced_at":"2026-01-05T02:03:36.562Z","repository":{"id":135634658,"uuid":"612200983","full_name":"smastrom/tw-variables","owner":"smastrom","description":"🎨 ~400 useful, ready-to-import CSS variables generated straight from Tailwind source.","archived":false,"fork":false,"pushed_at":"2023-05-09T18:12:23.000Z","size":68,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T01:51:39.532Z","etag":null,"topics":["css-variables","tailwind","tailwind-colors","tailwind-css-variables","tailwind-tokens","tailwind-variabes","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smastrom.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":"2023-03-10T12:19:02.000Z","updated_at":"2025-03-09T06:52:52.000Z","dependencies_parsed_at":"2024-09-17T14:07:08.897Z","dependency_job_id":"e74da2ed-eaee-4ec2-8218-34400f6ef09c","html_url":"https://github.com/smastrom/tw-variables","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":0.05555555555555558,"last_synced_commit":"b25bdd17e917593cbd270574904fe851dd74939c"},"previous_names":["smastrom/tw-variables","smastrom/tailwind-variables"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Ftw-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Ftw-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Ftw-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Ftw-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smastrom","download_url":"https://codeload.github.com/smastrom/tw-variables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246190462,"owners_count":20738034,"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":["css-variables","tailwind","tailwind-colors","tailwind-css-variables","tailwind-tokens","tailwind-variabes","tailwindcss"],"created_at":"2024-09-24T13:29:45.113Z","updated_at":"2026-01-05T02:03:31.544Z","avatar_url":"https://github.com/smastrom.png","language":"CSS","readme":"![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/tw-variables/build-and-test.yml?branch=main\u0026label=build) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/tw-variables/build-and-test.yml?branch=main\u0026label=checks)\n\n# Tailwind Variables (tw-variables)\n\n~400 useful, ready-to-import CSS variables generated straight from Tailwind source files.\n\n\u003cbr /\u003e\n\n## Copy / Paste\n\n| Source                                                                            | Type       |\n| --------------------------------------------------------------------------------- | ---------- |\n| [jsDelivr](https://www.jsdelivr.com/package/npm/tw-variables?tab=files\u0026path=dist) | Minified   |\n| [GitHub](https://github.com/smastrom/tw-variables/tree/main/css)                  | Unminified |\n\n\u003cbr /\u003e\n\n## Browser Import\n\nAll variables including colors:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-variables/dist/variables.css\" /\u003e\n```\n\nOne or more subsets:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-variables/dist/colors.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-variables/dist/size.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-variables/dist/sky.css\" /\u003e\n```\n\nPreflight:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-variables/dist/preflight.css\" /\u003e\n```\n\n\u003cbr /\u003e\n\n## Package Manager\n\n### Installation\n\n```bash\npnpm add -D tw-variables\n```\n\n### Import - CSS\n\nAll variables (including colors):\n\n```js\nimport 'tw-variables/variables.css'\n```\n\nOne or more subsets:\n\n```js\nimport 'tw-variables/colors.css'\nimport 'tw-variables/size.css'\nimport 'tw-variables/green.css'\n```\n\nPreflight:\n\n```js\nimport 'tw-variables/preflight.css'\n```\n\n### Import - PostCSS\n\nIf using PostCSS, you can use this package in conjunction with [postcss-jit-props](https://github.com/GoogleChromeLabs/postcss-jit-props) to strip any unused variable from the final CSS:\n\n```bash\npnpm add -D postcss postcss-jit-props\n```\n\n```js\nconst postcssJitProps = require('postcss-jit-props')\nconst twVariables = require('tw-variables')\n\nmodule.exports = {\n   plugins: [postcssJitProps(twVariables)],\n}\n```\n\n\u003cbr /\u003e\n\n## Usage\n\n```css\n.my-container {\n   width: var(--width-full);\n   max-width: var(--width-xl);\n   z-index: var(--z-10);\n   padding: var(--size-4);\n   margin: var(--size-6);\n   font-family: 'Basier Circle', var(--family-sans);\n   font-size: var(--text-base);\n   font-weight: var(--font-medium);\n   line-height: var(--leading-normal);\n   letter-spacing: var(--tracking-tight);\n   color: var(--blue-500);\n   background-color: var(--slate-500);\n   border: var(--border-2) solid var(--blue-500);\n   border-radius: var(--radius-2xl);\n   box-shadow: var(--shadow-lg);\n}\n```\n\n\u003cbr /\u003e\n\n## Subsets\n\n| Name                       | Prefix                   | Import                            | Reference                                                       |\n| -------------------------- | ------------------------ | --------------------------------- | --------------------------------------------------------------- |\n| `blur`                     | `--blur-`                | `tw-variables/blur.css`           | [Link](https://tailwindcss.com/docs/blur)                       |\n| `borderRadius`             | `--radius-`              | `tw-variables/border-radius.css`  | [Link](https://tailwindcss.com/docs/border-radius)              |\n| `borderWidth`              | `--border-`              | `tw-variables/border-width.css`   | [Link](https://tailwindcss.com/docs/border-width)               |\n| `boxShadow`                | `--shadow-`              | `tw-variables/box-shadow.css`     | [Link](https://tailwindcss.com/docs/box-shadow)                 |\n| `colors`                   | `--blue-`, `--slate-`... | `tw-variables/colors.css`         | [Link](https://tailwindcss.com/docs/customizing-colors)         |\n| `dropShadow`               | `--drop-`                | `tw-variables/drop-shadow.css`    | [Link](https://tailwindcss.com/docs/drop-shadow)                |\n| `fontWeight`               | `--font-`                | `tw-variables/font-weight.css`    | [Link](https://tailwindcss.com/docs/font-weight)                |\n| `fontFamily`               | `--family-`              | `tw-variables/font-family.css`    | [Link](https://tailwindcss.com/docs/font-family)                |\n| `fontSize`                 | `--text-`                | `tw-variables/font-size.css`      | [Link](https://tailwindcss.com/docs/font-size)                  |\n| `letterSpacing`            | `--tracking-`            | `tw-variables/letter-spacing.css` | [Link](https://tailwindcss.com/docs/letter-spacing)             |\n| `lineHeight`               | `--leading-`             | `tw-variables/line-height.css`    | [Link](https://tailwindcss.com/docs/line-height)                |\n| `opacity`                  | `--opacity-`             | `tw-variables/opacity.css`        | [Link](https://tailwindcss.com/docs/opacity)                    |\n| `maxWidth`                 | `--width-`               | `tw-variables/width.css`          | [Link](https://tailwindcss.com/docs/max-width)                  |\n| `screens`                  | `--screen-`              | `tw-variables/screen.css`         | [Link](https://tailwindcss.com/docs/theme#screens)              |\n| `spacing`                  | `--size-`                | `tw-variables/size.css`           | [Link](https://tailwindcss.com/docs/padding)                    |\n| `transitionTimingFunction` | `--easing-`              | `tw-variables/easing.css`         | [Link](https://tailwindcss.com/docs/transition-timing-function) |\n| `zIndex`                   | `--z-`                   | `tw-variables/z-index.css`        | [Link](https://tailwindcss.com/docs/z-index)                    |\n\n\u003cbr /\u003e\n\n## Colors subsets\n\nColors reference: [Link](https://tailwindcss.com/docs/customizing-colors)\n\n| Name      | Prefix       | Import                     |\n| --------- | ------------ | -------------------------- |\n| `amber`   | `--amber-`   | `tw-variables/amber.css`   |\n| `blue`    | `--blue-`    | `tw-variables/blue.css`    |\n| `cyan`    | `--cyan-`    | `tw-variables/cyan.css`    |\n| `emerald` | `--emerald-` | `tw-variables/emerald.css` |\n| `fuchsia` | `--fuchsia-` | `tw-variables/fuchsia.css` |\n| `gray`    | `--gray-`    | `tw-variables/gray.css`    |\n| `green`   | `--green-`   | `tw-variables/green.css`   |\n| `indigo`  | `--indigo-`  | `tw-variables/indigo.css`  |\n| `lime`    | `--lime-`    | `tw-variables/lime.css`    |\n| `neutral` | `--neutral-` | `tw-variables/neutral.css` |\n| `orange`  | `--orange-`  | `tw-variables/orange.css`  |\n| `pink`    | `--pink-`    | `tw-variables/pink.css`    |\n| `purple`  | `--purple-`  | `tw-variables/purple.css`  |\n| `red`     | `--red-`     | `tw-variables/red.css`     |\n| `rose`    | `--rose-`    | `tw-variables/rose.css`    |\n| `slate`   | `--slate-`   | `tw-variables/slate.css`   |\n| `sky`     | `--sky-`     | `tw-variables/sky.css`     |\n| `teal`    | `--teal-`    | `tw-variables/teal.css`    |\n| `violet`  | `--violet-`  | `tw-variables/violet.css`  |\n| `yellow`  | `--yellow-`  | `tw-variables/yellow.css`  |\n| `zinc`    | `--zinc-`    | `tw-variables/zinc.css`    |\n\n\u003cbr /\u003e\n\n## Updates\n\nSince the output is generated as expected, for now, I consider this package \"complete\". I also see no point in updating it everytime Tailwind releases a new version.\n\nOnce Tailwind will drop some new tokens that are worth to be added, I'll make sure to include them in a new version of this package.\n\n\u003cbr /\u003e\n\n## See also\n\n[Open Props](https://github.com/argyleink/open-props) by _Adam Argyle_\n\n\u003cbr /\u003e\n\n## License\n\n0BSD\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Ftw-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmastrom%2Ftw-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Ftw-variables/lists"}