1. 自定义类的定义
在 Tailwind CSS 中，您可以通过 tailwind.config.js 文件定义自定义类。类似 border-custom-green 这种写法实际上是一个组合类，通常是由自定义类和内置类结合而成的。
示例：自定义边框颜色
假设您在 tailwind.config.js 中定义了一个自定义颜色：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'custom-green': '#32cd32', // 自定义颜色
},
},
},
}
然后您可以在 HTML 中使用：
<div class="border-2 border-custom-green p-4"> 这是一个自定义绿色边框的 div </div>
在这个例子中，border-2 是 Tailwind 的内置类，表示边框宽度为 2px，而 border-custom-green 是您自定义的边框颜色。
2. Tailwind CSS 常见前缀
Tailwind CSS 使用前缀来组织和分类不同的样式。以下是一些常见的前缀及其含义：
| 前缀 | 含义 | 示例用法 | |---------------|----------------------------------------|------------------------------| | bg- | 背景颜色 | bg-blue-500 | | text- | 文本颜色 | text-red-600 | | border- | 边框颜色 | border-gray-300 | | p- | 内边距（padding） | p-4（表示 1rem 的内边距） | | m- | 外边距（margin） | m-2（表示 0.5rem 的外边距）| | h- | 高度 | h-64（表示 16rem 的高度） | | w- | 宽度 | w-full（表示 100% 的宽度） | | flex- | Flexbox 相关样式 | flex-row（表示横向排列） | | grid- | Grid 相关样式 | grid-cols-3（表示三列） | | rounded- | 圆角 | rounded-lg（表示大圆角） | | shadow- | 阴影 | shadow-md（表示中等阴影） | | opacity- | 不透明度 | opacity-50（表示 50% 不透明）| | overflow- | 溢出处理 | overflow-hidden（隐藏溢出） | | cursor- | 鼠标光标样式 | cursor-pointer（指针光标） |
3. 使用示例
背景颜色<div class="bg-blue-500 text-white p-4"> 这是一个蓝色背景的 div </div>
边框
<div class="border-2 border-gray-300 p-4"> 这是一个灰色边框的 div </div>
Flexbox
<div class="flex flex-row"> <div class="flex-1">子元素 1</div> <div class="flex-1">子元素 2</div> </div>圆角
<div class="rounded-lg border border-gray-300 p-4"> 这是一个带有大圆角的 div </div>
4. 总结
- 自定义类：您可以在 tailwind.config.js 中定义自定义类，并在 HTML 中使用它们。组合类名时，您可以将自定义类与 Tailwind 的内置类结合使用。
- 前缀：Tailwind 使用前缀来组织不同的样式，帮助您快速识别样式的功能。
- 常见前缀：了解常见的前缀及其含义可以帮助您更有效地使用 Tailwind CSS。