tailwind-css-variables-theme-generator weekly downloads statistics

tailwind-css-variables-theme-generator

English

一种基于 tailwindcss 的 just-in-time 模式的动态多主题色快速生成，和管理方案。

• tailwind-css-variables-theme-generator • 特性 • 使用方式 • 安装 • 准备需要被暴露的变量文件 • 作为 Tailwindcss Plugin 来使用 • 作为 Nodejs 脚本来使用 • 原理

特性

• 可作为 tailwindcss 插件运行， tailwindcss IDE 智能提示插件友好 • 全局的 scss 变量注入 (additionalData) • 生成 scss 工具类，方案自由可完全由前端或者后端数据自定义

使用方式

安装

准备需要被暴露的变量文件

1. 创建一个或者多个 sass:map:

小技巧：你可以直接从 chrome devtool 把其他网站，所有的变量全部复制下来之后，只要把 ';' 符号替换成 ','，就快速产生了一个 sass:map。

2. 把这些数据提取出来

这样数据部分就准备完成了！

作为 Tailwindcss Plugin 来使用

在 tailwind.config.js 中引入，并添加配置：

添加后，插件会自动去修改 theme.extend.colors 和 @tailwind base;，把主题颜色和css变量，自动注入进来。

这时候你就可以写：

默认的生成类名为tailwindcss变量前缀(text,bg,border...)，加自定义变量名

插件会自动生成 css:

当然工具类的名称是可以自定义的，比如要去除 -color- 这样的变量前缀，就可以这样配置：

这样，上述的类名就变成了这样：

作为 Nodejs 脚本来使用

当作为 Nodejs 脚本来使用时，核心表现为生成文件，让用户自定义引入哪些文件进行使用。

例如：

当然也有更精细的文件生成配置：

接着，你只需要把这些文件，各自引入即可，比如：

• extendColors.js: • variables.scss • root.scss | export.scss | util.scss

全局引入的变量，工具类模板，可生成后，根据各自项目的情况自行修改。

原理

动态调整web系统主题? 看这一篇就够了

动态调整web主题(2) 萃取篇

customizing-colors#using-css-variables

Description from the npm listing.