EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Backgrounds & Borders: Colors, Gradients, Border Radius, and Border Control

Background Color (bg-*)

bg-* classes set the background color of an element, supporting a rich set of preset colors and opacity.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Color Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Background Colors</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 text-white p-4 rounded text-center">red-500</div>
        <div class="bg-blue-500 text-white p-4 rounded text-center">blue-500</div>
        <div class="bg-green-500 text-white p-4 rounded text-center">green-500</div>
        <div class="bg-yellow-500 text-white p-4 rounded text-center">yellow-500</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">purple-500</div>
        <div class="bg-pink-500 text-white p-4 rounded text-center">pink-500</div>
        <div class="bg-indigo-500 text-white p-4 rounded text-center">indigo-500</div>
        <div class="bg-gray-500 text-white p-4 rounded text-center">gray-500</div>
      </div>
    </div>

    <!-- Color shades -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Color Shades (50-950)</h3>
      <div class="space-y-2">
        <div class="bg-blue-50 text-blue-900 p-3 rounded">blue-50</div>
        <div class="bg-blue-100 text-blue-900 p-3 rounded">blue-100</div>
        <div class="bg-blue-200 text-blue-900 p-3 rounded">blue-200</div>
        <div class="bg-blue-300 text-blue-900 p-3 rounded">blue-300</div>
        <div class="bg-blue-400 text-white p-3 rounded">blue-400</div>
        <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
        <div class="bg-blue-600 text-white p-3 rounded">blue-600</div>
        <div class="bg-blue-700 text-white p-3 rounded">blue-700</div>
        <div class="bg-blue-800 text-white p-3 rounded">blue-800</div>
        <div class="bg-blue-900 text-white p-3 rounded">blue-900</div>
        <div class="bg-blue-950 text-white p-3 rounded">blue-950</div>
      </div>
    </div>

    <!-- Opacity -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Background Opacity</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-blue-500/100 text-blue-900 p-4 rounded text-center">/100</div>
        <div class="bg-blue-500/75 text-blue-900 p-4 rounded text-center">/75</div>
        <div class="bg-blue-500/50 text-blue-900 p-4 rounded text-center">/50</div>
        <div class="bg-blue-500/25 text-blue-900 p-4 rounded text-center">/25</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Background color class reference:

Class CSS Value Description
bg-red-500 background-color: #ef4444 Red background
bg-blue-500 background-color: #3b82f6 Blue background
bg-transparent background-color: transparent Transparent background
bg-current background-color: currentColor Current text color
bg-white background-color: #fff White background
bg-black background-color: #000 Black background
bg-blue-500/50 background-color: rgb(59 130 246 / 0.5) Blue at 50% opacity

Traditional CSS vs Tailwind The traditional approach requires setting background-color in CSS and remembering hex values, whereas Tailwind uses semantic class names like bg-blue-500 for direct declaration. The /50 syntax supports opacity control.

💡 Tip: Color shades range from 50 (lightest) to 950 (darkest), with 500 being the standard shade. Use the /opacity syntax to quickly adjust transparency.

Gradient Backgrounds (bg-gradient-*)

Gradient backgrounds use bg-gradient-to-* to set the direction, combined with from-*, via-*, and to-* to set colors.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Background Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Linear gradient directions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Linear Gradient Directions</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-r (rightward)</div>
        <div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-l (leftward)</div>
        <div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-b (downward)</div>
        <div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-t (upward)</div>
        <div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-br (bottom-right)</div>
        <div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-bl (bottom-left)</div>
        <div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tr (top-right)</div>
        <div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tl (top-left)</div>
      </div>
    </div>

    <!-- Three-color gradients -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Three-Color Gradients (from-via-to)</h3>
      <div class="space-y-4">
        <div class="bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 text-white p-6 rounded text-center">Blue → Green → Purple</div>
        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white p-6 rounded text-center">Red → Yellow → Green</div>
        <div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white p-6 rounded text-center">Pink → Purple → Indigo</div>
      </div>
    </div>

    <!-- Practical examples -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Examples</h3>
      <div class="space-y-4">
        <!-- Gradient button -->
        <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          Gradient Button
        </button>
        <!-- Gradient card -->
        <div class="bg-gradient-to-br from-cyan-500 to-blue-600 text-white p-6 rounded-lg">
          <h4 class="text-xl font-bold mb-2">Gradient Card</h4>
          <p class="opacity-90">Use gradient backgrounds to create visual appeal</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Gradient class reference:

Class CSS Value Description
bg-gradient-to-r background-image: linear-gradient(to right, ...) Rightward gradient
bg-gradient-to-l background-image: linear-gradient(to left, ...) Leftward gradient
bg-gradient-to-b background-image: linear-gradient(to bottom, ...) Downward gradient
bg-gradient-to-t background-image: linear-gradient(to top, ...) Upward gradient
from-blue-500 --tw-gradient-from: #3b82f6 Start color
via-green-500 --tw-gradient-via: #22c55e Middle color
to-purple-500 --tw-gradient-to: #a855f7 End color

Traditional CSS vs Tailwind The traditional approach requires writing background-image: linear-gradient(to right, #3b82f6, #a855f7) in CSS, whereas Tailwind uses bg-gradient-to-r from-blue-500 to-purple-500 class names for direct declaration.

💡 Tip: via-* is an optional middle color. Without via-*, the gradient transitions directly from from-* to to-*.

Background Images (bg-*)

Background image classes use bg-* to set image path, size, and position.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Image Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Background image sizing -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Background Image Sizing</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="h-48 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-cover</div>
        </div>
        <div class="h-48 bg-contain bg-center bg-no-repeat rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-contain</div>
        </div>
      </div>
    </div>

    <!-- Background image position -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Background Image Position</h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="h-32 bg-cover bg-top rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-top</div>
        </div>
        <div class="h-32 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-center</div>
        </div>
        <div class="h-32 bg-cover bg-bottom rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-bottom</div>
        </div>
      </div>
    </div>

    <!-- Hero section -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Hero Section Example</h3>
      <div class="h-64 bg-cover bg-center rounded-lg relative" style="background-image: url('https://picsum.photos/800/400')">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/80 to-purple-600/80 rounded-lg"></div>
        <div class="relative h-full flex flex-col items-center justify-center text-white">
          <h2 class="text-3xl font-bold mb-4">Welcome to Our Website</h2>
          <p class="text-lg opacity-90">Create beautiful background effects with Tailwind CSS</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Background image class reference:

Class CSS Value Description
bg-cover background-size: cover Cover the container
bg-contain background-size: contain Fit within container
bg-auto background-size: auto Original size
bg-center background-position: center Centered
bg-top background-position: top Top-aligned
bg-bottom background-position: bottom Bottom-aligned
bg-no-repeat background-repeat: no-repeat No repeat
bg-repeat background-repeat: repeat Repeat (default)

Traditional CSS vs Tailwind The traditional approach requires setting multiple properties like background-size, background-position, and background-repeat in CSS, whereas Tailwind uses class names like bg-cover, bg-center, and bg-no-repeat for direct declaration.

💡 Tip: Use bg-gradient-to-r from-blue-600/80 to-purple-600/80 to overlay a gradient mask on background images, improving text readability.

Border Radius (rounded-*)

rounded-* classes set the border radius of an element.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Radius Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic border radius -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Border Radius</h3>
      <div class="flex flex-wrap gap-4 items-end">
        <div class="w-24 h-24 bg-blue-500 rounded-none flex items-center justify-center text-white text-xs">rounded-none</div>
        <div class="w-24 h-24 bg-blue-500 rounded-sm flex items-center justify-center text-white text-xs">rounded-sm</div>
        <div class="w-24 h-24 bg-blue-500 rounded flex items-center justify-center text-white text-xs">rounded</div>
        <div class="w-24 h-24 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs">rounded-md</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xs">rounded-lg</div>
        <div class="w-24 h-24 bg-blue-500 rounded-xl flex items-center justify-center text-white text-xs">rounded-xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-2xl flex items-center justify-center text-white text-xs">rounded-2xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">rounded-full</div>
      </div>
    </div>

    <!-- Side-specific border radius -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Side-Specific Border Radius</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-500 rounded-t-lg flex items-center justify-center text-white text-sm">rounded-t-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-r-lg flex items-center justify-center text-white text-sm">rounded-r-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-b-lg flex items-center justify-center text-white text-sm">rounded-b-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-l-lg flex items-center justify-center text-white text-sm">rounded-l-lg</div>
      </div>
    </div>

    <!-- Corner-specific border radius -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Corner-Specific Border Radius</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-500 rounded-tl-lg flex items-center justify-center text-white text-sm">rounded-tl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-tr-lg flex items-center justify-center text-white text-sm">rounded-tr-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-bl-lg flex items-center justify-center text-white text-sm">rounded-bl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-br-lg flex items-center justify-center text-white text-sm">rounded-br-lg</div>
      </div>
    </div>

    <!-- Practical examples -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Examples</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">Avatar</div>
        <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">Rounded Button</button>
        <div class="bg-gray-200 px-4 py-2 rounded-full text-sm">Tag</div>
        <div class="bg-orange-500 w-4 h-4 rounded-full"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Border radius class reference:

Class CSS Value Description
rounded-none border-radius: 0 No rounding
rounded-sm border-radius: 0.125rem Small radius
rounded border-radius: 0.25rem Default radius
rounded-md border-radius: 0.375rem Medium radius
rounded-lg border-radius: 0.5rem Large radius
rounded-xl border-radius: 0.75rem Extra-large radius
rounded-2xl border-radius: 1rem 2x extra-large radius
rounded-full border-radius: 9999px Fully rounded (circle)
rounded-t-lg Top radius 0.5rem Top side only
rounded-r-lg Right radius 0.5rem Right side only
rounded-b-lg Bottom radius 0.5rem Bottom side only
rounded-l-lg Left radius 0.5rem Left side only
rounded-tl-lg Top-left radius 0.5rem Top-left corner only
rounded-tr-lg Top-right radius 0.5rem Top-right corner only
rounded-bl-lg Bottom-left radius 0.5rem Bottom-left corner only
rounded-br-lg Bottom-right radius 0.5rem Bottom-right corner only

Traditional CSS vs Tailwind The traditional approach requires setting the border-radius property in CSS, whereas Tailwind uses class names like rounded-lg and rounded-full for direct declaration. Side-specific and corner-specific rounding uses rounded-t-lg, rounded-tl-lg, etc.

💡 Tip: rounded-full is used to create circular avatars, round buttons, etc. Combined with equal width and height, it creates perfect circles.

Borders (border-*)

border-* classes set the border width, color, and style of an element.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Border width -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Width</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-0 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-0</div>
        <div class="w-24 h-24 border border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border</div>
        <div class="w-24 h-24 border-2 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-2</div>
        <div class="w-24 h-24 border-4 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-4</div>
        <div class="w-24 h-24 border-8 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-8</div>
      </div>
    </div>

    <!-- Border color -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Color</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-2 border-red-500 flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 border-2 border-blue-500 flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 border-2 border-green-500 flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 border-2 border-purple-500 flex items-center justify-center text-xs">purple</div>
        <div class="w-24 h-24 border-2 border-gray-300 flex items-center justify-center text-xs">gray</div>
      </div>
    </div>

    <!-- Side-specific borders -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Side-Specific Borders</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-t-4 border-blue-500 flex items-center justify-center text-sm">border-t-4</div>
        <div class="w-32 h-24 border-r-4 border-green-500 flex items-center justify-center text-sm">border-r-4</div>
        <div class="w-32 h-24 border-b-4 border-purple-500 flex items-center justify-center text-sm">border-b-4</div>
        <div class="w-32 h-24 border-l-4 border-orange-500 flex items-center justify-center text-sm">border-l-4</div>
      </div>
    </div>

    <!-- Border style -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Style</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-2 border-solid border-blue-500 flex items-center justify-center text-sm">border-solid</div>
        <div class="w-32 h-24 border-2 border-dashed border-blue-500 flex items-center justify-center text-sm">border-dashed</div>
        <div class="w-32 h-24 border-2 border-dotted border-blue-500 flex items-center justify-center text-sm">border-dotted</div>
        <div class="w-32 h-24 border-2 border-double border-blue-500 flex items-center justify-center text-sm">border-double</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Border class reference:

Class CSS Value Description
border-0 border-width: 0 No border
border border-width: 1px 1px border
border-2 border-width: 2px 2px border
border-4 border-width: 4px 4px border
border-8 border-width: 8px 8px border
border-blue-500 border-color: #3b82f6 Blue border
border-t-4 border-top-width: 4px Top border 4px
border-solid border-style: solid Solid border
border-dashed border-style: dashed Dashed border
border-dotted border-style: dotted Dotted border

Traditional CSS vs Tailwind The traditional approach requires setting multiple properties like border-width, border-color, and border-style in CSS, whereas Tailwind uses class names like border-2, border-blue-500, and border-dashed for direct declaration.

Dividers (divide-*)

divide-* classes add dividers between child elements without needing to set borders on each child individually.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Divider Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Vertical dividers -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Vertical Dividers (Horizontal Layout)</h3>
      <div class="flex divide-x divide-gray-300">
        <div class="flex-1 p-4 text-center">Item 1</div>
        <div class="flex-1 p-4 text-center">Item 2</div>
        <div class="flex-1 p-4 text-center">Item 3</div>
        <div class="flex-1 p-4 text-center">Item 4</div>
      </div>
    </div>

    <!-- Horizontal dividers -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Horizontal Dividers (Vertical Layout)</h3>
      <div class="divide-y divide-gray-300">
        <div class="p-4">Item 1</div>
        <div class="p-4">Item 2</div>
        <div class="p-4">Item 3</div>
        <div class="p-4">Item 4</div>
      </div>
    </div>

    <!-- Different colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dividers in Different Colors</h3>
      <div class="space-y-4">
        <div class="divide-y divide-blue-300">
          <div class="p-3">Blue divider</div>
          <div class="p-3">Item 2</div>
        </div>
        <div class="divide-y divide-green-300">
          <div class="p-3">Green divider</div>
          <div class="p-3">Item 2</div>
        </div>
        <div class="divide-y divide-purple-300">
          <div class="p-3">Purple divider</div>
          <div class="p-3">Item 2</div>
        </div>
      </div>
    </div>

    <!-- Practical example: list -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Example: List</h3>
      <div class="divide-y divide-gray-200">
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">John Doe</div>
            <div class="text-sm text-gray-500">john@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">Edit</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Jane Smith</div>
            <div class="text-sm text-gray-500">jane@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">Edit</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Bob Johnson</div>
            <div class="text-sm text-gray-500">bob@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">Edit</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting border-bottom on each child element and handling the last element's border separately. Tailwind's divide-* automatically adds dividers between child elements with no extra handling needed.

💡 Tip: divide-y adds horizontal dividers between child elements, while divide-x adds vertical dividers. Note that the direction is the opposite of the flex direction.

Ring Outlines (ring-*)

ring-* classes add a ring outline around an element. Similar to outline but implemented using box-shadow, so it doesn't affect layout.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ring Outline Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic rings -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Ring Outlines</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-1 ring-blue-500 rounded flex items-center justify-center text-xs">ring-1</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">ring-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-4 ring-blue-500 rounded flex items-center justify-center text-xs">ring-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-8 ring-blue-500 rounded flex items-center justify-center text-xs">ring-8</div>
      </div>
    </div>

    <!-- Ring colors -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Ring Colors</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-red-50 ring-2 ring-red-500 rounded flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 bg-blue-50 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 bg-green-50 ring-2 ring-green-500 rounded flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 bg-purple-50 ring-2 ring-purple-500 rounded flex items-center justify-center text-xs">purple</div>
      </div>
    </div>

    <!-- ring-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ring-offset (Offset Ring)</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-2 rounded flex items-center justify-center text-xs">offset-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-4 rounded flex items-center justify-center text-xs">offset-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-8 rounded flex items-center justify-center text-xs">offset-8</div>
      </div>
    </div>

    <!-- Practical example: focus states -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Example: Focus States</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Click to see focus effect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg ring-2 ring-blue-600 ring-offset-2 hover:bg-blue-700">
          Ring Button
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Ring outline class reference:

Class CSS Value Description
ring-0 box-shadow: 0 0 0 0px ... No ring
ring-1 box-shadow: 0 0 0 1px ... 1px ring
ring-2 box-shadow: 0 0 0 2px ... 2px ring
ring-4 box-shadow: 0 0 0 4px ... 4px ring
ring-8 box-shadow: 0 0 0 8px ... 8px ring
ring-blue-500 --tw-ring-color: #3b82f6 Blue ring
ring-offset-2 box-shadow: 0 0 0 2px white, 0 0 0 4px ... 2px offset
ring-offset-4 box-shadow: 0 0 0 4px white, 0 0 0 8px ... 4px offset

Traditional CSS vs Tailwind The traditional approach requires setting box-shadow or outline in CSS, whereas Tailwind uses class names like ring-2, ring-blue-500, and ring-offset-2 for direct declaration. ring-* is implemented using box-shadow, so it doesn't affect layout.

💡 Tip: ring-* is commonly used for focus states (focus:ring-2) and selected states. ring-offset-* creates a gap between the ring and the element.

Outline

outline-* classes set the outline of an element. Similar to ring-* but uses the native outline property.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic outline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Outline</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-blue-100 outline outline-1 outline-blue-500 rounded flex items-center justify-center text-sm">outline-1</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-2 outline-blue-500 rounded flex items-center justify-center text-sm">outline-2</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-4 outline-blue-500 rounded flex items-center justify-center text-sm">outline-4</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-8 outline-blue-500 rounded flex items-center justify-center text-sm">outline-8</div>
      </div>
    </div>

    <!-- outline-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">outline-offset</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-0 rounded flex items-center justify-center text-sm">offset-0</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-2 rounded flex items-center justify-center text-sm">offset-2</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-4 rounded flex items-center justify-center text-sm">offset-4</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-8 rounded flex items-center justify-center text-sm">offset-8</div>
      </div>
    </div>

    <!-- outline styles -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Outline Styles</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dashed outline-purple-500 rounded flex items-center justify-center text-sm">dashed</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dotted outline-purple-500 rounded flex items-center justify-center text-sm">dotted</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-double outline-purple-500 rounded flex items-center justify-center text-sm">double</div>
      </div>
    </div>

    <!-- Practical example: focus states -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Example: Focus States</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Click to see focus effect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg outline outline-2 outline-offset-2 outline-blue-600 hover:bg-blue-700">
          Outline Button
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting multiple properties like outline-width, outline-color, outline-style, and outline-offset in CSS, whereas Tailwind uses class names like outline-2, outline-blue-500, and outline-offset-2 for direct declaration.

⚠️ Note: outline doesn't affect layout (takes no space) and is commonly used for focus states. ring uses box-shadow and also doesn't affect layout. The two can be used together.

Comprehensive Example

Combining all the concepts above, here is a complete background and border example.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background & Border Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Gradient card -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
      <h2 class="text-3xl font-bold mb-4">Gradient Card</h2>
      <p class="opacity-90 mb-6">Use gradient backgrounds, border radius, and shadows to create beautiful cards</p>
      <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
        Get Started
      </button>
    </div>

    <!-- Bordered form -->
    <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
      <h3 class="text-xl font-semibold mb-6 pb-4 border-b border-gray-200">Login Form</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          Sign In
        </button>
      </div>
    </div>

    <!-- Feature list -->
    <div class="bg-white rounded-xl shadow-lg divide-y divide-gray-200">
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-blue-100 rounded-full ring-2 ring-blue-500 flex items-center justify-center">
          <span class="text-blue-600 text-xl">1</span>
        </div>
        <div>
          <h4 class="font-semibold">Gradient Backgrounds</h4>
          <p class="text-sm text-gray-600">Support multi-direction, multi-color gradients</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-green-100 rounded-full ring-2 ring-green-500 flex items-center justify-center">
          <span class="text-green-600 text-xl">2</span>
        </div>
        <div>
          <h4 class="font-semibold">Rounded Borders</h4>
          <p class="text-sm text-gray-600">Flexible border radius and border control</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-purple-100 rounded-full ring-2 ring-purple-500 flex items-center justify-center">
          <span class="text-purple-600 text-xl">3</span>
        </div>
        <div>
          <h4 class="font-semibold">Ring Outlines</h4>
          <p class="text-sm text-gray-600">Focus states and selection effects</p>
        </div>
      </div>
    </div>

    <!-- Image grid -->
    <div class="grid grid-cols-3 gap-4">
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=1')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=2')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=3')"></div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing extensive CSS to achieve gradient cards, form styling, divider lists, and similar effects, whereas Tailwind accomplishes everything directly in HTML using background, border, and border-radius utility classes.

❓ FAQ

Q What's the difference between ring and outline?
A ring is implemented using box-shadow and supports ring-offset for offset. outline uses the native outline property and supports outline-offset. Neither affects layout. ring is recommended for focus states, while outline is better for native outlines.
Q How do I create gradient text?
A Use bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent. bg-clip-text clips the background to the text area, and text-transparent makes the text transparent so the gradient background shows through.
Q Why is the direction of divide-y the opposite of the flex direction?
A divide-y adds horizontal dividers between child elements, which suits vertically stacked children. divide-x adds vertical dividers between child elements, which suits horizontally arranged children. The direction is opposite to the flex direction to display correctly.
Q Why does rounded-full create a circle?
A rounded-full sets border-radius: 9999px. When the element has equal width and height, 9999px is far larger than the element's dimensions, so the browser automatically computes it as 50%, forming a perfect circle.

📖 Summary

📝 Exercises

  1. ⭐ Create a gradient button using bg-gradient-to-r from-blue-600 to-purple-600 and rounded-full

  2. ⭐⭐ Create a user list using divide-y divide-gray-200 for dividers, where each user item includes a circular avatar (rounded-full) and user info

  3. ⭐⭐⭐ Create a login page featuring a gradient background, a bordered form card, input fields with focus states (focus:ring-2), and rounded buttons

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏