迟到了几年的tailwind css初体验

前言

说实话前端的工具更新迭代非常快，但是很多的工具只是锦上添花，使我们的工作更加便捷，但是不使用也不会影响到我们工作的根本。就像我们学习开车一样，我们只要学会开车，无论现在的车厂怎么内卷，新车有什么新功能，我们只要会开车，对于新功能很快就可以上手的。

废话不多说了，其实tailwind css 已经出来很久了，但是一直没有机会尝试使用，最近心血来潮体验了一下，下面就简单来做个初体验总结。

安装

tailwind css的安装还是比较简单的，只要跟着官网进行就可以了。

执行npx tailwindcss init的时候报错

如果我们在执行npx tailwindcss init或pnpm tailwindcss init时报出以下错误

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 插件和官方的文档，使用起来其实也很容易就上手了。

使用例子

<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中配置即可

/** @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配置

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: []
};

然后我们在代码中就可以直接使用了

<NavBar 
   className="bg-main font-pingFang font-semibold" 
   title={props.title ?? "--"} 
   safeAreaInsetTop={true} 
   onClickLeft={handleBack} />

@apply避免重复使用大量class

tailwind css使用中，因为每个class 都是原子化的，所以不可避免要使用很多class .那如果我们有两个组件的样式很接近怎么办呢，这时候我们就可以使用tailwind css的@apply方法了

.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。