tailwindcss学习：2 自定义类的使用和常见的tailwindcss前缀

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。