Tailwind CSS 轮廓

轮廓

用于控制元素轮廓的功能类。

移除轮廓

使用 ​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'],
        }
      }
    }
  }

变体

默认情况下， 针对 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'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 outline 功能，您可以通过在配置文件的 ​corePlugins ​部分将 ​outline ​属性设置为 ​false ​来完全禁用它们：

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