{"id":21829706,"url":"https://github.com/0xtlt/tailwindcss-var-generator","last_synced_at":"2026-05-19T19:38:08.227Z","repository":{"id":64411817,"uuid":"574904717","full_name":"0xtlt/tailwindcss-var-generator","owner":"0xtlt","description":"A plugin for Tailwind CSS that generates CSS variables for all of the colors, sizes, and other styles defined in your Tailwind config. This allows you to use the styles from your Tailwind config directly in your CSS code.","archived":false,"fork":false,"pushed_at":"2022-12-06T14:41:22.000Z","size":49,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-26T17:53:05.506Z","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/0xtlt.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":"2022-12-06T10:32:23.000Z","updated_at":"2023-07-23T11:42:14.000Z","dependencies_parsed_at":"2022-12-13T15:53:08.431Z","dependency_job_id":null,"html_url":"https://github.com/0xtlt/tailwindcss-var-generator","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/0xtlt/tailwindcss-var-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Ftailwindcss-var-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Ftailwindcss-var-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Ftailwindcss-var-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Ftailwindcss-var-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xtlt","download_url":"https://codeload.github.com/0xtlt/tailwindcss-var-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Ftailwindcss-var-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33229369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T15:49:41.270Z","status":"ssl_error","status_checked_at":"2026-05-19T15:49:22.917Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-11-27T18:28:51.065Z","updated_at":"2026-05-19T19:38:03.219Z","avatar_url":"https://github.com/0xtlt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-var-generator\n\nA plugin for Tailwind CSS that generates CSS variables for all of the colors, sizes, and other styles defined in your Tailwind config. This allows you to use the styles from your Tailwind config directly in your CSS code.\n\n## Installation\n\nTo install this package, run the following command:\n\n```bash\nnpm install tailwindcss-var-generator\n```\n\n## Usage\n\nFirst, you need to import the `tailwindCssVariables` function from this package and add it to your Tailwind plugin list:\n\n```js\nconst plugin = require(\"tailwindcss/plugin\");\n\nconst { tailwindCssVariables } = require(\"tailwindcss-var-generator\");\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {},\n  plugins: [tailwindCssVariables()],\n};\n```\n\nThe `tailwindCssVariables` function takes one optional argument, displayKinds, which is an array of styles that you want to generate CSS variables for. By default, it will generate CSS variables for colors and font sizes. You can pass in any combination of the following values to customize which styles to include:\n\n- \"colors\": generates CSS variables for all of the colors defined in the Tailwind config.\n- \"font-sizes\": generates CSS variables for all of the font sizes defined in the Tailwind config.\n\nFor example, if you only want to generate CSS variables for colors, you can call the `tailwindCssVariables` function like this:\n\n```js\ntailwindCssVariables([\"colors\"]);\n```\n\nOnce you have added the `tailwindCssVariables` function to your Tailwind plugin list, you can use the generated CSS variables in your CSS code:\n\n```css\n/*\n * This will use the value of the `red.500` color defined in your Tailwind\n * config as the value of the `color` property.\n */\n.my-class {\n  color: var(--color-red-500);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtlt%2Ftailwindcss-var-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xtlt%2Ftailwindcss-var-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtlt%2Ftailwindcss-var-generator/lists"}