{"id":13449778,"url":"https://github.com/estevanmaito/tailwindcss-multi-theme","last_synced_at":"2025-05-16T14:03:07.270Z","repository":{"id":37993837,"uuid":"268616076","full_name":"estevanmaito/tailwindcss-multi-theme","owner":"estevanmaito","description":"🎨 The easiest way to create themes with Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2023-04-13T14:13:42.000Z","size":4563,"stargazers_count":533,"open_issues_count":80,"forks_count":44,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T10:58:02.272Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tailwindcss-multi-theme.now.sh/","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/estevanmaito.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-06-01T19:42:11.000Z","updated_at":"2025-04-07T04:54:43.000Z","dependencies_parsed_at":"2023-02-06T08:31:52.030Z","dependency_job_id":"31d808fc-e9f8-4e47-bc28-143f8c2e54d0","html_url":"https://github.com/estevanmaito/tailwindcss-multi-theme","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":"0.16666666666666663","last_synced_commit":"9b1bec119171a0f6a1a9bd3c71d13af47f42f570"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estevanmaito%2Ftailwindcss-multi-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estevanmaito%2Ftailwindcss-multi-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estevanmaito%2Ftailwindcss-multi-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estevanmaito%2Ftailwindcss-multi-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/estevanmaito","download_url":"https://codeload.github.com/estevanmaito/tailwindcss-multi-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544142,"owners_count":22088807,"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":[],"created_at":"2024-07-31T06:00:55.874Z","updated_at":"2025-05-16T14:03:07.214Z","avatar_url":"https://github.com/estevanmaito.png","language":"JavaScript","readme":"# Tailwind CSS Multi Theme\n\n\u003cp\u003e\n  \u003ca href=\"https://codecov.io/gh/estevanmaito/tailwindcss-multi-theme\"\u003e\u003cimg src=\"https://codecov.io/gh/estevanmaito/tailwindcss-multi-theme/branch/master/graph/badge.svg\" alt=\"codecov\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/github/estevanmaito/tailwindcss-multi-theme\"\u003e\u003cimg src=\"https://img.shields.io/travis/estevanmaito/tailwindcss-multi-theme\" alt=\"Travis (.org)\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tailwindcss-multi-theme\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/tailwindcss-multi-theme\" alt=\"npm\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/estevanmaito/tailwindcss-multi-theme/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/estevanmaito/tailwindcss-multi-theme\" alt=\"MIT License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nMost theme plugins ask too much from the start. If you know how to create a simple page with default Tailwind, you already know how to use this theme plugin.\n\n[🧪 See it live](https://tailwindcss-multi-theme.now.sh/)\n\n[🧱 See examples](/examples)\n\n## 💿 Install\n\n```sh\nnpm install tailwindcss-multi-theme\n```\n\nIn `tailwind.config.js` add `themeVariants` to the `theme` property, with the value(s) of your theme(s), and require the plugin. That's it.\n\n```js\nmodule.exports = {\n  theme: {\n    themeVariants: ['dark']\n  },\n  variants: {\n    // just add dark to any variant that you want to style\n  },\n  plugins: [require('tailwindcss-multi-theme')],\n}\n```\n\nIt will create a set of classes based on your `variants` and expect a class `.theme-\u003cthe name of your themeVariants\u003e` at the top of your HTML document.\n\n`themeVariants: ['dark']` would activate its classes under `.theme-dark`.\n\n## 🚀 Usage\n\n👉 `themeVariants` is the only configuration option.\n\nIt expects an array of strings, so there is **no limit** to how many themes you can create. Want a dark and a neon theme (you don't need to specify your default)? Do this:\n\n```js\nmodule.exports = {\n  theme: {\n    themeVariants: ['dark', 'neon']\n  },\n  variants: {\n    // just add dark and neon to any variant that you want to style\n  },\n  plugins: [require('tailwindcss-multi-theme')],\n}\n```\n\nYou can now place the class `.theme-dark` or `.theme-neon` at the top of your HTML (eg. on `body` or an enclosing `div`) and just write classes like:\n\n`dark:bg-gray-900 dark:text-gray-300`\n\nBut just this won't work. You need to specify what variants of your theme you want, in your `variants`:\n\n```js\n...\nvariants: {\n  backgroundColor: ['responsive', 'hover', 'focus', 'dark'],\n  textColor: ['responsive', 'hover', 'focus', 'dark'],\n},\n...\n```\n\nWhat if you need to style the `hover`, `focus` or any other variant on some specific theme?\n\n```js\n...\nvariants: {\n  backgroundColor: ['responsive', 'hover', 'focus', 'dark', 'dark:hover', 'dark:focus'],\n  textColor: ['responsive', 'hover', 'focus', 'dark', 'dark:hover', 'dark:focus'],\n},\n...\n```\n\nThe same way you would write it in HTML (`dark:hover:bg-red-100`) you write in your `variants` settings, just by adding a `:` before the variant.\n\nSo, if you're already using `focus-within`, it would be called `dark:focus-within`, considering your theme is called `dark`.\n\n### Using inside CSS with `@apply`\n\n**UPDATE**: Tailwind CSS ^1.7.0 ([Use `@apply` with variants and other complex classes](https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.7.0#use-apply-with-variants-and-other-complex-classes)) now supports this syntax:\n\n```css\n.btn {\n  @apply border-4 border-gray-300 dark:border-dark-gray-600;\n}\n```\n\nAnother way, (and the only way for Tailwind CSS prior to v1.7.0), is the following.\n\nIf you're more into writing some CSS using `@apply`, you could try the code below. Note that it needs nesting support, and you can find more about it [in the official docs](https://tailwindcss.com/docs/using-with-preprocessors/#nesting).\n\n```css\ninput {\n  @apply bg-gray-300;\n}\n\ninput:focus {\n  @apply bg-white;\n}\n\n/**\n * Place your theme styles inside .theme-\u003cyour-theme\u003e\n * In this case, we have themeVariants: ['dark']\n */\n.theme-dark {\n  input {\n    @apply bg-gray-800;\n  }\n\n  input:focus {\n    @apply bg-gray-500;\n  }\n}\n```\n\nIf you want to avoid nesting for some reason, this syntax is also perfectly valid:\n\n```css\n.theme-dark input {\n  @apply bg-gray-800;\n}\n\n.theme-dark input:focus {\n  @apply bg-gray-500;\n}\n```\n\n### How to automatically apply the theme based on user's preferences?\n\na.k.a `prefers-color-scheme`\n\nYou should use [prefers-dark.js](./prefers-dark.js) to detect if it is supported. If so, the theme will be applied automatically. Place it in the top of the `head` of your HTML (execute early to reduce the flash of light theme).\n\n[By the way, you can check one of the examples](/examples)\n\nIf you're looking for a CSS only approach, you could give [tailwindcss-theming](https://github.com/innocenzi/tailwindcss-theming) a try.\n\n## ❓ Why another theme plugin?\n\nI'll tell you the truth. I'm lazy. I created this plugin for people that, like me, just want to keep writing Tailwind CSS as always, with the same familiar syntax, no theme files, no extensive obligatory docs read to know how to color my backgrounds.\n\nIt just prepends your theme variable to the good old Tailwind classes.","funding_links":[],"categories":["Plugins","JavaScript","Running the update"],"sub_categories":["By Popularity"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Festevanmaito%2Ftailwindcss-multi-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Festevanmaito%2Ftailwindcss-multi-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Festevanmaito%2Ftailwindcss-multi-theme/lists"}