%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7.html
前言
如果你刚刚熟悉了 TailwindCSS，不妨先看一下这篇文章：
以下内容将假设您已经使用过 TailwindCSS 一段时间并且更加熟悉它的使用。 本文将重点讲解不太常用的功能点。 如果您是深度用户，您可能需要这篇文章。
提取配置
我们想到的第一个问题是：重用。 你总会遇到需要具体化的情况，比如需要在多个项目中共享一个配置。 虽然用Ctrl C、Ctrl V一分钟就可以搞定，这种方案速度最快，但后果也最大（副本散落各处，最后不知道以哪一个为基准） 。
幸运的是，TailwindCSS 为我们提供了预设的功能，您只需要几个简单的步骤即可提取配置：
1.新增tailwind.preset.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
primary: 'orange'
}
},
},
}
Preset文件的配置方法与tailwind.config.js相同，TailwindCSS会按照自己的合并规则合并preset和tailwind.config.js中的配置。
合并规则可以参考：#merging-logic-in-deep
2.配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {
extend: {},
},
presets: [
require('./tailwind.preset.js')
],
}
当然，你也可以考虑将 tailwind.preset.js 发布为 npm 库：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {
extend: {},
},
presets: [
require('tailwind-preset') // 库名为tailwind-preset，配置package.json中main字段为配置文件位置作为库的默认导出
],
}
您可能已经注意到预设配置是一个链接列表。 是的，TailwindCSS 允许配置多个预设，然后从上到下合并。 如果多个预设中存在相同的配置，则前者将覆盖后者。
提示
可以配置多个预设，以提供更细粒度的分割配置的可能性。 您可以根据不同的模块拆分Tailwind配置，并根据您的需求组合使用。
这种分裂方式相当于配置层面的原子化。 看来TailwindCSS处处充满了原子气息，敬佩！
通过插件提高开发效率
CSS的能力比JS弱很多，所以虽然CSS的插件主要封装了一些常用的样式，形成所谓的CSS组件，比如下面的代码：
.button {
display: inline-block;
padding: 5px 12px;
text-align: center;
background-color: orange;
color: #fff;
}
上面的代码实现了一个按钮 CSS 组件。 在TailwindCSS中，你可以将其视为一个名为button的插件。 当开发者安装这个插件后，只需添加一个类就可以实现快速编码。
下面简单介绍两个常用的官方插件的安装和使用：
安装插件
pnpm i -D @tailwindcss/line-clamp @tailwindcss/aspect-ratio
# yarn add -D @tailwindcss/line-clamp @tailwindcss/aspect-ratio
# npm i -D @tailwindcss/line-clamp @tailwindcss/aspect-ratio
注册插件
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
plugins: [
require('@tailwindcss/line-clamp'),
require('@tailwindcss/aspect-ratio'),
],
}
如何使用 line-clamp 插件
我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字文字 我是文字 我是文字 我是文字 我是文字 文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字文字 文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字文字 我是一段文字 我是一段文字 我是一段文字 我是一段文字 我是一段文字 我是一段文字 我是一段文字 我是一段文字 我是一段文字
如何使用纵横比插件
生成普通视频的比例包（16:9）：
<div class="w-[400px] aspect-video bg-blue-300">
<video
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
class="w-full h-full"
controls />
</div>
又爱又恨的预检功能
preflight是一组TailwindCSS外部的全局样式，其功能类似于normalize.css/modern-normalize（TailwindCSS构建在modern-normalize之上）。
preflight主要改变的全局样式：
禁用此功能
默认情况下，预检会在 @tailwind 基础之后注入到您的应用程序中。 如果您不想使用此功能，可以在配置中添加新行：
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
preflight: false
},
// ...
}
个人想法
我个人不喜欢使用这个功能，一般都会关闭它，原因有以下三个：
一般来说，我会在项目中引用normalize.css或modern-normalize库。 如果使用预检，实际上会重复一些工作；
Preflight主要是重置html的一些原生标签的样式，像h1/h2/h3/h4/h5/h6/ol/ul/p这样的标签，我喜欢用div标签代替，虽然会增加语义，但是提高效率；
我不喜欢将img标签设置为块级包，因为它违反直觉时间css，并且给开发人员带来了额外的学习成本。
边框默认样式的坑
如果禁用该功能，则在设置边框时需要注意书写上的差异。 TailwindCSS官方推荐的边框写法：
<div class="border-t border-gray-200" />
结合预检的全局样式：
* {
border-width: 0;
border-style: solid;
}
最终，最终的风格将是：
div {
border-width: 0;
border-top-width: 1px;
border-style: solid;
border-color: #e5e7eb;
}
但是，如果禁用预检，最终的合成样式将是：
div {
border-top: 1px;
border-color: #e5e7eb;
}
此时时间css，由于没有设置边框样式，边框将不存在。
因此，需要为每个设置边框的场景设置边框样式：
<div class="border-t border-solid border-gray-200" />
这种写法的问题就更大了，除了上边框是白色的，其他边也会出现边框，因为html中所有元素的默认边框长度都是1px。 为了去掉其他边的边框，还需要自动处理：
<div class="border-t border-solid border-gray-200 border-l-0 border-r-0 border-b-0" />
这？ ？ ？ 太郁闷了，所以我个人建议自动添加一些全局样式：
*, *:before, *:after {
border-width: 0;
border-style: solid;
}
这样，与开启预检功能的疗效是一致的。
提示
反之，在启用预检的前提下，可以将img等标签设置为内嵌包。
发表评论