Ring Color

Utilities for setting the color of outline rings.

Default class reference

Usage

Use the ring-{color} utilities to set the color of an outline ring.

<button class="... ring-4 ring-indigo-300">
  Button
</button>

Changing opacity

You can control the opacity of rings using the ring-opacity-{amount} utilities:

<button class="... ring-4 ring-yellow-500 ring-opacity-50">
  Button
</button>

For more information, see the ringOpacity documentation.

Responsive

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

<button class="ring-2 ring-blue-300 md:ring-blue-500">
  <!-- ... -->
</button>

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

Customizing

You can customize which ring color utilities are generated by customizing your color palette using the colors key in the theme section of your tailwind.config.js file:

// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    colors: {
      gray: colors.blueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.yellow,
    }
  }
}

If you’d like to customize only the ring color utilities without affecting your global color palette, use the ringColor key instead:

// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    ringColor: {
      white: colors.white,
      pink: colors.fuchsia,
    }
  }
}

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

Variants

By default, only responsive, dark mode (if enabled), focus-within and focus variants are generated for ring color utilities.

You can control which variants are generated for the ring color utilities by modifying the ringColor property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and active variants:

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

Disabling

If you don’t plan to use the ring color utilities in your project, you can disable them entirely by setting the ringColor property to false in the corePlugins section of your config file:

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

←Ring Width Ring Opacity→

Edit this page on GitHub