使用tailwindCss 配置多主题

安装tailwindcss postcss autoprefixer

pnpm install  tailwindcss@latest postcss@latest autoprefixer@latest -D 
npx tailwindcss init

运行 npx tailwindcss init 命令后就会生成tailwind.config.js和postcss.config.js文件。

taiwind.config.js 文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js文件

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

最后需要在vite.config.ts文件中添加代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from  "tailwindcss"
import autoprefixer from "autoprefixer"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss, 
        autoprefixer,
      ]
    }
  }
})

在src目录下创建tailwind.css文件

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

最后在main.ts中引入tailwind.css文件

import "./tailwind.css"

import './App.css'

function App() {
	return (
		<>
			<div className="bg-red-500 text-center w-20 h-20 m-auto mt-10 flex justify-center items-center">
				Hello Tailwind Css ~
			</div>
		</>
	)
}

export default App

此时页面应该已经生效了 tailwind 的样式！

下一步，我们可以通过 theme.extend 扩展样式值，来完成我们的主题效果～

比如下面我们扩展了两种颜色，黑色背景+白色字体的样式

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        mybg: "#000",
        mycolor: "#fff",
      },
    },
  },
  plugins: [],
};

把背景色换为我们自己的黑色，字体是白色

import './App.css'

function App() {
	return (
		<>
			<div className=" bg-mybg text-mycolor text-center w-20 h-20 m-auto mt-10 flex justify-center items-center">
				Hello Tailwind Css ~
			</div>
		</>
	)
}

export default App

然后扩展这里的样式值，是可以使用 css 变量的，所以我们可以主题设置不同的 css 变量！

index.css 这里定义了三种主题，默认/黑色/护眼

*{
    transition: all ease .3s;
}
:root{
    --var-body-bg:#fff;
    --var-body-content:#000;
}

.dark{
    --var-body-bg:#000;
    --var-body-content:#fff;
}

.eye{
    --var-body-bg:#C3E5B6;
    --var-body-content:#000;
}

然后 tailwind 配置扩展的样式值使用 CSS 变量

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        mybg: "var(--var-body-bg)",
        mycolor: "var(--var-body-content)",
      },
    },
  },
  plugins: [],
};

这样当容器切换到不同的类名，会匹配不同的全局 css 样式值！

下面加个切换类名，用于切换class 来实现主题切换～

import { useState } from 'react'
import './App.css'

function App() {
	const [themeIdx, setThemeIdx] = useState(0)
	const themes = ['', 'dark', 'eye']
	function toggleTheme() {
		setThemeIdx(themeIdx + 1 > themes.length - 1 ? 0 : themeIdx + 1)
	}

	return (
		< div className={themes[themeIdx]} onClick={toggleTheme}>
			<div className=" bg-mybg text-mycolor text-center w-20 h-20 m-auto mt-10 flex justify-center items-center">
				Hello Tailwind Css ~
			</div>
		</div>
	)
}

export default App

iShot_2024-07-10_15.44.35

这样就通过了 tailwind 实现了主题的切换！

目录CONTENT

使用tailwindCss 配置多主题

评论区