Tailwind CSS 颜色

Tailwind CSS 开箱即用地包含了一个庞大而美观的颜色调色板，由设计师精心制作，适用于各种不同的设计风格。

基本用法

默认调色板中的每种颜色都包含 11 个级别，其中 50 最浅，950 最深。

<div>
  <div class="bg-sky-50"></div>
  <div class="bg-sky-100"></div>
  <div class="bg-sky-200"></div>
  <div class="bg-sky-300"></div>
  <div class="bg-sky-400"></div>
  <div class="bg-sky-500"></div>
  <div class="bg-sky-600"></div>
  <div class="bg-sky-700"></div>
  <div class="bg-sky-800"></div>
  <div class="bg-sky-900"></div>
  <div class="bg-sky-950"></div>
</div>

调整不透明度

可以使用类似 bg-black/75 的语法来调整颜色的不透明度，其中 75 将颜色的 alpha 通道设置为 75%。

<div>
  <div class="bg-sky-500/10"></div>
  <div class="bg-sky-500/20"></div>
  <div class="bg-sky-500/30"></div>
  <div class="bg-sky-500/40"></div>
  <div class="bg-sky-500/50"></div>
  <div class="bg-sky-500/60"></div>
  <div class="bg-sky-500/70"></div>
  <div class="bg-sky-500/80"></div>
  <div class="bg-sky-500/90"></div>
  <div class="bg-sky-500/100"></div>
</div>

此语法还支持任意值和 CSS 变量简写。

<div class="bg-pink-500/[71.37%]"><!-- ... --></div>
<div class="bg-cyan-400/(--my-alpha-value)"><!-- ... --></div>