Introduction

Tailwind CSS is a utility-first CSS framework that lets you build custom designs directly in your HTML. This guide covers the most commonly used Tailwind utility classes with simple visual examples.

Tailwind CSS 是一个实用优先的 CSS 框架，让您直接在 HTML 中构建设计。本指南涵盖排版、颜色、间距和布局中最常用的 Tailwind 实用类。

Text Sizing

Tailwind provides a comprehensive set of text sizing utilities. Each size corresponds to a specific font-size and line-height combination.

Tailwind 提供了一套完整的文字大小工具。

Available Sizes

Responsive Heading

Use responsive prefixes (sm:, md:, lg:) to change text size across breakpoints.

使用响应式前缀在不同断点调整字号。

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

Text & Background Colors

Theme Color Palette

Text Colors

Font Weight & Alignment

Font Weight

Text Alignment

Spacing

Use m-* for margin and p-* for padding. Each unit equals 0.25rem.

使用 m-* 表示外边距，p-* 表示内边距。

Padding

Margin

Margin classes work the same way — mt-4 (top), mb-6 (bottom), mx-auto (horizontal centering).

Margin 类用法相同 — mt-4（上）、mb-6（下）、mx-auto（水平居中）。

<div class="mx-auto max-w-md p-4 bg-info rounded-lg">
  This box is centered and has a max width
</div>

Borders & Shadows

Border & Rounded Corners

Shadow Levels

Layout

Flexbox

Flexbox is used for one-dimensional layouts (rows or columns).

Flexbox 用于一维布局（行或列）。

<!-- Row with space between -->
<div class="flex justify-between items-center">
  <span>Logo</span>
  <span>Menu</span>
</div>

<!-- Column on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

<!-- Perfect center -->
<div class="flex justify-center items-center">
  Centered content
</div>

Grid

Grid is used for two-dimensional layouts.

Grid 用于二维布局。

<!-- 2 columns on mobile, 4 columns on desktop -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <div>Card A</div>
  <div>Card B</div>
  <div>Card C</div>
  <div>Card D</div>
</div>

Common Combinations

These are reusable patterns combining the utilities above.

这些是组合上述工具类的可复用组件模式。

Hero Section

<section class="py-12 text-center">
  <h1 class="text-2xl md:text-4xl lg:text-5xl font-bold mb-4 text-primary">
    Your Product Name
  </h1>
  <p class="text-base md:text-lg text-muted max-w-xl mx-auto mb-6 px-4">
    A short description of what you offer and why it matters to your customers.
  </p>
  <div class="flex flex-col sm:flex-row justify-center gap-3 px-4">
    <button class="bg-primary text-white px-8 py-3 rounded-lg font-medium">
      Get Started
    </button>
    <button class="bg-white text-primary px-8 py-3 rounded-lg font-medium border border-primary">
      Learn More
    </button>
  </div>
</section>

Feature Card Grid

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="p-6 bg-white rounded-lg shadow border border-gray-100 text-center">
    <h4 class="font-bold mb-1">Fast</h4>
    <p class="text-muted text-sm">Optimized performance and page speed.</p>
  </div>
  <div class="p-6 bg-white rounded-lg shadow border border-gray-100 text-center">
    <h4 class="font-bold mb-1">Modern</h4>
    <p class="text-muted text-sm">Built with the latest web technologies.</p>
  </div>
  <div class="p-6 bg-white rounded-lg shadow border border-gray-100 text-center">
    <h4 class="font-bold mb-1">Focused</h4>
    <p class="text-muted text-sm">Designed for specific developer needs.</p>
  </div>
</div>

Quick Reference

Conclusion

Tailwind CSS utilities provide a fast and consistent way to style your Palo website. By combining text sizing, colors, spacing, and layout classes, you can create professional designs without writing custom CSS.

Tailwind CSS 工具类提供了快速且一致的方式来设置您的 Palo 网站样式。通过组合文字大小、颜色、间距和布局类，您可以创建专业的设计。

Want to go deeper? Check the official Tailwind CSS Documentation for hundreds of additional utilities.

想深入了解？ 查看官方 Tailwind CSS 文档 了解更多工具类。