Tailwind CSS Classes

Tailwind CSS class .border-*-# / .border-t-2

<div class="my-2">
    <div class="border-t border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-r border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-b border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-l border-teal-600 bg-teal-400 p-8 inline-block"></div>
</div>

<div class="my-2">
    <div class="border-t-0 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-r-0 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-b-0 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-l-0 border-teal-600 bg-teal-400 p-8 inline-block"></div>
</div>

<div class="my-2">
    <div class="border-t-2 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-r-2 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-b-2 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-l-2 border-teal-600 bg-teal-400 p-8 inline-block"></div>
</div>

<div class="my-2">
    <div class="border-t-4 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-r-4 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-b-4 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-l-4 border-teal-600 bg-teal-400 p-8 inline-block"></div>
</div>

<div class="my-2">
    <div class="border-t-8 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-r-8 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-b-8 border-teal-600 bg-teal-400 p-8 inline-block"></div>
    <div class="border-l-8 border-teal-600 bg-teal-400 p-8 inline-block"></div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.border-t { border-top-width: 1px; }
.border-r { border-right-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }

.border-t-0 { border-top-width: 0; }
.border-r-0 { border-right-width: 0; }
.border-b-0 { border-bottom-width: 0; }
.border-l-0 { border-left-width: 0; }

.border-t-2 { border-top-width: 2px; }
.border-r-2 { border-right-width: 2px; }
.border-b-2 { border-bottom-width: 2px; }
.border-l-2 { border-left-width: 2px; }

.border-t-4 { border-top-width: 4px; }
.border-r-4 { border-right-width: 4px; }
.border-b-4 { border-bottom-width: 4px; }
.border-l-4 { border-left-width: 4px; }

.border-t-8 { border-top-width: 8px; }
.border-r-8 { border-right-width: 8px; }
.border-b-8 { border-bottom-width: 8px; }
.border-l-8 { border-left-width: 8px; }

More Tailwind CSS classes in Borders category

© 2024 Shuffle. All rights reserved.