ring-4

The ring-4 class belongs to the ring width group within the borders category.

Example Usage

Here is an example of how to use ring-4:

<input type='text' class='ring-4 ring-indigo-500 ring-offset-2 ring-offset-amber-500'>

Resulting CSS

--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

Other Ring width Classes

ring ring-0 ring-1 ring-2 ring-8 ring-inset

View other Borders classes

Get Tailwind Scanner!

The absolute must-have tool for anyone using Tailwind CSS.

Scan, Edit, Export any tailwind site in browser to create the perfect UI - download the chrome extension!