安装

在项目根目录下打开终端，输入

npm install -D tailwindcss@latest

这个命令将在你的 devDependencies 中安装 tailwindcss，我们只需要在开发时使用这个包，所以确保安装在你的 devDependencies 中

安装 vs code 插件，推荐

安装好后，在终端中输入命令：

npx tailwindcss init

将在根目录下帮我们新建一个默认的配置文件

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

也可以手动创建这个文件。
我们先看这个 content 属性，这个属性用来表示我们要用到样式的源文件路径。我们写入如下的路径：

module.exports = {
 content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

这样，我们就告诉了 tailwind：根目录 src 文件夹下的所有以 js,jsx,ts,tsx 结尾的文件都会使用 tailwindcss。使用生成 tailwind 生成样式文件的时候会参考这些文件里的 css 类。

其他的配置我们先不说，等使用到了在说明。

生成样式文件

在这个时候我们就已经可以使用 tailwind 来生成样式文件了。我们在终端中输入：

npx tailwindcss -o ./src/styles/tailwind.css

上面的命令用于执行 tailwind 的功能来生成样式文件，参数 -o 指定生成的样式文件放在什么地方。

代码写法

export function Displayer(/* 省略 */) {
  //  省略
  return (
    //  功能类写法
    <div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
      {/* 省略 */}
    </div>
  );
}

再执行 npx tailwindcss -o ./src/styles/tailwind.css，生成样式文件，你会在目录下看到生成的文件：
点进入查看内容，你会看到帮你生成的 css 样式，除了一些基本样式之外，在文件的最下方，会看到我们刚刚使用的功能类样式
最后我们在我们的根组件下引入 tailwind.css 这个文件。

//  main.tsx
import "./styles/tailwind.css";

//  省略

启动时的配置

npx tailwindcss -o ./src/styles/tailwind.css --watch

--watch 参数是让 tailwind 监听，随时生成最新的样式文件，这样就不需要时不时手动生成了。

更方便一点，可以将我们的启动脚本修改为：

{
//  省略
"scripts": {
    "dev": "run-p dev:*",
    "dev:css": "tailwindcss -o ./src/styles/tailwind.css --watch",
    "dev:server": "vite",
    //  省略
  },
  "devDependencies": {
    //  省略
    "npm-run-all": "^4.1.5",
    //  省略
  }
//  省略
}

变体

tailwind 的变体写法是用于实现伪类的样式效果。

比如在我们把鼠标移动到元素后需要元素改变样式，我们会使用到伪类 :hover，在 tailwind 里使用功能类也可以指定应用到伪类，通过添加 hover: 来使关联的功能类在 hover 时生效。示例如下：

<div className="hover:text-center"></div>

上面的写法，在 text-center 前加上 hover: 前缀，使其应用在了 hover 伪类里，相当于：

.text-center:hover {
  text-align: center;
}