什么是TailwindCSS
TailwindCSS取代了语义式的css，使用了一种更高效的方式，会使得app更快成型。
一个例子
<input
class="
w-40 h-5 m-5 p-4
bg-slate-300
border-solid rounded-2xl outline-none
transition-all delay-100
hover:w-48 focus:bg-white focus:w-48 "
placeholder="请输入账号" v-model="username" />
在这里，只需要编写一些原子化的类名，就可以实现一个简单的输入框。
下面，要说一下为什么使用TailwindCSS
没有必要的CSS类名
用一个健全的体系去命名css类名更难。
语义化的类名是css难以维护的重要原因。
部分框架提供了组件级别的样式，例如按钮的样式，输入框的样式。
TailwindCSS提供了更小单位的原子化类名。
为什么几乎每个dom元素都要有一个自己的类名。
其实可复用的CSS类很少
每个类中往往会有很多个样式规则，在结构的语义、样式完全相同时才能做到真正的复用，若存在一点差异，就难以实现样式复用；
前端框架解决了组件化问题
不需要担心样式重复写的问题，
现在都是基于组件化的js库
只需要合理的组织好组件的结构，就可以。
无法确定的CSS样式作用范围
接手了一个项目之后，项目里的css都不敢轻易改动，因为不知道会影响多少内容。这时，你多希望样式都是内联样式，这样就可以轻易知道哪里会发生修改。
不会写，不熟练
工具现在已经较为成熟了，在vscode中，只要移动到类名上，就可以看到tailwind生成的效果.
使用方法
配置
npm install -D tailwindcss postcss autoprefixer
tailwind.config.js 是存放tailwind配置的文件。
一般使用下面的内容初始化。
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
在vue项目中，content是这样配置的：
content: [
"./src/**/*.{vue,js,ts,jsx,tsx}",
]
content用于指定所有需要被tailwindcss处理的文件。
tailwindcss会检测所有的content指定的文件，并且把所有的css类名都替换成tailwindcss提供的类名。
这里指定页面时，不要使用范围过大的路径，尽量缩小路径范围。
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
新家一个index.css文件，内容如下：
@tailwind base;
@tailwind components;
@tailwind utilities;
在main中引入index.css
之后，就可以在vue项目中使用了。
