Tailwind CSS 是一个高度可定制的 CSS 框架，它提供了一套预定义的工具类，允许开发者快速构建和设计用户界面。

以下是 Tailwind CSS 的一些基础概念和用法：

概念详解

1. 工具类（Utility-First）

Tailwind 的工具类可以让开发者快速定义样式，无需手动编写 CSS。

实例

<div class="text-center text-blue-500 font-bold">
  Tailwind Utility Classes
</div>

解析：

• text-center：居中对齐。

• text-blue-500：蓝色文字。

• font-bold：加粗字体。

2. 响应式前缀

通过前缀设置不同屏幕尺寸下的样式。

实例

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
  Responsive Example
</div>

解析：

• 默认：红色背景。

• 小屏幕（≥640px）：绿色背景。

• 中屏幕（≥768px）：蓝色背景。

• 大屏幕（≥1024px）：黄色背景。

3. 颜色和尺寸

Tailwind 提供了丰富的预定义颜色和尺寸，便于快速应用。

实例

<p class="text-lg text-gray-600">
  Text with pre-defined size and color
</p>

解析：

• text-lg：文字大小。

• text-gray-600：灰色文字。

4. 间距（Spacing）

通过间距工具类设置元素的内外边距。

实例

<div class="p-4 m-8">
  Padding and Margin Example
</div>

解析：

• p-4：内边距为 1rem。

• m-8：外边距为 2rem。

5. 布局（Layout）

提供的类可以快速实现灵活的布局方式，如 Flexbox 和 Grid。

实例

<div class="flex justify-between items-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid 实例：

实例
<div class="grid grid-cols-3 gap-4">  
   <div>1</div>  
   <div>2</div>  
   <div>3</div>
   </div>

6. 文本样式

控制文本的对齐、颜色、大小和其他样式。

实例

<p class="text-center font-semibold text-red-500">
  Centered Bold Text
</p>

7. 背景和边框

通过工具类设置背景颜色、图片和边框样式。

实例

<div class="bg-yellow-200 border border-gray-400">
  Background and Border Example
</div>

8. 悬停和状态

为交互元素设置状态样式。

实例

<button class="bg-blue-500 hover:bg-blue-700 text-white">
  Hover Me
</button>

9. 尺寸（Sizing）

设置元素的宽度和高度。

实例

<div class="w-64 h-32 bg-gray-300">
  Width and Height
</div>

10. 可见性（Visibility）

控制元素的显示与隐藏。

实例

<div class="invisible sm:visible">
  Visible only on small screens
</div>

11. 栅格系统（Grid System）

使用 Tailwind 的 Grid 工具类创建网格布局。

实例

<div class="grid grid-cols-3 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

12. 自定义配置

通过配置文件自定义设计系统。

实例

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8',
      },
    },
  },
}

13. 暗色模式

启用暗模式并定义样式。

实例

<div class="bg-white dark:bg-black text-black dark:text-white">
  Dark Mode Example
</div>

14. 插件

通过插件扩展 Tailwind 的功能。

实例

// tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {

  plugins: [

    plugin(function({ addUtilities }) {

      addUtilities({

        '.rotate-45': {

          transform: 'rotate(45deg)',

        },

      })

    }),

  ],

}

15. 指令（Directives）

通过 @tailwind 指令加载 Tailwind 的不同层。

实例

@tailwind base;
@tailwind components;
@tailwind utilities;