Tailwind CSS 是一个实用优先的 CSS 框架，提供了许多用于快速构建 UI 的预定义类。以下是 Tailwind CSS 的所有主要规则分类，以及它们的常见用法：

1. 布局 (Layout)

  • Container: container
  • Display: block, inline-block, inline, flex, inline-flex, grid, inline-grid, hidden
  • Float: float-left, float-right, float-none
  • Clear: clear-left, clear-right, clear-both, clear-none
  • Object Fit: object-contain, object-cover, object-fill, object-none, object-scale-down
  • Object Position: object-bottom, object-center, object-left, object-left-bottom, object-left-top, object-right, object-right-bottom, object-right-top, object-top
  • Overflow: overflow-auto, overflow-hidden, overflow-visible, overflow-scroll, overflow-x-auto, overflow-y-auto
  • Overscroll Behavior: overscroll-auto, overscroll-contain, overscroll-none
  • Position: static, fixed, absolute, relative, sticky
  • Top / Right / Bottom / Left: top-0, top-1, right-0, right-1, bottom-0, bottom-1, left-0, left-1
  • Visibility: visible, invisible, collapse
  • Z-Index: z-0, z-10, z-20, z-30, z-auto

2. 间距 (Spacing)

  • Padding: p-0, p-1, p-2, py-1, px-1, pt-1, pr-1, pb-1, pl-1
  • Margin: m-0, m-1, m-2, my-1, mx-1, mt-1, mr-1, mb-1, ml-1
  • Space Between: space-x-0, space-x-1, space-y-0, space-y-1

3. 大小 (Sizing)

  • Width: w-0, w-1, w-2, w-1/2, w-full, w-screen, max-w-xs, max-w-sm, max-w-md
  • Height: h-0, h-1, h-2, h-1/2, h-full, h-screen, max-h-xs, max-h-sm, max-h-md
  • Min Width/Height: min-w-0, min-w-full, min-h-0, min-h-full

4. 排版 (Typography)

  • Font Family: font-sans, font-serif, font-mono
  • Font Size: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl
  • Font Smoothing: antialiased, subpixel-antialiased
  • Font Style: italic, not-italic
  • Font Weight: font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black
  • Letter Spacing: tracking-tighter, tracking-tight, tracking-normal, tracking-wide
  • Line Height: leading-none, leading-tight, leading-snug, leading-normal, leading-loose
  • Text Align: text-left, text-center, text-right, text-justify
  • Text Color: text-transparent, text-black, text-white, text-red-500, text-green-500
  • Text Opacity: text-opacity-0, text-opacity-25, text-opacity-50, text-opacity-75, text-opacity-100
  • Text Decoration: underline, line-through, no-underline
  • Text Transform: uppercase, lowercase, capitalize, normal-case
  • Vertical Align: align-baseline, align-top, align-middle, align-bottom
  • Whitespace: whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line
  • Word Break: break-normal, break-words, break-all

5. 背景 (Background)

  • Background Attachment: bg-fixed, bg-local, bg-scroll
  • Background Clip: bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text
  • Background Color: bg-transparent, bg-black, bg-white, bg-red-500, bg-green-500
  • Background Opacity: bg-opacity-0, bg-opacity-25, bg-opacity-50, bg-opacity-75, bg-opacity-100
  • Background Position: bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top
  • Background Repeat: bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space
  • Background Size: bg-auto, bg-cover, bg-contain
  • Gradient Color Stops: from-blue-500, via-red-500, to-yellow-500

6. 边框 (Borders)

  • Border Radius: rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-full
  • Border Width: border, border-0, border-2, border-4, border-8
  • Border Color: border-transparent, border-black, border-white, border-red-500, border-green-500
  • Border Opacity: border-opacity-0, border-opacity-25, border-opacity-50, border-opacity-75, border-opacity-100
  • Border Style: border-solid, border-dashed, border-dotted, border-double, border-none
  • Divide Width: divide-x, divide-y, divide-x-reverse, divide-y-reverse
  • Divide Color: divide-transparent, divide-black, divide-white, divide-red-500, divide-green-500
  • Divide Style: divide-solid, divide-dashed, divide-dotted, divide-double, divide-none
  • Ring Width: ring, ring-0, ring-1, ring-2, ring-4, ring-8, ring-inset
  • Ring Color: ring-transparent, ring-black, ring-white, ring-red-500, ring-green-500
  • Ring Opacity: ring-opacity-0, ring-opacity-25, ring-opacity-50, ring-opacity-75, ring-opacity-100
  • Ring Offset Width: ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8
  • Ring Offset Color: ring-offset-transparent, ring-offset-black, ring-offset-white, ring-offset-red-500, ring-offset-green-500

7. 效果 (Effects)

  • Box Shadow: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl
  • Box Shadow Color: shadow-transparent, shadow-black, shadow-white, shadow-red-500, shadow-green-500
  • Opacity: opacity-0, opacity-25, opacity-50, opacity-75, opacity-100
  • Mix Blend Mode: mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten
  • Background Blend Mode: bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten

8. 表单 (Forms)（续）

  • Outline: outline-none, outline, outline-dashed, outline-solid, outline-double
  • Pointer Events: pointer-events-none, pointer-events-auto
  • Resize: resize-none, resize, resize-y, resize-x
  • User Select: select-none, select-text, select-all, select-auto

9. 表格 (Tables)

  • Border Collapse: border-collapse, border-separate
  • Table Layout: table-auto, table-fixed

10. 过渡与动画 (Transitions and Animation)

  • Transition Property: transition-none, transition-all, transition
  • Transition Duration: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000
  • Transition Timing Function: ease-linear, ease-in, ease-out, ease-in-out
  • Transition Delay: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, delay-700, delay-1000
  • Animation: animate-none, animate-spin, animate-ping, animate-pulse, animate-bounce

11. 转换 (Transforms)

  • Transform: transform, transform-gpu, transform-none
  • Transform Origin: origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left
  • Scale: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
  • Rotate: rotate-0, rotate-45, rotate-90, rotate-180
  • Translate: translate-x-0, translate-x-1, translate-x-2, translate-x-3, translate-x-4, translate-y-0, translate-y-1, translate-y-2, translate-y-3, translate-y-4
  • Skew: skew-x-0, skew-x-3, skew-x-6, skew-x-12, skew-y-0, skew-y-3, skew-y-6, skew-y-12

12. 网格 (Grid)

  • Grid Template Columns: grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12, grid-cols-none
  • Grid Column: col-auto, col-span-1, col-span-2, col-span-3, col-span-4, col-span-5, col-span-6, col-span-7, col-span-8, col-span-9, col-span-10, col-span-11, col-span-12
  • Grid Column Start / End: col-start-1, col-start-2, col-start-3, col-start-auto, col-end-1, col-end-2, col-end-3, col-end-auto
  • Grid Template Rows: grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6, grid-rows-none
  • Grid Row: row-auto, row-span-1, row-span-2, row-span-3, row-span-4, row-span-5, row-span-6
  • Grid Row Start / End: row-start-1, row-start-2, row-start-3, row-start-auto, row-end-1, row-end-2, row-end-3, row-end-auto
  • Gap: gap-0, gap-1, gap-2, gap-4, gap-6, gap-8, gap-10, gap-12, gap-x-0, gap-x-1, gap-x-2, gap-x-4, gap-y-0, gap-y-1, gap-y-2, gap-y-4

13. 弹性盒 (Flexbox)

  • Flex Direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse
  • Flex Wrap: flex-no-wrap, flex-wrap, flex-wrap-reverse
  • Flex: flex-1, flex-auto, flex-initial, flex-none
  • Flex Grow: grow, grow-0
  • Flex Shrink: shrink, shrink-0
  • Order: order-1, order-2, order-3, order-first, order-last, order-none
  • Justify Content: justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly
  • Align Items: items-start, items-end, items-center, items-baseline, items-stretch
  • Align Content: content-start, content-end, content-center, content-between, content-around, content-evenly
  • Align Self: self-auto, self-start, self-end, self-center, self-stretch

14. 间隔 (Space Between)

  • Space Between X-Axis: space-x-0, space-x-1, space-x-2, space-x-4, space-x-6, space-x-8, space-x-10
  • Space Between Y-Axis: space-y-0, space-y-1, space-y-2, space-y-4, space-y-6, space-y-8, space-y-10
  • Reverse X-Axis: space-x-reverse
  • Reverse Y-Axis: space-y-reverse

15. 交互状态 (Interactivity)

  • Appearance: appearance-none
  • Cursor: cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-not-allowed
  • Outline: outline-none, outline, outline-dashed, outline-solid, outline-double
  • Pointer Events: pointer-events-none, pointer-events-auto
  • Resize: resize-none, resize, resize-y, resize-x
  • User Select: select-none, select-text, select-all, select-auto

16. SVG (SVG)

  • Fill: fill-current
  • Stroke: stroke-current
  • Stroke Width: stroke-0, stroke-1, stroke-2

17. 辅助 (Accessibility)

  • Screen Readers: sr-only, not-sr-only

18. 响应式设计 (Responsive Design)

  • Tailwind 提供的断点前缀：
    • sm: (min-width: 640px)
    • md: (min-width: 768px)
    • lg: (min-width: 1024px)
    • xl: (min-width: 1280px)
    • 2xl: (min-width: 1536px)

19. 伪类 (Pseudo-Classes)

  • 状态: hover:, focus:, active:, disabled:, visited:
  • 表单: checked:, focus-within:, focus-visible:, indeterminate:
  • 子选择器: first:, last:, odd:, even:
  • 其他: group-hover:, group-focus:, group-active:, group-disabled:, group-visited:, group-checked:, group-first:, group-last:, group-odd:, group-even:

20. 自定义规则

定制 Tailwind CSS 可以让你根据项目的需求自定义样式、颜色、间距等设置。定制 Tailwind CSS 通常通过以下几种方式进行：

1. 使用 Tailwind 配置文件

你可以通过生成一个 tailwind.config.js 文件来定制 Tailwind。这个文件允许你覆盖默认的 Tailwind 设置，添加自定义的颜色、间距、断点等。

生成配置文件：

npx tailwindcss init

这会生成一个基础的 tailwind.config.js 文件。你可以根据需要进行修改。

示例：

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4a',
        danger: '#e3342f',
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
}

2. 扩展默认主题

extend 关键字允许你在保留 Tailwind 默认设置的同时添加新的样式。

示例：

module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1fb6ff',
      },
      fontSize: {
        'xxs': '0.65rem',
      },
    },
  },
}

3. 完全替换默认主题

如果想要完全替换 Tailwind 的某些部分，可以在 theme 配置项中直接定义。

示例：

module.exports = {
  theme: {
    colors: {
      primary: '#ff6363',
      secondary: '#3b82f6',
    },
    spacing: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '32px',
    },
  },
}

4. 定制断点

你可以自定义 Tailwind 的响应式断点。

示例：

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
}

5. 添加插件

Tailwind 允许你添加插件来扩展功能或添加新的实用类。

示例：

// 安装插件
npm install @tailwindcss/forms

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

6. 在 CSS 中直接使用 @apply

@apply 指令允许你在 CSS 文件中复用 Tailwind 的实用类。

示例：

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

7. 移除未使用的样式 (PurgeCSS)

通过配置 content 选项，可以移除生产环境中未使用的样式，从而减少 CSS 文件大小。

示例：

module.exports = {
  content: ['./src/**/*.{html,js}'],
}

8. 定制 Tailwind 的基础文件

如果你使用了 Tailwind CLI 或者 PostCSS，你可以通过编辑 Tailwind 的基础文件来定制样式。

示例：

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

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
}

通过这些方法，你可以轻松地将 Tailwind CSS 定制为满足项目特定需求的样式库。