Tailwind CSS Classes

Tailwind CSS class .divide-gray-100 / .divide-*-#

<div class="grid grid-cols-3 divide-x-4 divide-teal-600 my-4">
  <div class="text-center">1</div>
  <div class="text-center">2</div>
  <div class="text-center">3</div>
</div>
<div class="grid grid-cols-3 divide-x-4 divide-red-300 my-4">
  <div class="text-center">1</div>
  <div class="text-center">2</div>
  <div class="text-center">3</div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.divide-transparent { border-color: transparent; }
.divide-current { border-color: currentColor; }
.divide-black { border-color: #000; }
.divide-white { border-color: #fff; }

/* availale colours */
.divide-gray-600 { border-color: #718096; }
.divide-red-600 { border-color: #e53e3e; }
.divide-orange-600 { border-color: #dd6b20; }
.divide-yellow-600 { border-color: #d69e2e; }
.divide-green-600 { border-color: #38a169; }
.divide-teal-600 { border-color: #319795; }
.divide-blue-600 { border-color: #3182ce; }
.divide-indigo-600 { border-color: #5a67d8; }
.divide-purple-600 { border-color: #805ad5; }
.divide-pink-600 { border-color: #d53f8c; }

/* availale values */
.divide-gray-100 { border-color: #f7fafc; }
.divide-gray-200 { border-color: #edf2f7; }
.divide-gray-300 { border-color: #e2e8f0; }
.divide-gray-400 { border-color: #cbd5e0; }
.divide-gray-500 { border-color: #a0aec0; }
.divide-gray-600 { border-color: #718096; }
.divide-gray-700 { border-color: #4a5568; }
.divide-gray-800 { border-color: #2d3748; }
.divide-gray-900 { border-color: #1a202c; }

More Tailwind CSS classes in Borders category

© 2024 Shuffle. All rights reserved.