1. 动态类名问题

因为tailwind默认是走的编译,所以不能很好识别动态命名的问题

所以如果有动态类名,要么就是用那种三元表达式,如果彻底没办法就要在tailwind配置中单独添加

safelist

2. 样式冲突问题

因为css类名写在html标签上不具备优先级,只是在css文件中后写的可以覆盖先写的

所以当你写

<div className="bg-blue-100 bg-blue-200" />

此时就会碰运气,到底优先级如何

所以你这时候需要使用一个类库 tailwind-merge 去处理这种事情

3. 如何简写条件语句

在vue中帮你把此类的操作全部处理了,但是在别的框架中可没有帮你手动处理,需要单独安装一个插件 clsx

然后最好是两个联合起来使用,这个是shadcn默认自带的utils方法

4. 关于类名排序混乱

当你的class越写越多的时候,后续进行维护就会变得很困难,这是很难避免的问题,所以我们只有去尽量优化,让你的class尽量规范化,这里有一个很好的prettier插件能帮你解决这个问题 prettier-plugin-tailwindcss

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. - tailwindlabs/prettier-plugin-tailwindcss

github.com

5. 如何在不影响老项目样式的情况下集成tailwindcss

之前遇到一个老项目,那个老项目的css reset很不规范,然后我引入了tailwindcss,然后就发现很多样式都不一样了,譬如没有给*加上box-sizing:border-box等等,最关键的是原本有一些类和tailwindcss的类名重复了,导致样式冲突

为了解决这些问题

首先去preflight然后在tailwindcss的配置文件中添加

给tailwindcss添加一个前缀

6. 类名膨胀问题

特别是写一些组件以及 table 的时候,可能导致重复的 class 越来越多,当复用的类多了,改起来也很麻烦,html也越来越长,其实可以用 tailwind 的 @apply 去解决,然后复用你的 class 就行了