随着项目的发展，您不可避免地会发现自己需要重复使用常用样式，以便在许多不同的地方重新创建相同的组件。这在小组件（如按钮、表单元素、徽章等）中最为明显。在我的项目中是图表标题样式如下：
1
在许多组件实例中保持一长串样式类class，同步很快就会成为真正的维护负担，因此当您开始遇到像这样的痛苦重复时，提取一个组件是一个好主意。
可选方案
查阅 Tailwindcss 官方文档
1. 提取模板组件
不推荐做法：不要依赖 CSS 类来提取复杂的组件
因为这样依然无法避免复制同样的HTML结构，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
因此，将可重复使用的 UI 部分提取到模板部分或JavaScript 组件中通常比编写自定义 CSS 类更好。
通过为模板创建单一真实来源，您可以继续使用实用程序类，而无需承担因在多个地方重复相同的类而产生的维护负担。
推荐做法：创建模板部分或 JavaScript 组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
上面的例子使用了Vue，但同样的方法也可以用于React 组件、ERB partials、Blade 组件、Twig 包含等等。
- 使用@apply提取组件类
对于按钮和表单元素等小组件，与简单的 CSS 类相比，创建模板部分或 JavaScript 组件通常会感觉太重。
在这些情况下，您可以使用 Tailwind 的 @apply 指令轻松地将常见的实用程序模式提取到 CSS 组件类中。
下面是btn-indigo使用@apply现有实用程序组成的类的示例：
1
2
3
4
5
6
7
8
9
为了避免意外的特殊性问题，我们建议使用指令包装自定义组件样式，@layer components { ... } 以告诉 Tailwind这些样式属于哪个层：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-blue {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
1
2
3
4
5
6
7
8
9
Tailwind 会自动将这些样式移动到与 相同的位置@tailwind components，因此您不必担心在源文件中获取正确的顺序。
使用该@layer指令还将指示 Tailwind 在清除层时考虑清除这些样式components
- 编写组件插件
除了直接在 CSS 文件中编写组件类之外，你还可以通过编写自己的插件将组件类添加到 Tailwind：
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addComponents, theme }) {
const buttons = {
'.btn': {
padding: ${theme('spacing.2')} ${theme('spacing.4')},
borderRadius: theme('borderRadius.md'),
fontWeight: theme('fontWeight.600'),
},
'.btn-indigo': {
backgroundColor: theme('colors.indigo.500'),
color: theme('colors.white'),
'&:hover': {
backgroundColor: theme('colors.indigo.600')
},
},
}
addComponents(buttons)
})
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
如果您想将 Tailwind 组件发布为库或更轻松地在多个项目之间共享组件，这可能是一个不错的选择。
在组件插件文档中了解更多信息
最终方案
因为我的使用场景，是针对图表的标题，虽然出现次数多，但将该组件提取出来会显得代码繁重，我最终决定在tailwindcss.css用@apply定义一个类，并在组件中重复使用这个类名
- Tailwindcss.css文件做以下class配置
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.chart-title {
@apply h-8 p-1 flex items-center justify-end bg-white;
}
}
1
2
3
4
5
6
7
8
9
- 组件使用class
