{"id":16039943,"url":"https://github.com/sonofmagic/tailwind-css-variables-theme-generator","last_synced_at":"2025-10-05T01:51:21.406Z","repository":{"id":41380349,"uuid":"447643113","full_name":"sonofmagic/tailwind-css-variables-theme-generator","owner":"sonofmagic","description":"base on tailwindcss v3 , dart scss","archived":false,"fork":false,"pushed_at":"2023-12-15T17:29:21.000Z","size":236,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-11T11:36:38.901Z","etag":null,"topics":[],"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/sonofmagic.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-13T15:06:06.000Z","updated_at":"2025-01-25T16:56:53.000Z","dependencies_parsed_at":"2023-12-15T18:42:47.431Z","dependency_job_id":null,"html_url":"https://github.com/sonofmagic/tailwind-css-variables-theme-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"sonofmagic/npm-lib-template","purl":"pkg:github/sonofmagic/tailwind-css-variables-theme-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwind-css-variables-theme-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwind-css-variables-theme-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwind-css-variables-theme-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwind-css-variables-theme-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonofmagic","download_url":"https://codeload.github.com/sonofmagic/tailwind-css-variables-theme-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwind-css-variables-theme-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278399610,"owners_count":25980331,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-10-08T23:09:09.790Z","updated_at":"2025-10-05T01:51:21.381Z","avatar_url":"https://github.com/sonofmagic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwind-css-variables-theme-generator\n\n[English]('./README_en.md')\n\n\u003e 一种基于 `tailwindcss` 的 `just-in-time` 模式的动态多主题色快速生成，和管理方案。\n\n- [tailwind-css-variables-theme-generator](#tailwind-css-variables-theme-generator)\n  - [特性](#特性)\n  - [使用方式](#使用方式)\n    - [安装](#安装)\n    - [准备需要被暴露的变量文件](#准备需要被暴露的变量文件)\n    - [作为 `Tailwindcss Plugin` 来使用](#作为-tailwindcss-plugin-来使用)\n    - [作为 `Nodejs` 脚本来使用](#作为-nodejs-脚本来使用)\n  - [原理](#原理)\n\n## 特性\n\n- 可作为 `tailwindcss` 插件运行， `tailwindcss` IDE 智能提示插件友好\n- 全局的 `scss` 变量注入 (`additionalData`)\n- 生成 `scss` 工具类，方案自由可完全由前端或者后端数据自定义\n\n## 使用方式\n\n### 安装\n\n```bash\nnpm i -D tailwind-css-variables-theme-generator sass\n# or\nyarn add -D tailwind-css-variables-theme-generator sass\n```\n\n### 准备需要被暴露的变量文件\n\n1. 创建一个或者多个 `sass:map`:\n\n```scss\n// constants.scss\n$root-vars: (\n  --color-canvas-default-transparent: rgba(32, 54, 85, 0),\n  --color-marketing-icon-primary: #053c74,\n  --color-custom-text-color: #546821\n);\n// another style\n$root-style1-vars: (\n  --color-canvas-default-transparent: rgba(21, 89, 184, 0),\n  --color-marketing-icon-primary: #0b121a,\n  --color-custom-text-color: #43463e\n);\n// another style\n$root-style2-vars: (\n  --color-canvas-default-transparent: rgba(89, 101, 117, 0),\n  --color-marketing-icon-primary: #003879,\n  --color-custom-text-color: #314215,\n);\n```\n\n\u003e 小技巧：你可以直接从 chrome devtool 把其他网站，所有的变量全部复制下来之后，只要把 `';'` 符号替换成 `','`，就快速产生了一个 `sass:map`。\n\n2. 把这些数据提取出来\n\n```scss\n// expose.scss\n// 刚刚那个文件\n@use './constants.scss' as C;\n// same as expose-with-selector(C.$root-style1-vars, \":root\")\n$style0: expose(C.$root-vars); \n$style1: expose-with-selector(C.$root-style1-vars, \"[data-color-mode='light']\");\n$style2: expose-with-selector(C.$root-style2-vars, \"[data-color-mode='dark']\");\n```\n\n这样数据部分就准备完成了！\n\n### 作为 `Tailwindcss Plugin` 来使用\n\n在 `tailwind.config.js` 中引入，并添加配置：\n\n```js\nconst { createPlugin } = require('tailwind-css-variables-theme-generator')\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  // ...\n  plugins: [\n    createPlugin({\n      // 推荐使用绝对路径，相对路径基于 process.cwd ，一旦 cwd 路径不对插件容易报错\n      entryPoint: 'path/to/expose.scss'\n    })\n  ],\n}\n```\n\n添加后，插件会自动去修改 `theme.extend.colors` 和 `@tailwind base;`，把主题颜色和`css`变量，自动注入进来。\n\n这时候你就可以写：\n\n```html\n\u003cdiv class=\"text-color-custom-text-color\"\u003e\n  \u003cp class=\"bg-color-canvas-default-transparent/70\"\u003ehello\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003e 默认的生成类名为tailwindcss变量前缀(text,bg,border...)，加自定义变量名\n\n插件会自动生成 `css`:\n\n```css\n:root {--color-canvas-default-transparent: 32 54 85;--color-marketing-icon-primary: 5 60 116;--color-custom-text-color: 84 104 33\n}\n[data-color-mode='light'] {--color-canvas-default-transparent: 21 89 184;--color-marketing-icon-primary: 11 18 26;--color-custom-text-color: 67 70 62\n}\n[data-color-mode='dark'] {--color-canvas-default-transparent: 89 101 117;--color-marketing-icon-primary: 0 56 121;--color-custom-text-color: 49 66 21\n}\n*, ::before, ::after {--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x:  ;--tw-pan-y:  ;--tw-pinch-zoom:  ;--tw-scroll-snap-strictness: proximity;--tw-ordinal:  ;--tw-slashed-zero:  ;--tw-numeric-figure:  ;--tw-numeric-spacing:  ;--tw-numeric-fraction:  ;--tw-ring-inset:  ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur:  ;--tw-brightness:  ;--tw-contrast:  ;--tw-grayscale:  ;--tw-hue-rotate:  ;--tw-invert:  ;--tw-saturate:  ;--tw-sepia:  ;--tw-drop-shadow:  ;--tw-backdrop-blur:  ;--tw-backdrop-brightness:  ;--tw-backdrop-contrast:  ;--tw-backdrop-grayscale:  ;--tw-backdrop-hue-rotate:  ;--tw-backdrop-invert:  ;--tw-backdrop-opacity:  ;--tw-backdrop-saturate:  ;--tw-backdrop-sepia:  \n}\n::backdrop {--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x:  ;--tw-pan-y:  ;--tw-pinch-zoom:  ;--tw-scroll-snap-strictness: proximity;--tw-ordinal:  ;--tw-slashed-zero:  ;--tw-numeric-figure:  ;--tw-numeric-spacing:  ;--tw-numeric-fraction:  ;--tw-ring-inset:  ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur:  ;--tw-brightness:  ;--tw-contrast:  ;--tw-grayscale:  ;--tw-hue-rotate:  ;--tw-invert:  ;--tw-saturate:  ;--tw-sepia:  ;--tw-drop-shadow:  ;--tw-backdrop-blur:  ;--tw-backdrop-brightness:  ;--tw-backdrop-contrast:  ;--tw-backdrop-grayscale:  ;--tw-backdrop-hue-rotate:  ;--tw-backdrop-invert:  ;--tw-backdrop-opacity:  ;--tw-backdrop-saturate:  ;--tw-backdrop-sepia:  \n}\n.bg-color-canvas-default-transparent\\\\/70 {background-color: rgb(var(--color-canvas-default-transparent) / 0.7)\n}\n.text-color-custom-text-color {--tw-text-opacity: 1;color: rgb(var(--color-custom-text-color) / var(--tw-text-opacity))\n}\n```\n\n当然工具类的名称是可以自定义的，比如要去除 `-color-` 这样的变量前缀，就可以这样配置：\n\n```js\ncreatePlugin({\n  entryPoint: 'path/to/expose.scss',\n  intelliSense: {\n    // formatter var name\n    getVarName (str) {\n      return str.substring(8)\n    },\n    // getVarValue (str){\n    //   return str\n    // }\n  },\n  // use `page` selector replace `:root`\n  // injectSelector: 'page'\n})\n```\n\n这样，上述的类名就变成了这样：\n\n```html\n\u003cdiv class=\"text-custom-text-color\"\u003e\n  \u003cp class=\"bg-canvas-default-transparent/70\"\u003ehello\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### 作为 `Nodejs` 脚本来使用\n\n当作为 `Nodejs` 脚本来使用时，核心表现为生成文件，让用户自定义引入哪些文件进行使用。\n\n例如：\n\n```js\nconst { generateSync } = require('tailwind-css-variables-theme-generator')\nconst path = require('path')\n// 在 expose.scss 所在目录生成文件\ngenerateSync({\n  entryPoint: path.resolve(__dirname, 'path/to/expose.scss')\n})\n```\n\n当然也有更精细的文件生成配置：\n\n```js\nconst { generateSync } = require('tailwind-css-variables-theme-generator')\nconst path = require('path')\n\ngenerateSync({\n  // entryPoint\n  entryPoint: path.resolve(__dirname, './expose/expose.scss'),\n  // default '.'， 生成文件夹的名称\n  outdir: 'expose',\n  // output file 生成各个文件的配置\n  files: {\n    // extendColors.js for tailwindcss v3\n    // 扩展的主题色文件\n    extendColors: {\n      getVarName(str) {\n        return str.substring(8)\n      },\n      getVarValue(str) {\n        if (str.includes('shadow')) {\n          return `'${str}'`\n        }\n        return `withOpacityValue('${str}')`\n      }\n      // override default filepath\n      // outfile: path.resolve(__dirname, 'extendColors.js')\n    },\n    // variables.scss for global scss variables\n    // 全局注入的 scss 变量文件\n    variables: {\n      getVarName(str) {\n        return str.substring(8)\n      }\n    },\n    // object | true | undefined -\u003e generate this file\n    // false -\u003e not generate this file\n    // webpack export 文件\n    export: {\n      replacement: {\n        '{{filepath}}': '../constants.scss',\n        '{{variableName}}': '$root-vars'\n      }\n    },\n    // replacement : Record\u003cstring,string\u003e\n    // root css 变量文件\n    root: {\n      replacement: {\n        '{{filepath}}': '../constants.scss',\n        '{{variableName}}': '$root-vars'\n      }\n    },\n    // boolean: false -\u003e not generate this file\n    // scss 工具类文件\n    util: true\n  },\n  // sass 配置\n  sassOptions: {\n    // ...\n  }\n})\n```\n\n接着，你只需要把这些文件，各自引入即可，比如：\n\n- `extendColors.js`:\n\n```js\n// tailwind.config.js\nconst extendColors = require('path/to/extendColors')\nmodule.exports = {\n  theme:{\n    extend:{\n      colors:{\n        // ...\n        ...extendColors.colors,\n      }\n    }\n  }\n}\n```\n\n- `variables.scss`\n\n```js\n// webpack.config.js / vue.config.js / nuxt.config.js\nloaders: {\n  scss: {\n    additionalData: '@use \"path/to/variables.scss\" as *;',\n    sassOptions: {\n      quietDeps: true,\n    },\n  },\n}\n```\n\n- `root.scss` | `export.scss` | `util.scss`\n\n全局引入的变量，工具类模板，可生成后，根据各自项目的情况自行修改。\n\n## 原理\n\n[动态调整web系统主题? 看这一篇就够了](https://juejin.cn/post/7043359491382837255)\n\n[动态调整web主题(2) 萃取篇](https://juejin.cn/post/7053671539094323214)\n\n[customizing-colors#using-css-variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonofmagic%2Ftailwind-css-variables-theme-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonofmagic%2Ftailwind-css-variables-theme-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonofmagic%2Ftailwind-css-variables-theme-generator/lists"}