Skip to content
Related Articles

Related Articles

Tailwind CSS Ring Offset Width

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!