用tailwindcss书写样式的时候，tailwindcss默认提供的类名可能不能满足我们的需求，这时你可能无奈书写原生css样式，但是这些问题用tailwindcss就可以解决。
1.提高优先级!important
这个在覆盖ui组件库的样式的收非常好用。
比如你想element-plus的el-card组件边框有圆角，但是直接在el-card添加rounded-xl这个类名不会有效果。
没有圆角：
在
rounded-xl前面加一个!就可以起效果了。
又比如修改el-button的字体大小：
2.使用任意值
tailwindcss提供的有些属性值有时候不能满足我们的需求，比如高度和宽度h，w；内边距，外边距等等。
这时候我们可以使用任意值。比如下面代码自定义header的高度设置成60px，因为tailwindcss默认没有提供60px的高度，所以只能自定义：
很多属性都是可以自定义的，你可以多试试。
也可以传入css自定义变量：
<div class="bg-[--my-base-bg-color]">
</div>
3.样式复用@apply
有时候我们重复书写相同的样式，这时候我们应该把可以重用的样式抽出来：
把菜单栏的icon和title的样式抽离出来：
4.充分利用tailwindcss的三个指令
tailwindcss有三个指令，分别是：
- @tailwind base;
这个指令用于引入 基础样式，它包含了 CSS 重置和一些默认的全局样式设置。通过引入 @tailwind base，Tailwind 会确保不同浏览器下的样式一致，并为一些常见的 HTML 元素（如 h1, p, a 等）设置合理的基础样式。
- @tailwind components;
这个指令用于引入 组件样式，它会引入一些常用的 UI 组件样式，或者你自定义的组件类。如果你在 Tailwind 中定义了自定义组件，也可以通过这个指令将它们引入。
- @tailwind utilities;
这个指令用于引入 实用工具类（utilities） ，这些工具类是 Tailwind 的核心，它们提供了大量的原子类（例如 text-center, p-4, bg-red-500 等），可以帮助你在 HTML 中快速应用样式。
定义自己的类名
如果想扩展tailwindcss的类名，比如tailwindcss没有card这个类，我们可以自定义这个类，并且可以在页面的任何地方可以使用。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
@apply p-4 border border-gray-100 shadow-md;
}
}
修改tailwindcss初始化样式
@tailwind base 是 Tailwind CSS 的一个指令，用于引入 基础样式（base styles），它通常会包括一些全局的默认样式、CSS重置、以及一些常见的浏览器默认样式的调整。
比如默认情况下，tailwindcss把h1~h6的字体大小都设置成了很小，这个应该怎么重置呢:
用
@tailwind base进行重置：
通过上面介绍的技巧，我们可以很少写原生的css。既然用了tailwindcss就保持项目中样式书写的一致性，我觉得不应该一会儿写原生css，一会儿写tailwindcss。
5. tailwindcss-v4
安装： tailwindcss.com/docs/instal…
tailwindcss v4一个显著变化是配置文件都是纯css的，以后不用写tailwind.config.js文件，所有的配置都写到css文件里面：
然后在我们的index.css文件中：
配置完毕，就这么简单。
@theme 指令
我们可以通过@theme定义自己的主题变量
比如：
@import 'tailwindcss';
/*
先定义主题变量
注意事项：
如果定义的是颜色变量，变量前面一定要写上--color这个namespace
更多的namespace：https://tailwindcss.com/docs/theme#theme-variable-namespaces
*/
@theme {
--color-deep-blue: #006FEE;
}
然后使用这个主题变量：
export default function App() {
return(
<div className="bg-deep-blue p-12">
<h1 className="text-5xl font-bold text-white">This is a tailwindcss</h1>
</div>
)
}
@utility 指令
我们可以使用@utility指令定义自己的工具类。
比如：
@import 'tailwindcss';
/*
定义我们的工具类
可能是插件的问题，在@utility里卖弄写css时候，vscode没有提示
*/
@utility container {
padding: 20px;
max-width: 1280px;
margin: 0 auto;
}
使用这个工具类：
页面效果：
@plugin
如果想渲染markdown内容，比如个人博客项目中经常使用，我们可以使用tailwindcss的typography插件： github.com/tailwindlab…
然后tailwindcss中导入这个插件：
@import 'tailwindcss';
/*导入插件*/
@plugin "@tailwindcss/typography";
border
border自动继承自己的text-color
比如：
又比如：
