Open In App
Related Articles

Tailwind CSS Ring Offset Width

Improve Article
Save Article
Like Article

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. This class is used to set the ring-offset width of buttons.

Ring Offset Width classes:

  • ring-offset-0: This class is used to deny the ring-offset.
  • ring-offset-1: This class is used to set the smallest ring-offset.
  • ring-offset-2: This class is used to set the medium ring-offset.
  • ring-offset-4: This class is used to set the large ring-offset.
  • ring-offset-8: This class is used to set the largest ring-offset.

Note: Currently the browsers are not supported by Tailwind CSS Ring Width, so for the output, I share the link of the output. (Tailwind CSS Playground)


<button class="ring-offset-{width}">...</button >



<!DOCTYPE html> 
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold"
    <b>Tailwind CSS Ring Offset Width Class</b
    <div class="mx-16 grid grid-cols-2 gap-6 p-2">
        <button class="ring-4 ring-green-600 ring-offset-4 
                       ring-offset-green-700 bg-green-400 
                       ring-opacity-25 w-full h-12 rounded-lg">
            ring-offset-4 ring-offset-green-700
        <button class="ring-4 ring-green-600 bg-green-400 
                       ring-offset-4 ring-offset-yellow-700
                       ring-opacity-25 w-full h-12 rounded-lg">
            ring-offset-4 ring-offset-yellow-700    



ring-offset width

Last Updated : 23 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials