Rings

go.raybo.org/2cDr

Rings are very similar to borders, but use shadows instead and some options that are slightly different.

Ring Width

  • ring(-AMT)
    • AMT (--tw-ring-offset-width)

      0 1 2 4 8 inset

Docs Try it

There are four sizes besides 0, but interestingly enough, if you just use ring without a size you get an extra size, which is the equivalent of three pixels. You can also add an inset option to any of these sizes to make the box shadow display inside.

Ring Opacity

  • ring-opacity-AMT
    • AMT (--tw-ring-opacity)

      0 5 10 20 25 30 40 50
      60 70 75 80 90 95 100

Docs Try it

Opacity is similar to the border opacity with each value listed here being the equivalent in decimal measurements. So 20 means an opacity of .2. Again the nice thing here is that you can do the opacity of just the outline in the same place that you set the background color and border with. It's part of Tailwind's charm by using a variable.

Ring Color

  • ring-COL-STR
    transparent transparent black white
    gray red yellow green blue indigo purple pink
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900

Docs Try it

Colors and it's options are exactly the same as borders, so there's not much to say here, other than the default color for a ring is blue, so if you don't specify a color, but have a ring, it will be a light blue.

Just like with the ring color, a variable controls the color so that you can set all options at the same level.

Ring Offset Width

  • ring-offset-WDT
    • WDT (--tw-ring-offset-width)

      0 1 2 4 8

Docs Try it

The offset width lets you simulate an offset of the ring by adding a solid white border of a certain size.

Ring Offset Color

  • ring-offset-COL-STR
    transparent transparent black white
    gray red yellow green blue indigo purple pink
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900

Docs Try it

You can also set the color of the ring's space to whatever color you want, which gives you some other options for styles. The color are the usual variables, which includes black, white and transparent, plus the current color option as well.

Ring Focus Variants

  • focus:

Docs Try it

There are two other properties you can use to modify the rings. These are prefixes that you use as modifier. Focus lets you control the look fields when they gain focus, so this is really good for things like buttons and other input fields in forms.

By default, rings are drawn on the outside of an element, but there's a variant you can use to switch that so it displays inside the element.