Open In App

Tailwind CSS Divide Color

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can color any Divider. In CSS, we do that by using the CSS Color property.

Divide Color Classes:

  • divide-transparent: The divide color will be transparent.
  • divide-current: The divide color will depend on the parent element color.
  • divide-black: The divide color will be black.
  • divide-white: The divide color will be white.
  • divide-gray-50: The divide color will be gray.
  • divide-red-50: The divide color will be red.
  • divide-blue-50: The divide color will be blue.
  • divide-indigo-50: The divide color will be indigo.
  • divide-purple-50: The divide color will be purple.
  • divide-green-50: The divide color will be green.
  • divide-yellow-50: The divide color will be yellow.
  • divide-pink-50: The divide color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after the 100.

Syntax:

<element class="divide-{color}">...</element>

Example: All the possible classes are covered in this example, you can change the color value to make it more contrast, full, or make it more faded.

HTML




<!DOCTYPE html> 
<html
<head
    <link
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"
</head
  
<body class="text-center"
    <h2 class="text-green-600 text-5xl font-bold"
    GeeksforGeeks 
    </h2
    <b>Tailwind CSS Divide Color Class</b
    <div class="mx-4 bg-green-200 p-2">
        <div class="grid grid-cols-3 divide-x-4 
                    divide-pink-500">  
                     
            <div><b>1.</b>GeeksforGeeks</div>
            <div>A Computer Science Portal</div>
            <div>For Geeks</div>
        </div>
        <div style="height:10px"> </div>
         <div class="grid grid-cols-3 divide-x-4 
                     divide-blue-500">  
                    
            <div><b>2.</b>GeeksforGeeks</div>
            <div>A Computer Science Portal</div>
            <div>For Geeks</div>
        </div>
        <div style="height:10px"> </div>
         <div class="grid grid-cols-3 divide-x-4 
                     divide-green-500">  
                      
            <div><b>3.</b>GeeksforGeeks</div>
            <div>A Computer Science Portal</div>
            <div>For Geeks</div>
        </div>
    </div>
</body
</html>


Output:

Divide Color Class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads