tailwindcss平常写样式都是在html标签上增加class类名，然后在css中写对应的样式。而tailwindc

什么是 tailwindcss

平常写样式都是在html标签上增加class类名，然后在css中写对应的样式。而tailwindcss是直接在html标签上写定义好的tailwindcss。

扫描所有包含 CSS 类名的文件，然后生成相应的样式代码并写入到一个 CSS 文件中

可以理解 tailwindcss 是 postcss 的一个插件

通过给标签增加class代替单独设置具体样式的方式可以减少css文件体积，提高代码复用性

<div class="div1">嘻嘻</div>

<div class="div2">哈哈</div>

.div1{
    position: relative;
    color: red;
}
.div2{
    position: relative;
    color: green;
}

如果使用 tailwindcss 则可以直接在html上增加 class 类名

<div class="relative text-red">嘻嘻</div>
<div class="relative text-green">哈哈</div>

常见的 css 模块是利用 scoped 将 css 文件 hash 化，有时候还需要考虑父子组件之间的样式隔离。

tailwindcss 这里就完全不会出现这些心智负担，原子化的样式都是独立的。

对于一个整体应用的设计应该是有统一的规范的，tailwindcss 刚好能做到。

在官方提供的样式基础上我们还可以自定义样式，当我们完成项目的第一版之后可以将我们的配置文件作为该应用的设计规范。

之前一些项目的ui设计上设计师的设计比较发散，导致我们类似组件样式需要单独写，而一个设计规范可以避免如此情况

现有 vite vue 项目中使用 tailwindcss

安装 tailwindcss 和对应依赖 + 构建配置文件

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

在全局css中添加引用

@tailwind base;
@tailwind components;
@tailwind utilities;

页面中使用：蓝色背景 + 白色字体 + 加粗 + padding + 圆角的按钮

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
    Click me
</button>