Tailwindcss 的工作原理是扫描所有 HTML 文件、 JavaScript 组件和任何其他类名模板，生成相应的样式，然后将它们写入静态 CSS 文件。

它快速、灵活、可靠。

1、在终端中输入如下命令：

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init //会自动创建tailwind.config.js

2、在根目录中创建postcss.config.js，添加如下代码

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

3、在tailwind.config.js中添加如下代码

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,tsx,jsx}"],
  darkMode: 'class',
  theme: {
    colors: { //自定义颜色
      'custom': 'yellow',
      'pink': '#ff49db',
      'tahiti': {
        100: 'orange',
        200: '#a5f3fc',
        DEFAULT: '#06b6d4',
      }
    },
    extend: { //主题色
      backgroundColor: {
        primary: "rgb(var(--color-primary) / <alpha-value>)",
        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
        background: "rgb(var(--color-background) / <alpha-value>)",
        foreground: "rgb(var(--color-foreground) / <alpha-value>)",
        separator: "rgb(var(--color-separator) / <alpha-value>)",
      },
      textColor: {
        primary: "rgb(var(--color-foreground) / <alpha-value>)",
      }
    },
  },
  plugins: [],
}

4、在index.css中引入如下代码(入口css)

   @tailwind base;
@tailwind components;
@tailwind utilities;
/* 自定义主题色 */
.theme-theme1 {
    --color-primary: 94 129 172;
    --color-secondary: 129 161 193;
    --color-background: 46 52 64;
    --color-foreground: 216 222 233;
    --color-separator: 76 86 106;
  }
  .theme-theme2 {
    --color-primary: 38 139 210;
    --color-secondary: 203 75 22;
    --color-background: 0 43 54;
    --color-foreground: 238 232 213;
    --color-separator: 131 148 150;
  }
  
  .theme-theme3 {
    --color-primary: 211 54 130;
    --color-secondary: 133 153 0;
    --color-background: 253 246 227;
    --color-foreground: 101 123 131;
    --color-separator: 88 110 117;
  }

如遇到Unknown at rule @tailwindcss 在vscode报红问题解决办法如下 在根目录找到.vscode 文件夹，在.vscode文件夹找到setting.json文件，添加如下代码

 "css.lint.unknownAtRules": "ignore"

5、在react组件中直接使用

const themes = ["theme1", "theme2", "theme3"];
import React, { useState } from "react";
function App() {

  const [theme, setTheme] = useState("theme1");
  return (
    <div className={`theme-${theme} w-screen h-screen bg-background`}>
      <div className="container mx-auto bg-gray-200 hover:bg-green-50 rounded-xl shadow border p-8 ml-2 mr-2">
      <p className="text-gray-700 font-bold mb-5 text-[18px]">
        Welcome!
      </p>
      <p className="text-lg text-ellipsis overflow-hidden whitespace-nowrap text-custom">
        Hello React and tailwindcss
      </p>
      <p className="text-tahiti-100">
        我是自定义嵌套颜色
      </p>
    </div>
    <div className="container flex flex-col justify-center items-center">
      <p className="text-center">当前主题:{theme}</p>
      <div className=" flex justify-around w-[340px] mt-2">
      {themes.map((item,index)=>{
        return <button key={index} className="border rounded p-2 bg-secondary text-primary" onClick={()=>setTheme(item)}>{item}</button>
      })}
        
      </div>
    </div>
    </div>
  )
}
export default App

后续：在VScode中可通过Tailwind CSS IntelliSense 插件帮你快速编写css代码 最后附上链接jiandongzou.github.io/react-tailw…