在vue项目里 tailwindcss和tailwindcss-theming 实现网页换肤

tailwindcss介绍

相关安装和文档介绍请参考官网
使用感受：

• 避免定义less变量，导致变量在scoped作用域不生效，从而产生多余样式文件
• 避免class名的冲突，让用户快速构建项目

tailwindcss-theming介绍

相关安装和文档介绍请参考文档

使用步骤

• 安装 Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

• 安装 tailwindcss-theming

npm i -D tailwindcss-theming@next

• 创建tailwind.config.js

npx tailwindcss init 

内容大致如下：

const { tailwindConfig } = require('./src/tailwindTheme')
// tailwindConfig 基本按照官方网的配置，就不一一举例了
module.exports = {content: [],purge: ['./src/**/*.html', './src/**/*.vue'theme: {extend: {...tailwindConfig},},plugins: [require('tailwindcss-theming')({variants: {dark: true,light: true}})],
}

• 创建postcss.config.js 添加postcss 作为样式解析 内容大致如下

module.exports = {plugins: [require('tailwindcss'),require('autoprefixer'),...process.env.NODE_ENV === 'production'? [require('cssnano')]: []]
}

• 创建theme.config.js 用于对主题的设置，设置对浅色和深色的变量引用，内容大概设置如下

const { baseTheme } = require('./src/tailwindTheme/light')const { darkTheme } = require('./src/tailwindTheme/dark')
const { ThemeManager } = require('tailwindcss-theming/api');
module.exports = new ThemeManager().setDefaultTheme(baseTheme).setDefaultDarkTheme(darkTheme)

• 创建tailwindTheme 目录，里面添加对深色和浅色变量的设置，比如:light.js

const { Theme } = require('tailwindcss-theming/api')
const light = {'m-900': '#3370FF','m-a': 'rgb(30,128,255)',
}
const baseTheme = new Theme().setName('light').targetable().addColors(light).addOpacityVariant('100', 0.1, 'm-a')module exports baseTheme;

这样m-900 就会被解析到[data-theme=‘light’]里，变成css变量，我们就可以直接写样式引用
比如

<div class="w-120 h-12 bg-m-900"></div>

• 同样的方式在dark.js里添加对应的变量，样式输出时就自动会解析到[data-theme=‘dark’]里，我们只需要在body上改变属性[data-theme],把它变成light/dark就可以实现深色和浅色模式的切换
• 改变配置项记得重启服务，不然可能会导致配置不生效