Tailwind语法大全

1. 基础语法

Tailwind 的类名通常由属性名和值组成，格式为 属性-值。例如：

• text-center：文本居中

• bg-blue-500：背景颜色为蓝色，500 是颜色的深浅程度

• p-4：内边距为 1rem（4 个单位，1 个单位 = 0.25rem）

• m-2：外边距为 0.5rem

2. 常用属性

2.1 布局 (Layout)

• container：将元素设置为容器，宽度根据断点自动调整

• mx-auto：水平居中

• flex：启用 Flexbox 布局

• grid：启用 Grid 布局

• block、inline-block、inline、hidden：控制元素的显示方式

2.2 间距 (Spacing)

• p-{size}：内边距（padding），如 p-4、p-2

• m-{size}：外边距（margin），如 m-4、m-2

• space-x-{size}：子元素之间的水平间距

• space-y-{size}：子元素之间的垂直间距

2.3 颜色 (Colors)

• bg-{color}-{shade}：背景颜色，如 bg-blue-500、bg-gray-200

• text-{color}-{shade}：文本颜色，如 text-red-600、text-green-400

• border-{color}-{shade}：边框颜色，如 border-yellow-300

2.4 文本 (Typography)

• text-{size}：字体大小，如 text-sm、text-lg、text-xl

• font-{weight}：字体粗细，如 font-bold、font-light

• text-{alignment}：文本对齐，如 text-left、text-center、text-right

• leading-{size}：行高，如 leading-tight、leading-loose

2.5 边框 (Borders)

• border：添加边框

• border-{width}：边框宽度，如 border-2、border-4

• rounded-{size}：圆角，如 rounded-lg、rounded-full

• border-{color}：边框颜色，如 border-blue-500

2.6 阴影 (Shadows)

• shadow-{size}：添加阴影，如 shadow-sm、shadow-lg

• shadow-{color}：阴影颜色，如 shadow-blue-500

2.7 响应式设计 (Responsive Design)

Tailwind 使用断点前缀来控制不同屏幕尺寸下的样式：

• sm:：小屏幕（≥ 640px）

• md:：中等屏幕（≥ 768px）

• lg:：大屏幕（≥ 1024px）

• xl:：超大屏幕（≥ 1280px）

• 2xl:：超大屏幕（≥ 1536px）

例如：

<div class="text-center sm:text-left md:text-right">
  响应式文本对齐
</div>

2.8 伪类和状态 (Pseudo-classes and States)

Tailwind 支持伪类和状态前缀，如 hover:、focus:、active: 等：

• hover:bg-blue-500：鼠标悬停时背景变为蓝色

• focus:ring-2：聚焦时添加环形阴影

• active:scale-95：点击时缩小元素

例如：

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2">
  点击我
</button>

3. 自定义配置

Tailwind 允许通过 tailwind.config.js 文件进行自定义配置，例如添加自定义颜色、断点、字体等。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1fb6ff',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
  variants: {},
  plugins: [],
}