轮廓颜色

​基础用法

​设置轮廓颜色

使用 outline-* 实用程序来更改元素轮廓的颜色。

<button class="outline outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline outline-offset-2 outline-pink-500 ...">Button C</button>

​更改不透明度

使用颜色不透明度修饰符来控制元素轮廓颜色的不透明度。

<button class="outline-2 outline-blue-500/50 ...">Save Changes</button>

您可以使用 opacity scale 中定义的任何值，或者如果您需要偏离设计令牌，则可以使用任意值。

<button class="outline-4 outline-pink-400/[.55] ..."></button>

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:outline-blue-400 来仅 在 hover应用 outline-blue-400.

<button class="outline hover:outline-blue-400">
  <!-- ... -->
</button>

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:outline-blue-400 来应用 outline-blue-400 程序，适用于中等屏幕尺寸及以上。

<button class="outline md:outline-blue-400">
  <!-- ... -->
</button>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

​使用自定义值

​定制你的主题

By default, Tailwind makes the entire default color palette available as outline colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your outline colors by editing theme.outlineColor or theme.extend.outlineColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

​任意值

如果您需要使用一次性的 outline-color值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

<button class="outline-[#243c5a]">
  <!-- ... -->
</button>

进一步了解，请参考 任意值 文档.