Back to Details

tailwindcss

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS

Tailwind CSS

Tailwind v4 (2024/2025) introduces the Oxide Engine: a Rust-based, unified toolchain that is 10x faster and requires no configuration (
tailwind.config.js
is optional).
Tailwind v4（2024/2025）引入了Oxide Engine：一个基于Rust的统一工具链，速度提升10倍，且无需配置（
tailwind.config.js
为可选文件）。

When to Use

适用场景

  • Custom Design: When you don't want the "Bootstrap look".
  • Performance: Generates tiny CSS files (only used classes).
  • Design Systems: Configuring tokens (colors, spacing) enforces consistency.
  • 自定义设计：当你不想使用“Bootstrap风格”时。
  • 性能优化：生成体积极小的CSS文件（仅包含已使用的类）。
  • 设计系统：配置令牌（颜色、间距）可确保设计一致性。

Core Concepts

核心概念

Utility Classes

实用类

flex
, 
text-red-500
, 
p-4
.
flex
, 
text-red-500
, 
p-4
.

Arbitrary Values

任意值

w-[500px]
, 
bg-[#1da1f2]
.
w-[500px]
, 
bg-[#1da1f2]
.

Modifiers

修饰符

hover:bg-blue-700
, 
md:w-1/2
, 
dark:text-white
.
hover:bg-blue-700
, 
md:w-1/2
, 
dark:text-white
.

Best Practices (2025)

2025年最佳实践

Do:
  • Use v4 Oxide: No more separate PostCSS watcher needed.
  • Use 
    @apply
    sparingly    : Keep utilities in HTML for grep-ability.
  • Use 
    prettier-plugin-tailwindcss
    : Automatically sorts classes.
Don't:
  • Don't string concat: 
    class="text-" + color
    breaks the purge engine. Use 
    clsx
    .
推荐做法:
  • 使用v4版本的Oxide引擎：不再需要单独的PostCSS监听器。
  • 谨慎使用
    @apply
    ：将实用类保留在HTML中，便于搜索查找。
  • 使用
    prettier-plugin-tailwindcss
    ：自动对类进行排序。
不推荐做法:
  • 不要拼接字符串：
    class="text-" + color
    会破坏清除引擎。请使用
    clsx
    。

References

参考资料