{"id":13480268,"url":"https://github.com/mertasan/tailwindcss-variables","last_synced_at":"2025-05-16T18:06:25.243Z","repository":{"id":40318361,"uuid":"354507581","full_name":"mertasan/tailwindcss-variables","owner":"mertasan","description":"Easily create css variables without the need for a css file!","archived":false,"fork":false,"pushed_at":"2024-10-10T20:07:26.000Z","size":681,"stargazers_count":233,"open_issues_count":15,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T09:09:32.856Z","etag":null,"topics":["css-variables","dark-mode","multi-theme","tailwind","tailwindcss","tailwindcss-variables"],"latest_commit_sha":null,"homepage":"","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/mertasan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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},"funding":{"github":"mertasan"}},"created_at":"2021-04-04T09:48:18.000Z","updated_at":"2025-01-31T00:40:20.000Z","dependencies_parsed_at":"2024-11-11T08:37:55.905Z","dependency_job_id":"3ef69977-135f-424f-bdb4-0691085fde55","html_url":"https://github.com/mertasan/tailwindcss-variables","commit_stats":{"total_commits":253,"total_committers":8,"mean_commits":31.625,"dds":0.4545454545454546,"last_synced_commit":"0743d8bb1a282afde538c82afe17b975efad1a46"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mertasan%2Ftailwindcss-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mertasan%2Ftailwindcss-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mertasan%2Ftailwindcss-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mertasan%2Ftailwindcss-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mertasan","download_url":"https://codeload.github.com/mertasan/tailwindcss-variables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852181,"owners_count":21171842,"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","dark-mode","multi-theme","tailwind","tailwindcss","tailwindcss-variables"],"created_at":"2024-07-31T17:00:36.532Z","updated_at":"2025-04-14T09:10:20.066Z","avatar_url":"https://github.com/mertasan.png","language":"JavaScript","readme":"\u003cp\u003e\n    \u003ca href=\"https://github.com/mertasan/tailwindcss-variables/actions\"\u003e\u003cimg src=\"https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master\u0026label=tests\" alt=\"Test Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/mertasan/tailwindcss-variables/tree/master/examples\"\u003e\u003cimg src=\"https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master\u0026label=examples\" alt=\"Build Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@mertasan/tailwindcss-variables\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/@mertasan/tailwindcss-variables\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@mertasan/tailwindcss-variables\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/%40mertasan%2Ftailwindcss-variables\" alt=\"Weekly Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/mertasan/tailwindcss-variables/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mertasan/tailwindcss-variables.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/mertasan/tailwindcss-variables/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-green.svg?label=license\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Tailwind CSS Variables\n\nThis package provides an easy way to define CSS variables for your Tailwind CSS project. You can use this package to create custom variables within your Tailwind configuration. This makes it easier to maintain consistency across your CSS, reduces repetition, allows you to configure variables based on various conditions, and eliminates the need to work directly with your CSS files to determine variables.\n\nSimilar to the tailwindcss configurations you are used to. It is also possible to define a different group of variables for Dark Mode. Alternatively, it has an API that you can use for your own plugins.\n\n## Highlights\n\n- Variables are as easy as defining tailwindcss colors...\n- You can designate the variables to `:root`, `:host` or custom CSS selectors.\n- Variables can be formed through using nested object notation.\n- Different variables can be composed for the Dark Mode.\n- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.\n- Dark Mode custom selector is inherited from [Tailwind configuration](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name)\n- It allows you to add custom themes while creating your own plugin via the plugin API.\n- Prefix can be defined for variables. (It is useful when using the plugin API)\n- You can configure your own needs such as multi-themes without needing an additional plugin!\n\n\n## Documentation\n\n| Language | Documentation link|\n| --- | --- |\n| English | Documentation |\n| Turkish | [**Dökümantasyon**](./README.tr.md) |\n\n## Version Compatibility\n| Tailwind CSS | Package |\n|--------------|----------------|\n| 2.x          | 1.x            |\n| 3.x          | 2.x            |\n\n## Installation\n\n```cli\nnpm install -D @mertasan/tailwindcss-variables\n```\n\n## Playground\nSimple example: https://play.tailwindcss.com/hCpcvnGsPx?file=config\n\n## Usage\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    colors: {\n        red: {\n            50: 'var(--colors-red-50)'\n        }\n    },\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          button: {\n            size: '2rem'\n          }\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --sizes-button-size: 2rem;\n  --colors-red-50: #ff3232\n}\n\n.container {\n  --sizes-medium: 1.5rem\n}\n```\n\n## Dark Mode\n\n### with the `class` mode\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: 'class',\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --colors-red-50: red\n}\n\n.container {\n  --colors-red-50: indigo\n}\n\n:root.dark {\n  --colors-red-50: blue\n}\n\n:root.dark .container {\n  --colors-red-50: green\n}\n```\n\n#### Custom dark selector\n\nNote that the plugin will use your custom selector if [enabled in your Tailwind configuration](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name).\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: ['class', '.custom-dark-selector'],\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-red-50: red\n}\n\n:root.custom-dark-selector {\n  --colors-red-50: blue\n}\n```\n\n#### with the `darkToRoot` configuration\n\nIf the `darkMode` configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` setting.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: ['class', '.custom-dark-selector'],\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      darkToRoot: false,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n    --sizes-small: 1rem;\n    --colors-red-50: red\n}\n\n.container {\n    --colors-red-50: indigo\n}\n\n.custom-dark-selector {\n    --colors-red-50: blue\n}\n\n.custom-dark-selector .container {\n    --colors-red-50: green\n}\n```\n\n### with the `media` mode\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: 'media',\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --colors-red-50: red\n}\n\n.container {\n    --colors-red-50: indigo\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --colors-red-50: blue\n  }\n\n  .container {\n    --colors-red-50: green\n  }\n}\n```\n\n## Prefix\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          button: {\n            size: '2rem'\n          }\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      variablePrefix: 'admin'\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --admin-sizes-small: 1rem;\n  --admin-sizes-button-size: 2rem;\n  --admin-colors-red-50: #ff3232\n}\n\n.container {\n    --admin-sizes-medium: 1.5rem\n}\n```\n\n## Nested object notation\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          DEFAULT: '1px',\n          small: '1rem',\n          admin: {\n            DEFAULT: '2px',\n            buttons: {\n              colors: {\n                red: {\n                  DEFAULT: '#ffffff',\n                  500: '#ff0000',\n                  600: '#e60000',\n                }\n              }\n            }\n          }\n        },\n      }\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n```css\n:root {\n  --sizes: 1px;\n  --sizes-small: 1rem;\n  --sizes-admin: 2px;\n  --sizes-admin-buttons-colors-red-500: #ff0000;\n  --sizes-admin-buttons-colors-red-600: #e60000;\n  --sizes-admin-buttons-colors-red: #ffffff\n}\n```\n\n\n## Rules for keys of variables\n\nVariable keys can only include designated characters. Other characters will be automatically removed. Because using underscores (_) on objects is allowed, underscores will be transformed into middle dashes (-).\n\n\nRule:\n````jsregexp\n/[^a-zA-Z0-9-.]+/gi\n````\n\n| Before                               | After                             |\n|--------------------------------------|-----------------------------------|\n| hello[$\u0026+,:;=?@#'\u003c\u003e-^*()%!]WORLD     | hello-WORLD                     \t |\n| hello__world                       \t | hello-world   \t                   |\n| css_variables_for-tailwindcss   \t    | css-variables-for-tailwindcss   \t |\n| foo-bar-1.0   \t                      | foo-bar-1\\\\.0   \t                 |\n\nHere's an example:\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          'hello[$\u0026+,:;=?@#|\\'\u003c\u003e-^*()%!]WORLD': '100%',\n          underscore_to_dash: '100%',\n          'underscore_to_dash-with-dash': '100%',\n          auto_dash: '100%',\n        },\n        sizes: {\n          1.5: '1rem',\n          xl: {\n            '3.0': '2rem',\n          },\n        },\n      },\n      '[type=\\'button\\']': {\n        'hello[$\u0026+,:;=?@#|\\'\u003c\u003e-^*()%!]WORLD': '100%',\n        underscore_to_dash: '100%',\n        'underscore_to_dash-with-dash': '100%',\n        auto_dash: '100%',\n        nested_auto_dash: {\n          color_primary: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-hello-WORLD: 100%;\n  --colors-underscore-to-dash: 100%;\n  --colors-underscore-to-dash-with-dash: 100%;\n  --colors-auto-dash: 100%;\n  --sizes-1\\.5: 1rem;\n  --sizes-xl-3\\.0: 2rem\n}\n\n[type='button'] {\n  --hello-WORLD: 100%;\n  --underscore-to-dash: 100%;\n  --underscore-to-dash-with-dash: 100%;\n  --auto-dash: 100%;\n  --nested-auto-dash-color-primary: 100%\n}\n```\n\n## Helpers\n\n### `colorVariable()`\n\nYou can use the `colorVariable` helper to add `text-opacity` or `bg-opacity` to the variables for which colors are defined.\n\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      primary: colorVariable('--colors-primary'), // HEX (3 digits)\n      secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)\n      white: '#ffffff', // no variable\n      blue: colorVariable('var(--colors-blue)'), // RGB\n      red: {\n        400: colorVariable('var(--colors-red-400)'), // RGBA\n        500: colorVariable('var(--colors-red-500)'), // RGBA\n        600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)\n      },\n      gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)\n      green: 'var(--colors-green)', // RGB (without using colorVariable() helper)\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          primary: '#ff0',\n          secondary: '#000000',\n          gray: '#6B7280',\n          blue: 'rgb(0,0,254)',\n          red: {\n            400: 'rgba(254,0,0,0.5)',\n            500: 'rgba(254,0,0,1)',\n          },\n          green: 'rgb(0,255,0)',\n        },\n        sizes: {\n          small: '10px',\n          medium: '2rem',\n          large: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true\n    })\n  ]\n}\n```\n\n**Purge:**\n\n```html\n\u003cdiv class=\"text-opacity-50 text-primary\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-opacity-50 bg-secondary\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-opacity-50 bg-gray\"\u003e\u003c/div\u003e\n\u003cdiv class=\"text-opacity-50 text-blue\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-red-400\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-red-500\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-red-600\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-opacity-50 bg-green\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-white bg-opacity-50\"\u003e\u003c/div\u003e\n```\n**Output:**\n\n```css\n:root {\n  --colors-primary: #ff0;\n  --colors-secondary: #000000;\n  --colors-gray: #6B7280;\n  --colors-blue: rgb(0,0,254);\n  --colors-red-400: rgba(254,0,0,0.5);\n  --colors-red-500: rgba(254,0,0,1);\n  --colors-red-400-rgb: 254,0,0;\n  --colors-red-500-rgb: 254,0,0;\n  --colors-green: rgb(0,255,0);\n  --colors-primary-rgb: 255,255,0;\n  --colors-secondary-rgb: 0,0,0;\n  --colors-gray-rgb: 107,114,128;\n  --colors-blue-rgb: 0,0,254;\n  --colors-green-rgb: 0,255,0;\n  --sizes-small: 10px;\n  --sizes-medium: 2rem;\n  --sizes-large: 100%\n}\n\n.text-primary {\n --tw-text-opacity: 1;\n color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))\n}\n\n.text-blue {\n --tw-text-opacity: 1;\n color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n --tw-text-opacity: 0.5\n}\n\n.bg-secondary {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity))\n}\n\n.bg-red-400 {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))\n}\n\n.bg-red-600 {\n  background-color: var(--colors-red-500)\n}\n\n.bg-gray {\n background-color: var(--colors-gray)\n}\n\n.bg-green {\n background-color: var(--colors-green)\n}\n\n.bg-opacity-50 {\n --tw-bg-opacity: 0.5\n}\n```\n\n\n\n### forceRGB\n\nIf `forceRGB` is set to `true`, no additional variables are created.\n\n#### Before\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      green: colorVariable('var(--colors-green)'),\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-green: #11ff00;\n  --colors-green-rgb: 17,255,0\n}\n\n.text-green {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))\n}\n```\n\n#### After\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      green: colorVariable('var(--colors-green)', true),\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n      forceRGB: true,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-green: 17,255,0;\n}\n\n.text-green {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-green), var(--tw-text-opacity))\n}\n```\n\n### useHost\n\nIf `useHost` is set to `true`, `:host` is used instead of `:root` for variables injection.\n\n#### Config\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      useHost: true,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:host {\n  --colors-green: #11ff00;\n}\n```\n\n### extendColors for colorVariable\n\nInstead of using each of the colors between the variables as `colorVariable('var(--colors-red)')`,\nYou can define colors in the `extendColors` option.\n\n**Example:**\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      white: '#fff',\n      green: 'var(--colors-green)',\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          blue: '#0065ff',\n          red: '#ff0000',\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n      extendColors: {\n        blue: 'var(--colors-blue)',\n        red: 'var(--colors-red)',\n      }\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-blue: #0065ff;\n  --colors-red: #ff0000;\n  --colors-green: #11ff00;\n  --colors-blue-rgb: 0,101,255;\n  --colors-red-rgb: 255,0,0;\n  --colors-green-rgb: 17,255,0\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-green {\n  color: var(--colors-green)\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n```\n\n\n**Example 2 - Using with [forceRGB](#forcergb):**\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      white: '#fff',\n      green: 'var(--colors-green)',\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          blue: '#0065ff',\n          red: '#ff0000',\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n      forceRGB: true,\n      extendColors: {\n        blue: 'var(--colors-blue)',\n        red: 'var(--colors-red)',\n      }\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-blue: 0,101,255;\n  --colors-red: 255,0,0;\n  --colors-green: 17,255,0\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-green {\n  color: var(--colors-green)\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue), var(--tw-text-opacity))\n}\n\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-red), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n```\n\n### toBase\n\nBy default, variables are added to `@tailwind base;` styles.\nIf you don't include `@tailwind base;` styles in your `css`, set the `toBase` option to `false`. In this case, the variables will be added to the `@tailwind components;` styles.\n\n```js\n//...\nplugins: [\n  require('@mertasan/tailwindcss-variables')({\n    toBase: false, // default: true\n  })\n]\n//...\n```\n\n- [tailwindcss.com - Functions and directives](https://tailwindcss.com/docs/functions-and-directives#tailwind)\n\n## API example for your own plugins\n\n- [Detailed Explanation](#gerçek-kullanım-örneği-detaylı)\n\n```javascript\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\n\nlet variableOptions = {\n  variablePrefix: 'myplugin'\n}\n\nconst pluginVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'black',\n      secondary: 'white',\n      warning: 'orange',\n    },\n  },\n}\n\nconst pluginDarkVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'red',\n      secondary: 'yellow',\n      warning: 'green',\n    },\n  },\n}\n\nmodule.exports = {\n  plugins: [\n    plugin(function({ addComponents, config }) {\n\n      addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --myplugin-colors-primary: black;\n  --myplugin-colors-secondary: white;\n  --myplugin-colors-warning: orange\n}\n\n:root.dark {\n  --myplugin-colors-primary: red;\n  --myplugin-colors-secondary: yellow;\n  --myplugin-colors-warning: green\n}\n```\n\n### API component helper\n\nYou can also use tailwindcss-variables plugin API to register your components.\n\n```javascript\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\n\nlet variableOptions = {\n  variablePrefix: 'myplugin'\n}\n\nconst pluginVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'black',\n      secondary: 'white',\n      warning: 'orange',\n    },\n  },\n}\n\nconst pluginDarkVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'red',\n      secondary: 'yellow',\n      warning: 'green',\n    },\n  },\n}\n\nmodule.exports = {\n  plugins: [\n    plugin(function({ addComponents, config }) {\n      const formComponents = {\n        select: {\n          DEFAULT: {\n            backgroundColor: 'var(--myplugin-colors-primary)',\n          },\n          multi: {\n            '\u0026.default-multi': {\n              backgroundColor: 'var(--myplugin-colors-secondary)',\n            },\n            '\u0026.other-multi': {\n              backgroundColor: 'var(--myplugin-colors-warning)',\n            },\n          },\n        },\n      }\n\n      addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', formComponents))\n    })\n  ]\n}\n```\n\n**Output:**\n```css\n:root {\n  --myplugin-colors-primary: black;\n  --myplugin-colors-secondary: white;\n  --myplugin-colors-warning: orange;\n}\n\n:root.dark {\n  --myplugin-colors-primary: red;\n  --myplugin-colors-secondary: yellow;\n  --myplugin-colors-warning: green;\n}\n\n.form-select {\n    background-color: var(--myplugin-colors-primary);\n}\n\n.form-select.default-multi {\n    background-color: var(--myplugin-colors-secondary);\n}\n\n.form-select.other-multi {\n    background-color: var(--myplugin-colors-warning);\n}\n```\n\n## Detailed example of the API\n\n**What are the advantages?**\n\nImagine you are creating a form builder (PHP) package for Laravel. In this case, I am sure there will be a lot of styles to customize. Nonetheless, one of the most necessary things is the colors! You'll develop the components with the colors you pick out. Of course these colors can be customized with the `vendor:publish` command but you can make it simpler for everyone. Users can customize the colors for their own likings and if they wish they can also configure your plugin for the dark mode as well. This way, users don't have to alter the `.css` or `.blade.php` files for some small and simple customizations. Thus, they can use your package with up to date components and can adapt to future version updates. If you have read this statement, it means that now you know why this plugin came about. :)\n\n\n\n**What are the disadvantages?**\n\nIf you have any ideas, please don't refrain to send a PR.\n\n**Resources on this example:**\n\n- [Source](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)\n- [test](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__/readme.test.js)\n\n**Your own plugin themes:**\n```javascript\n// myplugin/themes.js\nmodule.exports = (theme) =\u003e ({\n  themes: {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'orange',\n      },\n    }\n  }\n})\n```\n\n**Your own plugin components:**\n```javascript\n// myplugin/components.js\nmodule.exports = (theme) =\u003e ({\n  select: {\n    DEFAULT: {\n      backgroundColor: 'var(--forms-colors-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--forms-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--forms-colors-warning)',\n      },\n    },\n  },\n})\n```\n\n**Your own plugin source:**\n```javascript\n// myplugin/index.js\nconst plugin = require('tailwindcss/plugin')\nconst _ = require('lodash')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\nconst pluginComponents = require('./components')\nconst pluginThemes = require('./themes')\n\nmodule.exports = plugin.withOptions(\n  function (options) {\n    return function ({addComponents, theme, config}) {\n\n      let variableOptions = {\n        variablePrefix: theme('myPlugin.prefix', 'forms')\n      };\n\n      addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))\n\n      let darkVariables = theme('myPlugin.darkOptions', {});\n      if (!_.isEmpty(darkVariables)) {\n        addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))\n      }\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))\n\n    }\n  }\n)\n```\n\n**User config:** (`tailwind.config.js`)\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    myPlugin: {\n      options: {\n        colors: {\n          primary: 'indigo', // custom color instead of default color\n        }\n      }\n    },\n  },\n  plugins: [require('my-plugin')],\n}\n```\n\n**Output:**\n```css\n:root {\n  --forms-colors-primary: indigo; /* \u003c\u003c\u003c default color changed via root configuration */\n  --forms-colors-secondary: white;\n  --forms-colors-warning: orange;\n}\n\n.form-select {\n    background-color: var(--forms-colors-primary);\n}\n\n.form-select .default-multi {\n    background-color: var(--forms-colors-secondary);\n}\n\n.form-select .other-multi {\n    background-color: var(--forms-colors-warning);\n}\n```\n\nBased on these examples, it won't be necessary to publish extra .css files for your plugin styles and also, it won't be necessary for the users to sort out your style files to compile your packages.\n\n\n\n## Examples and tests\n\nI have prepared examples on both helping with the usage and for testing all of the features that's being offered to make sure it works just fine.\n\n\n| Source                                                                                                     | State                                                                                                                                            |\n|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|\n| [Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)                         | ![Examples](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master\u0026label=examples)\t        |\n| [Plugin API Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master\u0026label=api-examples) |\n| [Tests](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__)                           | ![Tests](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master\u0026label=tests)               |\n\n\u003e Documents on examples and tests are re-organized on pull-request, push, release and etc. events.\n\u003e For this reason, file paths like `require(../index)` have been used on the example files. If you were to use the examples, you need to change the relevant lines as `require('@mertasan/tailwindcss-variables')`.\n\n\n## If You Need Help\n\nPlease send any questions and issues through GitHub issues. I will try my best to help you.\n\n## Contribution\n\nIf you are to improve or/and add new features, please feel free to send pull-requests.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":["https://github.com/sponsors/mertasan"],"categories":["Plugins","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmertasan%2Ftailwindcss-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmertasan%2Ftailwindcss-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmertasan%2Ftailwindcss-variables/lists"}