一文搞懂 Tailwind text-red-500 在哪定义、怎么用

<TrashIcon className="text-red-500"/>

其中text-red-500类有在哪里声明吗？我如何知道我希望红色就使用text-red-500？

首先text-red-500 是 Tailwind CSS 的内置工具类，不需要你手动声明

Tailwind CSS 预定义了一套完整的颜色系统，命名规则为：

{属性前缀}-{颜色名}-{色阶}

• text- → 设置 color 属性（文字颜色）
• bg- → 设置 background-color
• border- → 设置 border-color
• red → 红色系
• 500 → 色阶（100 最浅 → 950 最深）

色阶参考

色阶	深浅
100	极浅（接近白）
300	浅色
500	标准色（最常用）
700	深色
900	极深（接近黑）

然后，如何知道用哪个类呢？

方法一：查阅官方文档

• 颜色列表：tailwindcss.com/docs/custom…
• 文字颜色：tailwindcss.com/docs/text-c…
  

方法二：安装 VS Code 插件

安装 Tailwind CSS IntelliSense，输入 text- 时会自动提示所有可用颜色，并显示颜色预览。