{"id":14962233,"url":"https://github.com/georgecht/tailwindcss-expose-colors","last_synced_at":"2025-10-24T22:32:20.059Z","repository":{"id":216206112,"uuid":"740720854","full_name":"GeorgeCht/tailwindcss-expose-colors","owner":"GeorgeCht","description":"Tailwind CSS plugin that exposes all of Tailwind's colors, including any custom ones included in your theme, as custom CSS properties on the :root element","archived":false,"fork":false,"pushed_at":"2024-04-25T07:35:57.000Z","size":264,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-03T21:05:23.424Z","etag":null,"topics":["css","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@tailwind-plugin/expose-colors","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/GeorgeCht.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-01-08T23:30:47.000Z","updated_at":"2024-05-08T23:24:54.000Z","dependencies_parsed_at":"2024-01-09T02:26:56.152Z","dependency_job_id":"e4c8ac5f-f52b-4ebb-a00d-5a0fdd4a96b7","html_url":"https://github.com/GeorgeCht/tailwindcss-expose-colors","commit_stats":{"total_commits":16,"total_committers":4,"mean_commits":4.0,"dds":0.375,"last_synced_commit":"484fd2be8579bcf05f692f7585e7574af43c0110"},"previous_names":["georgecht/tailwindcss-expose-colors"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeCht%2Ftailwindcss-expose-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeCht%2Ftailwindcss-expose-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeCht%2Ftailwindcss-expose-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeCht%2Ftailwindcss-expose-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeorgeCht","download_url":"https://codeload.github.com/GeorgeCht/tailwindcss-expose-colors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867917,"owners_count":16555801,"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","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-09-24T13:29:45.189Z","updated_at":"2025-10-24T22:32:14.697Z","avatar_url":"https://github.com/GeorgeCht.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\".github/logo-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\".github/logo-light.svg\"\u003e\n    \u003cimg alt=\"Tailwind CSS\" src=\".github/logo-light.svg\" width=\"350\" height=\"70\" style=\"max-width: 100%;\"\u003e\n  \u003c/picture\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://tailwindcss.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/TailwindCSS-\u003ev3.0.0-blue\" alt=\"Required version\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/georgecht/tailwindcss-expose-colors/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/tailwindcss-expose-colors.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/georgecht/tailwindcss-expose-colors/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/tailwindcss-expose-colors.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n  \u003ch1 align=\"center\"\u003e@tailwind-plugin/expose-colors\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cimg alt=\"Code example\" src=\".github/code.png\" style=\"max-width: 100%;\"\u003e\n\n## Introduction\n\nThis is a pretty much straight-forward Tailwind plugin that allows you to expose Tailwind's colors and their shades, including any custom ones included in your own theme, as custom CSS properties on the :root element. This can be useful for maintaining a consistent color theme across your project and easily accessing Tailwind colors in your stylesheets.\n\n## Requirements\n\nThis plugin is built upon [TailwindCSS](https://github.com/tailwindlabs/tailwindcss/releases/latest). Therefore, TailwindCSS v3.0.0 is at least required. Get started [here](https://tailwindcss.com/docs/installation).\n\nIt's also recommended that you have a basic understanding of CSS and how to install Tailwind plugins. Learn more about Tailwind plugins [here](https://tailwindcss.com/docs/plugins).\n\n## Install\n\nInstall the plugin from npm:\n\n```\nnpm i -D @tailwind-plugin/expose-colors\n```\n\nThen add the plugin to your tailwind.config.js file:\n\n```ts\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@tailwind-plugin/expose-colors'),\n    // ...\n  ],\n}\n```\n\n## Usage options\n\n### `extract`\n\n| Option    | Type              | Default | Description                                                                                                           |\n| --------- | ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |\n| `extract` | `string \\| Array` | `'all'` | Specify the color keys as an array to extract. Use 'all' to extract all colors or provide an array of all color keys. |\n\n📌 You can extract colors from [Tailwind's default color palette](https://tailwindcss.com/docs/customizing-colors), or your custom ones declared in your theme.\n\n⚠️ Exposing `'all'` Tailwind's colors, will increase the filesize of your bundled CSS file by _7.76 kB_\n\n#### Example:\n\n```ts\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    colors: {\n      // your custom colors\n      midnight: '#121063',\n      tahiti: {\n        100: '#cffafe',\n        200: '#a5f3fc',\n        300: '#67e8f9',\n        // ...\n      },\n    },\n    // ...\n  },\n  plugins: [\n    require('@tailwind-plugin/expose-colors')({\n      extract: ['yellow', 'blue', 'midnight', 'tahiti'],\n    }),\n    // ...\n  ],\n}\n```\n\n#### Exposed colors:\n\n```css\n  ::root {\n    --tw-yellow-50: #FEFCE8;\n    --tw-yellow-100: #FEF9C3;\n    --tw-yellow-200: #FEF08A;\n    ...\n    --tw-midnight: #121063;\n    --tw-tahiti-100: #CFFAFE;\n    --tw-tahiti-200: #A5F3FC;\n    --tw-tahiti-300: #67E8F9;\n    ...\n  }\n```\n\n### `prefix`\n\n| Option   | Type     | Default | Description                                                         |\n| -------- | -------- | ------- | ------------------------------------------------------------------- |\n| `prefix` | `string` | `--tw`  | Customize the prefix for CSS variables. The default prefix is --tw. |\n\n#### Example:\n\n```ts\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  // ...\n  plugins: [\n    require('@tailwind-plugin/expose-colors')({\n      prefix: '--color',\n    }),\n  ],\n}\n```\n\n#### Exposed colors:\n\n```css\n  ::root {\n    --color-midnight: #121063;\n    --color-tahiti-100: #CFFAFE;\n    --color-tahiti-200: #A5F3FC;\n    --color-tahiti-300: #67E8F9;\n    ...\n  }\n```\n\n### `mode`\n\n| Option | Type             | Default | Description                                                                                           |\n| ------ | ---------------- | ------- | ----------------------------------------------------------------------------------------------------- |\n| `mode` | `'hex' \\| 'rgb'` | `hex`   | Choose the color mode for extracted colors. Use 'hex' for hexadecimal colors or 'rgb' for RGB colors. |\n\n#### Example:\n\n```ts\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  // ...\n  plugins: [\n    require('@tailwind-plugin/expose-colors')({\n      mode: 'rgb',\n    }),\n  ],\n}\n```\n\n#### Exposed colors:\n\n```css\n  ::root {\n    --tw-midnight: 18, 16, 99;\n    --tw-tahiti-100: 207, 250, 254;\n    --tw-tahiti-200: 165, 243, 252;\n    --tw-tahiti-300: 103, 232, 249;\n    ...\n  }\n```\n\nThe exposed variable colors will be in `'rgb'` format so you can use them like so:\n\n```css\n.myclass {\n  background: rgba(var(--tw-tahiti-500), 0.8);\n}\n```\n\n## Authors\n\nBased on Merott Movahedi's and Rafael R. Camargo's snippet. Developed, modified and maintained by [George Cht](https://github.com/GeorgeCht).\n\n- George Cht ([@GeorgeCht](https://github.com/GeorgeCht))\n- Merott Movahedi ([@Merott](https://github.com/Merott))\n- Rafael R. Camargo ([@rafaelrcamargo](https://github.com/rafaelrcamargo))\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgecht%2Ftailwindcss-expose-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorgecht%2Ftailwindcss-expose-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgecht%2Ftailwindcss-expose-colors/lists"}