link：TailWindCSS
1.Peer & Group
定义使用 peer 和 group 可以实现元素之间的联动效果
name 和 trick-name 可以定义成我们想要的名称。
group-hover/trick-name:bg-red-600: 鼠标hover到group/trick-name时当前元素应该如何变化peer-hover/name:bg-orange-400: 鼠标hover到peer/name时当前元素如何变化
<div class="peer/name group/trick-name grid place-item-center h-20 2-20 bg-blue-400">
<div class="h-5 w-5 bg-black group-hover/trick-name:bg-red-600"></div>
<div class="h-5 w-5 bg-black group-hover/trick-name:bg-blue-600"></div>
</div>
<div class="h-20 w-20 bg-green-400 peer-hover/name:bg-orange-400"></div>2.内置动画类
TailWindCSS 内置了一些我们常用的动画效果，例如 animate-spin 旋转、animate-bounce 上下跳动等，可以直接使用
<div class="animate-spin w-2 h-2">🤣</div>
<div class="animate-ping text-xl">Like</div>
<div class="animate-pulse text-xl font-bold">Subscribe</div>
<div class="animate-bounce text-xl font-bold">Hit the 🔔</div>3.VSCode 提示优化
VSCode 装上 TailWindCSS 插件后在元素上输入 class 时会带有提示效果，如图
但是如何我们不在元素上直接输入 class , 而是将 class 赋值给变量，就不会有提示效果
如果变量名称为 className 呢？会发现提示效果又回来了
这是插件默认对 className 这个变量做了识别，如果想使用其他的变量名称但是又想拥有 VSCode 的提示效果，可以添加一些变量规则:
可以看到这里有一些默认的变量名称设置了 , 我们新增一个 twClass，保存后再次尝试，会发现提示效果已经有了
4.使用 tailwind-merge
为什么要使用？
有时候我们需要动态修改元素的 class ，例如使用 props 中传递进来的
<div className={`text-red-400 bg-black ${props.className}`}"></div>如果传入的 className 是 text-blue-400，可能会存在无效的问题，因为我们的元素上已经存在了一个 text-red-400 同类型的 class 了，解决这种情况的方式是使用 tailwind-merge;
import { twMerge } from 'tailwind-merge'
<div className={twMerge('text-red-400 bg-black', props.className)}"></div>它会自动合并 class 并且删除同类型的 class
配合
clsx使用，tailwind-merge无法使用对象的形式，需要配合clsx
5.动态类失效问题
如果我们需要在线上动态修改 class，例如主题修改之类的，可能会遇到修改了 class 并且元素已经成功应用了新的 class 但是却没有效果的问题。
这是因为在打包的时候，TailWindCSS 会删除那些我们项目中没有使用到的 class，所以会导致 class 成功应用但是没有效果。
解决方式可以提前定义好 class，表示告诉 tailwind 这个 class 我需要使用
6.如何更好的使用rem？
将页面根元素的默认大小设置为 62.5%
html {
font-size: 62.5%;
}这是因为
100%/16px*10 = 62.5%
默认浏览器的 1rem = 16px，这样写 rem 会比较麻烦
这样设置之后，rem 的转换就会非常方便
16px = 1.6rem
37px = 3.7rem注意
这个问题争论比较大，暂时先不要尝试使用
7.自定义Class 与封装基础组件
plugin(({addComponents, theme}) => {
addComponents({
'.center': {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}
})
}),基础容器组件的封装
// 工具函数
function TailwindDiv(props) {
const {className, children, ...other} = props
let bgclass = ''
let borderclass = 'border'
let roundclass = 'rounded'
Object.keys(other).forEach(key => {
if (key.indexOf('bg-') === 0) {
bgclass += `${key} `
}
if (key.indexOf('border-') === 0) {
borderclass += ` ${key} `
}
if (key.indexOf('rounded-') === 0) {
roundclass += ` ${key} `
}
})
const cls = clsx(bgclass, borderclass, roundclass, className)
return (
<div className={twMerge(cls)} {...other}>{children}</div>
)
}组件
import clsx from 'clsx'
import {twMerge} from 'tailwind-merge'
// 默认方向为 Row
export default function Flex(props) {
const {children, start, end, around, between, className, center, col, ...other} = props
const base = 'flex items-center flex-row'
const cls = clsx(base, {
['flex-col']: col,
['justify-start']: start,
['justify-end']: end,
['justify-around']: around,
['justify-between']: between,
['justify-center']: center,
}, className)
return (
<TailwindDiv className={twMerge(cls)} {...other}>{children}</TailwindDiv>
)
}使用
// 封装后
<Flex col between bg-green-200 border-green-600>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</Flex>
// 封装前
<div className='flex items-center justify-between flex-col border border-green-600 bg-green-200 rounded'>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>