Ring Width

Default class reference

Class	屬性
ring-0	box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1	box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2	box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring	box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4	box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8	box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset	--tw-ring-inset: inset;

Usage

Use the ring-{width} utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.

<button class="... ring-0">ring-0</button>
<button class="... ring-2">ring-2</button>
<button class="... ring">ring</button>
<button class="... ring-4">ring-4</button>

Ring utilities compose gracefully with regular shadow-{size} utilities and can be combined on the same element.

You can also control the color, opacity, and offset of rings using the ringColor, ringOpacity, and ringOffsetWidth utilities.

Focus rings

The focus variant is enabled for ring-{width} utilities by default, which makes it easy to use them for custom focus styles by adding focus: to the beginning of any ring-{width} utility.

<button class="... focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">
  Button
</button>

The focus variant is enabled by default for the ringColor, ringOpacity, ringOffsetWidth, and ringOffsetColor utilities as well.

Inset rings

Use the ring-inset utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn’t be visible.

<button class="... ring-4 ring-pink-300">
  Default
</button>

<button class="... ring-4 ring-pink-300 ring-inset">
  Inset
</button>

Responsive

To control the ring width at a specific breakpoint, add a {screen}: prefix to any existing ring width utility. For example, use md:ring-4 to apply the ring-4 utility at only medium screen sizes and above.

<button class="ring-2 md:ring-4">
  <!-- ... -->
</button>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

To customize which ring width utilities are generated, add your custom values under ringWidth key in the theme section of your tailwind.config.js file. You can use the DEFAULT key to specify which width is used for the plain ring utility.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringWidth: {
        'DEFAULT': '2px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}

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

Variants

默認情況下, 只有響應式、focus-within 和 focus 的 ring width 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 ringWidth 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成響應式和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 ring width 功能，可以在你的設定檔裡的 corePlugins 屬性中將 ringWidth 設定為 false 來停用功能：

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