轮廓 - Tailwind CSS 中文文档

Default class reference

Class	Properties
outline-none	outline: 2px solid transparent; outline-offset: 2px;
outline-white	outline: 2px dotted white; outline-offset: 2px;
outline-black	outline: 2px dotted black; outline-offset: 2px;

移除轮廓

使用 outline-none 来隐藏焦点元素的默认浏览器轮廓。

强烈建议在使用这个功能时，应用您自己的焦点样式来实现可访问性。

<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="focus:outline-none focus:ring focus:border-blue-300 ..." />

outline-none 功能类是使用透明的轮廓（transparent outline）来实现的，以确保元素在 Windows 高对比度模式用户看来仍有明显的焦点。

点状轮廓

使用 outline-white 和 outline-black 功能类在元素周围添加一个 2px 的点状边框，并有 2px 的偏移。如果您不想设计自己的风格，这些功能类可以作为一种通用的自定义焦点风格。

<button class="focus:outline-black ...">Button A</button>
<button class="focus:outline-white ...">Button B</button>

自定义

Outlines

默认情况下，Tailwind 提供了三个 outline 功能类。您可以通过编辑您的 tailwind.config.js 文件中的 theme.outline 部分来定制这些功能类。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: '2px solid #0000ff',
        }
      }
    }
  }

您也可以使用 [outline, outlineOffset] 形式的元组为任何自定义的 outline 功能提供一个 outlineOffset (偏移)值。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
    }
  }

Variants

默认情况下，针对 outline 功能类，只生成 responsive, focus-within and focus 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 outline 属性来控制为 outline 功能生成哪些变体。

例如，这个配置也将生成 hover and active 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       outline: ['hover', 'active'],
      }
    }
  }

Disabling

如果您不打算在您的项目中使用 outline 功能，您可以通过在配置文件的 corePlugins 部分将 outline property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     outline: false,
    }
  }

轮廓