{"id":15628921,"url":"https://github.com/ryanclementshax/tailwindcss-themer","last_synced_at":"2025-05-15T02:05:52.214Z","repository":{"id":38173225,"uuid":"437067148","full_name":"RyanClementsHax/tailwindcss-themer","owner":"RyanClementsHax","description":"An unopinionated, scalable, tailwindcss theming solution","archived":false,"fork":false,"pushed_at":"2025-04-16T15:38:28.000Z","size":14257,"stargazers_count":307,"open_issues_count":3,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-15T02:05:51.617Z","etag":null,"topics":["dark-mode","plugin","tailwind","tailwindcss","tailwindcss-plugin","themer","themes","theming"],"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/RyanClementsHax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["ryanclementshax"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-12-10T17:50:10.000Z","updated_at":"2025-03-26T00:06:48.000Z","dependencies_parsed_at":"2023-09-26T17:26:25.397Z","dependency_job_id":"c72d1fcd-13dd-42be-b5cc-86bba039ecf3","html_url":"https://github.com/RyanClementsHax/tailwindcss-themer","commit_stats":{"total_commits":203,"total_committers":4,"mean_commits":50.75,"dds":0.09359605911330049,"last_synced_commit":"84c4174b2cf54fe77aba9f82862d24a78c148157"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Ftailwindcss-themer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Ftailwindcss-themer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Ftailwindcss-themer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanClementsHax%2Ftailwindcss-themer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanClementsHax","download_url":"https://codeload.github.com/RyanClementsHax/tailwindcss-themer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259370,"owners_count":22040819,"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":["dark-mode","plugin","tailwind","tailwindcss","tailwindcss-plugin","themer","themes","theming"],"created_at":"2024-10-03T10:24:48.986Z","updated_at":"2025-05-15T02:05:52.184Z","avatar_url":"https://github.com/RyanClementsHax.png","language":"TypeScript","readme":"# Tailwindcss Themer \u003c!-- omit in toc --\u003e\n\nAn unopinionated, scalable, [tailwindcss](https://tailwindcss.com/) theming solution\n\n[![current version](https://img.shields.io/npm/v/tailwindcss-themer.svg)](https://www.npmjs.com/package/tailwindcss-themer)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)\n[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow_small.svg)](https:///pr.new/RyanClementsHax/tailwindcss-themer)\n\n## Key Features \u003c!-- omit in toc --\u003e\n\n**🎨 Theme anything**: Anything that extends tailwind's config and can be expressed in css variables is something you can theme with this plugin, even other plugins\n\n**🍨 Unlimited themes**: You can have as many themes as you want! This plugin doesn't care!\n\n**💫 Automatic variants**: Automatically generate variants for all of your themes (i.e. use classes like `my-theme:font-black`) to enable classes only when certain themes active.\n\n**🌑 Trivial dark theme**: Because dark theme is _just another theme_ implementing dark theme is as easy, no special config\n\n**🤖 Automatically handles colors and opacity**: Using [tailwind with css variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables) can get tricky with colors, but this plugin handles all of that for you!\n\n**😅 Easy theme management**: A simple, declarative api that lets you easily create and modify themes\n\n**👋 Familiar api**: The way you declare themes is the exact same way you [extend tailwind](https://tailwindcss.com/docs/theme#extending-the-default-theme) with the exact same features\n\n**💻 Modern**: Powered by css variables under the hood\n\n**🚀 Designed to reduce bundle size**: Instead of duplicating all of your style definitions, the use of css variables lets you declare styles once\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [Examples](#examples)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Add the Plugin](#add-the-plugin)\n  - [Configure your themes](#configure-your-themes)\n  - [Use the classes like normal](#use-the-classes-like-normal)\n  - [Enable your other theme](#enable-your-other-theme)\n  - [Apply variants if you want](#apply-variants-if-you-want)\n- [Config documentation](#config-documentation)\n- [Migration documentation](#migration-documentation)\n- [Enabling your theme](#enabling-your-theme)\n  - [Selectors](#selectors)\n  - [Media query](#media-query)\n  - [Fallback class of theme's name](#fallback-class-of-themes-name)\n  - [SSR](#ssr)\n  - [Simultaneous themes](#simultaneous-themes)\n- [How it works](#how-it-works)\n  - [CSS variable generation](#css-variable-generation)\n    - [defaultTheme](#defaulttheme)\n    - [themes](#themes)\n    - [Variants](#variants)\n  - [Naming](#naming)\n- [Typescript](#typescript)\n- [Common problems](#common-problems)\n  - [The generated css is missing classes and variables](#the-generated-css-is-missing-classes-and-variables)\n  - [This plugin doesn't theme {some config option}](#this-plugin-doesnt-theme-some-config-option)\n- [Want to suggest additional features?](#want-to-suggest-additional-features)\n- [Didn't find what you were looking for?](#didnt-find-what-you-were-looking-for)\n\n## Examples\n\n- Basic - [Source](./examples/basic/README.md)\n- Create React App - [Source](./examples/create-react-app/README.md)\n- Create React App with Typescript - [Source](./examples/create-react-app-typescript/README.md)\n\n## Getting Started\n\n### Installation\n\nInstall `tailwindcss-themer` using [`npm`](https://www.npmjs.com/package/tailwindcss-themer):\n\n```bash\nnpm install --save-dev tailwindcss-themer\n```\n\nor [`yarn`](https://yarnpkg.com/en/package/tailwindcss-themer):\n\n```bash\nyarn add --dev tailwindcss-themer\n```\n\n### Add the Plugin\n\nIn your `tailwind.config.js` file, add `tailwindcss-themer` to the `plugins` array\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-themer')\n    // ...\n  ]\n}\n```\n\n### Configure your themes\n\nPass the plugin a config object representing your theme configuration (see [Config](docs/config.md#config) for details)\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-themer')({\n      defaultTheme: {\n        // put the default values of any config you want themed\n        // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme\n        extend: {\n          // colors is used here for demonstration purposes\n          colors: {\n            primary: 'red'\n          }\n        }\n      },\n      themes: [\n        {\n          // name your theme anything that could be a valid css class name\n          // remember what you named your theme because you will use it as a class to enable the theme\n          name: 'my-theme',\n          // put any overrides your theme has here\n          // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme\n          extend: {\n            colors: {\n              primary: 'blue'\n            }\n          }\n        }\n      ]\n    })\n    // ...\n  ]\n}\n```\n\n### Use the classes like normal\n\n```html\n\u003c!-- this example uses pure html for demonstration purposes --\u003e\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- this has \"color: 'red'\" assigned to it because that's what was specified as the default--\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Enable your other theme\n\nYou do this by adding a class of the theme's name to whatever you want themed. See [Enabling your theme](#enabling-your-theme) for more details.\n\n```html\n\u003c!-- this example uses pure html for demonstration purposes --\u003e\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003c!-- everything within this tag now has the \"my-theme\" config applied to it --\u003e\n  \u003cbody class=\"my-theme\"\u003e\n    \u003c!-- this has \"color: 'blue'\" assigned to it because that's what was specified in the \"my-theme\" config --\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis plugin doesn't care _how_ you apply the class. That's up to you. All this plugin cares about is _that the class is applied_.\n\n\u003e There are lots of other ways to enable the theme. To see all options see [Enabling Your Theme](#enabling-your-theme).\n\n### Apply variants if you want\n\nIf for some reason you need to apply classes only when certain themes are active and you can't express what you want via the normal theming process shown, you can use the automatically generated variants for each of your themes!\n\n```html\n\u003c!-- this class will only activate when the \"my-theme\" class is active --\u003e\n\u003ch1 class=\"my-theme:font-bold\"\u003eHello world!\u003c/h1\u003e\n```\n\nSee [Variants](#variants) for more details.\n\n## Config documentation\n\n- [Config](docs/config.md#config)\n- [Theming Colors](docs/themingColors.md#theming-colors)\n\n## Migration documentation\n\nSee [migrating.md](./docs/migrating.md) for instructions on how to migrate between major versions.\n\n## Enabling your theme\n\nBy default, the config in the `defaultTheme` section of the config will apply (i.e. if no class is applied).\n\nThere are three ways to enable your theme.\n\n1. Configure your theme with selectors\n2. Configure your theme with a media query\n3. If neither selectors nor a media query is given, you can enable your theme by applying a class of the name of the theme you want to enable.\n\n### Selectors\n\nYou can provide a `selectors` array on your theme. The theme will be enabled within any element that matches any of those selectors.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      }\n    }\n  },\n  themes: [\n    {\n      name: 'darkTheme',\n      selectors: ['.dark-mode', '[data-theme=\"dark\"]']\n      extend: {\n        colors: {\n          primary: 'blue'\n        }\n      }\n    }\n  ]\n})\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- The default theme config would apply here --\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"dark-mode\"\u003e\n    \u003c!-- The \"darkTheme\" config would apply here --\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody data-theme=\"dark\"\u003e\n    \u003c!-- The \"darkTheme\" config would apply here --\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Media query\n\nYou can specify a media query within the `mediaQuery` field on the theme. The theme will be enabled when the given media query evaluates to true.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      }\n    }\n  },\n  themes: [\n    {\n      name: 'darkTheme',\n      mediaQuery: '@media (prefers-color-scheme: dark)',\n      extend: {\n        colors: {\n          primary: 'blue'\n        }\n      }\n    }\n  ]\n})\n```\n\nIf both `selectors` and `mediaQuery` is specified at the same time, the `selectors` will take precedence.\n\n### Fallback class of theme's name\n\nIf neither a `selectors` array nor a `mediaQuery` given, a default `selectors` array will be added with one value as a class selector of the theme's name.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      }\n    }\n  },\n  themes: [\n    {\n      name: 'darkTheme',\n      // selectors: ['.darkTheme'] // this is implicit given no selectors or mediaQuery given\n      extend: {\n        colors: {\n          primary: 'blue'\n        }\n      }\n    }\n  ]\n})\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- The default theme config would apply here --\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"darkTheme\"\u003e\n    \u003c!-- The \"darkTheme\" config would apply here --\u003e\n    \u003ch1 class=\"text-primary\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you don't want this fallback to be generated, set `selectors` to an empty array `[]`.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      }\n    }\n  },\n  themes: [\n    {\n      name: 'darkTheme',\n      selectors: [] // turns off fallback selector\n      extend: {\n        colors: {\n          primary: 'blue'\n        }\n      }\n    }\n  ]\n})\n```\n\n### SSR\n\nIn order to prevent a [flash of unstyled content](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/), you need to make sure that the class is applied before the first paint. [Josh Comeau writes a great article about this](https://www.joshwcomeau.com/react/dark-mode/).\n\n### Simultaneous themes\n\nBecause this plugin enables themes in part based on existance of classes, it is possible to have multiple themes enabled at the same time. They can be overlapping or not. Its all up to how you apply the classes!\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"theme1\"\u003e\n      \u003c!-- everything in this div will have theme1 styles --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"theme2\"\u003e\n      \u003c!-- everything in this div will have theme2 styles --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"theme1 theme2\"\u003e\n      \u003c!-- everything in this div will have both styles applied --\u003e\n      \u003c!-- which one has higher specificity is determined by the order of the themes in the \"themes\" section of the config --\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you apply two themes at the same time, the specificity is determined by the order of the themes in the `themes` array of the config. Later defined themes override earlier configs i.e. theme in index 1 takes precedence over theme in index 0.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      },\n      fontFamily: {\n        title: 'Helvetica'\n      }\n    }\n  },\n  themes: [\n    {\n      name: 'theme1',\n      extend: {\n        // ...\n      }\n    },\n    {\n      // this theme will win out over theme1 if an element has both theme1 and theme2 clases on it because it is defined later in the \"themes\" array\n      name: 'theme2',\n      extend: {\n        // ...\n      }\n    }\n  ]\n})\n```\n\n## How it works\n\nThis plugin works by first creating a custom tailwind extension configured to replace any values you specify with css variables. Then it generates css variables with proper scoping for all of your themes. It also creates variants for each one of your themes as a bonus.\n\nIn short it automates [everything you would need to do to do this yourself](https://www.youtube.com/watch?v=MAtaT8BZEAo) plus adds theme variants for you.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      },\n      fontFamily: {\n        title: 'Helvetica'\n      }\n    }\n  },\n  themes: [\n    {\n      name: 'my-theme',\n      extend: {\n        colors: {\n          primary: 'blue'\n        },\n        fontFamily: {\n          title: 'ui-monospace'\n        }\n      }\n    }\n  ]\n})\n```\n\nFor example, the above configuration creates a theme extension equivalent to the following hand written version.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: 'rgb(255 0 0 / \u003calpha-value\u003e)'\n      },\n      fontFamily: {\n        title: 'var(--font-family-title)'\n      }\n    }\n  }\n}\n```\n\nIt also injects css variables with proper scoping into tailwind's [base layer](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer).\n\n```css\n/* this is configured by \"defaultTheme\" */\n:root {\n  --colors-primary: 255 0 0;\n  --font-family-title: Helvetica;\n}\n\n/* this is configured by the \"my-theme\" configuration */\n.my-theme {\n  --colors-primary: 0 0 255;\n  --font-family-title: ui-monospace;\n}\n```\n\n\u003e Notice how the css variable for the color we specified is broken up into rgb values. We need to do this to support opacity modifiers. See [Opacity](docs/themingColors.md#opacity) for more details.\n\nNow, classes like `text-primary` and `font-title` are generated like the following:\n\n```css\n.font-title {\n  font-family: var(--font-family-title);\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-primary), var(--tw-text-opacity));\n}\n```\n\nFor comparison, this is what those classes looked like before without theming:\n\n```css\n.font-title {\n  font-family: Helvetica;\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(255 0 0 / var(--tw-text-opacity));\n}\n```\n\nThis plugin adds variants for each one of your themes, should you need them when applying classes.\n\nTaking, again, the above configuration as an example, the `my-theme` variant is generated for `my-theme`. So now you can use classes like `my-theme:font-title` which will enable the classes only when the theme is enabled. The generated css for this example is the following:\n\n```css\n.my-theme .my-theme\\:font-title,\n.my-theme.my-theme\\:font-title {\n  font-family: var(--font-family-title);\n}\n```\n\n### CSS variable generation\n\nAll css variables are injected in tailwind's [base layer](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer).\n\n#### defaultTheme\n\nAll of the configuration in the `defaultTheme` config generates css variables scoped to `:root`.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        primary: 'red'\n      },\n      fontFamily: {\n        title: 'Helvetica'\n      }\n    }\n  }\n  // ...\n})\n```\n\nFor example the above `defaultTheme` config generates the following css variables in the `:root` scope.\n\n```css\n/* this is configured by \"defaultTheme\" */\n:root {\n  --colors-primary: 255 0 0;\n  --font-family-title: Helvetica;\n}\n```\n\n#### themes\n\nFor each theme specified in the `themes` section of the config, its config generates css variables scoped to a class of the `name` field.\n\n```js\nrequire('tailwindcss-themer')({\n  // ...\n  themes: [\n    {\n      name: 'my-theme-1',\n      extend: {\n        colors: {\n          primary: 'red'\n        },\n        fontFamily: {\n          title: 'Helvetica'\n        }\n      }\n    },\n    {\n      name: 'my-theme-2',\n      extend: {\n        colors: {\n          primary: 'blue'\n        },\n        fontFamily: {\n          title: 'ui-monospace'\n        }\n      }\n    }\n  ]\n})\n```\n\nFor example, the above config in the `themes` section of the config generates the following css:\n\n```css\n.my-theme-1 {\n  --colors-primary: 255 0 0;\n  --font-family-title: Helvetica;\n}\n\n.my-theme-2 {\n  --colors-primary: 0 0 255;\n  --font-family-title: ui-monospace;\n}\n```\n\n#### Variants\n\nAs specified above, variants are generated for every named theme you make, even for the default theme. This is so you can use them as class modifiers to enable certain styles only when that theme is enabled. It works like [hover and focus variants](https://tailwindcss.com/docs/font-family#hover-focus-and-other-states), but activated with the theme. This lets you write classes like `my-theme:rounded-sm` if you need fine grained control to apply some styles when a theme is activated and you can't cleanly express what you want with css variables alone.\n\n\u003e Do note that because tailwind automatically adds the `dark` variant, if you name one of your themes `dark`, the variant this plugin creates for it will conflict with what tailwind automatically creates for you. It is recommended that you name your dark theme something else like `darkTheme` to avoid the conflict. Not all config options work for themes named `dark`.\n\u003e \\\n\u003e \\\n\u003e See [Themes named dark](docs/config.md#themes-named-dark) for additional details.\n\nThe theme variant generated for the default theme is `defaultTheme` (e.g. `defaultTheme:rounded-sm`), but this now requires that instead of omitting any theme class to enable the default theme, you explicitly declare you are using the default theme by adding the class of `defaultTheme` to the place you want themed (no other feature is affected by this, using the default theme variant is the only feature that requires you to add the `defaultTheme` class to use). This is because I haven't been able to create a css selector that excludes all parents with any of the other theme classes. If you can make one, feel free to [open up an issue](https://github.com/RyanClementsHax/tailwindcss-themer/issues).\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- this won't work because it doesn't have a parent with the \"defaultTheme\" class --\u003e\n    \u003c!-- I would love to make this work, but I haven't come up with a css selector that would work --\u003e\n    \u003ch1 class=\"defaultTheme:font-bold\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"defaultTheme\"\u003e\n    \u003c!-- this now works --\u003e\n    \u003ch1 class=\"defaultTheme:font-bold\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"neon\"\u003e\n    \u003c!-- this is turned off because it doesnt have a parent with a class of \"defaultTheme\" --\u003e\n    \u003ch1 class=\"defaultTheme:font-bold\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you've opted to use a prefix in your Tailwind CSS setup, it's essential to include `\u003cprefix\u003e\u003ctheme name\u003e` alongside the theme class. This ensures proper application of variants. For instance, if your prefix is `tw-` and your theme name is `dark-theme`, you'd use `dark-theme tw-dark-theme` together.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"dark-theme tw-dark-theme\"\u003e\n    \u003c!-- Properly utilize prefixes and themes --\u003e\n    \u003ch1 class=\"dark-theme:font-bold\"\u003eHello world!\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n### Naming\n\nAs you probably could tell from above, the names of the generated css variables are the [kebab-cased](https://www.theserverside.com/definition/Kebab-case) version of the variable's path on the config object.\n\nNaming works the same for all theme configs (default theme and named themes).\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        myBrand: {\n          primary: {\n            500: 'red'\n          }\n        }\n      }\n    }\n  }\n  // ...\n})\n```\n\nThe above config would generate a css variable of the name `--colors-myBrand-primary-500`. If for some reason, [camelCasing](https://en.wikipedia.org/wiki/Camel_case) is converted to [kebab-casing](https://www.theserverside.com/definition/Kebab-case), make sure you have tailwind `v3.0.12` or later installed as that version fixed that bug.\n\nIf you use `DEFAULT` as a leaf value, it is dropped off of the generated css variable name.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      colors: {\n        brand1: {\n          DEFAULT: {\n            primary: {\n              DEFAULT: 'red'\n            }\n          }\n        }\n      }\n    }\n  }\n  // ...\n})\n```\n\nThe above config would generate a css variable of the name `--colors-brand1-DEFAULT-primary`. See [Default key](docs/config.md#default-key) for more details.\n\nIf anywhere in the path, an array is encountered, the index is used in the generated css variable name.\n\n```js\nrequire('tailwindcss-themer')({\n  defaultTheme: {\n    extend: {\n      fontFamily: {\n        title: ['ui-sans-serif', 'system-ui']\n      }\n    }\n  }\n  // ...\n})\n```\n\nThe example above creates the following css variables:\n\n```css\n:root {\n  --font-family-title-0: ui-sans-serif;\n  --font-family-title-1: system-ui;\n}\n```\n\n## Typescript\n\nThis plugin comes with types. In order to take advantage of them, make sure the files that use this plugin are type checked. For most use cases, this means making sure your `tailwind.config.js` file is type checked. The easiest way to do this is by adding `//@ts-check` at the top of the file. See the [typescript example](examples/create-react-app-typescript/README.md) for a reference implementation. You can also write your config as a `tailwind.config.ts` file to achieve type checking.\n\n## Common problems\n\n### The generated css is missing classes and variables\n\nThose styles are probably getting purged which happens by default in tailwindcss. Read the [tailwind docs on how to control what gets purged and what doesn't](https://tailwindcss.com/docs/content-configuration) for details on how this works.\n\nIf you're expecting the `defaultTheme` to automatically contain tailwind defaults implicitly, read the section on [Overwriting tailwind defaults](docs/config.md#overwriting-tailwind-defaults) for how to do this properly.\n\n### This plugin doesn't theme {some config option}\n\nThis plugin can only theme config values that can be expressed as CSS variables. It can't theme config that tunes how tailwind or other plugins generate their css. Check the kind of value you're trying to theme in order to resolve your issue.\n\nFor example, this plugin can't theme tailwind's [theme.container.center](https://tailwindcss.com/docs/container#centering-by-default) config value. This is because it configures how tailwind configures its `.container` class, not a particular style within that class.\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    container: {\n      center: true // 👈🏼 this is the value I'm talking about\n    }\n  }\n}\n```\n\n```css\n/* when false or undefined */\n.container {\n  width: 100%;\n}\n\n/* when true */\n.container {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n}\n```\n\nInstead, the kinds of values this plugin can configure are values like [theme.contaner.padding](https://tailwindcss.com/docs/container#adding-horizontal-padding) because their values that can be expressed as CSS variables and aren't used to configure how tailwind or another plugin generates CSS.\n\n## Want to suggest additional features?\n\nFeel free to [start a discussion](https://github.com/RyanClementsHax/tailwindcss-themer/discussions).\n\n## Didn't find what you were looking for?\n\nWas this documentation insufficient for you?\n\nWas it confusing?\n\nWas it ... dare I say ... inaccurate?\n\nIf any of the above describes your feelings of this documentation. Feel free to [open up an issue](https://github.com/RyanClementsHax/tailwindcss-themer/issues).\n","funding_links":["https://github.com/sponsors/ryanclementshax"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanclementshax%2Ftailwindcss-themer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanclementshax%2Ftailwindcss-themer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanclementshax%2Ftailwindcss-themer/lists"}