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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

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