前言
说实话前端的工具更新迭代非常快，但是很多的工具只是锦上添花，使我们的工作更加便捷，但是不使用也不会影响到我们工作的根本。就像我们学习开车一样，我们只要学会开车，无论现在的车厂怎么内卷，新车有什么新功能，我们只要会开车，对于新功能很快就可以上手的。
废话不多说了，其实tailwind css 已经出来很久了，但是一直没有机会尝试使用，最近心血来潮体验了一下，下面就简单来做个初体验总结。
安装
tailwind css的安装还是比较简单的，只要跟着官网进行就可以了。
执行npx tailwindcss init的时候报错
如果我们在执行npx tailwindcss init或pnpm tailwindcss init时报出以下错误
js
npx tailwindcss init
npm error could not determine executable to run我们可以检查一下是否Tailwind CSS 和 PostCSS 版本冲突了。
与UI框架样式冲突
如果我们项目中，原本是使用了一些UI框架的，像我项目中使用了Vant UI会出现样式冲突的情况。
目前的解决方案主要有三种：
1.将ui库样式的引入放在tailwind css之后
2.取消基础映射样式的引入，即把文档中@tailwind base;的引用去掉
3.禁用preflight
具体的方法可以上网查找一下对应的解决方案
基础使用
tailwind css很多人不愿意使用的一个关键点就是有很多新的class,这无疑增加了开发者的心智负担和门槛。
但是我在使用过程中的真实体验就是，如果我们搭配vscode的IntelliSense 插件和官方的文档，使用起来其实也很容易就上手了。
使用例子
js
<div class="w-96 ...">w-96</div>
<div class="w-80 ...">w-80</div>
<div class="w-64 ...">w-64</div>
<div class="w-48 ...">w-48</div>
<div class="w-40 ...">w-40</div>
<div class="w-32 ...">w-32</div>
<div class="w-24 ...">w-24</div>进阶使用
搭配css变量使用
现在基本上所有的UI框架都使用了css 变量，因此我们的tailwind css 也必须搭配css 变量使用才方便。
使用起来也很方便，只要我们先定义好css变量，然后再tailwindcss.config中配置即可
js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./public/index.html", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
main: "var(--main-color)",
"home-bg": "var(--home-bg-color)",
"text-primary": "var(--text-primary-color)"
}
}
},
plugins: []
};自定义class
在实际开发中，tailwind css中自带的class 可能并不能满足我们的开发需求，这个时候我们就需要自定义class.
我们可以在tailwindcss.config配置
js
export default {
content: ["./public/index.html", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
main: "var(--main-color)",
"home-bg": "var(--home-bg-color)",
"text-primary": "var(--text-primary-color)"
},
fontFamily: {
pingFang: ["PingFang SC", "sans-serif"]
},
fontSize: {
tiny: "var(--font-tiny)",
small: "var(--font-small)",
normal: "var(--font-normal)",
medium: "var(--font-medium)",
big: "var(--font-big)",
large: "var(--font-large)"
},
borderRadius: {
normal: "var(--border-radius-normal)"
}
}
},
plugins: []
};然后我们在代码中就可以直接使用了
js
<NavBar
className="bg-main font-pingFang font-semibold"
title={props.title ?? "--"}
safeAreaInsetTop={true}
onClickLeft={handleBack} />@apply避免重复使用大量class
tailwind css使用中，因为每个class 都是原子化的，所以不可避免要使用很多class .那如果我们有两个组件的样式很接近怎么办呢，这时候我们就可以使用tailwind css的@apply方法了
js
.margin-center { @apply mx-auto my-0; }
.flex-center { @apply flex items-center justify-center; }
.absolute-center { @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2; }像上面的例子一样，我们就可以将多个原子化的class 组合成一个新的class,方便我们复用。
总结
tailwind css 会有很多最小粒度的class 可以帮助我们快速的写css而不是添加很多无意义的class.
它里面所有预定义的 class 都可以通过配置文件修改值，也可以通过 aaa-[14px] 的方式定义任意值的class。