Tailwind CSS Classes

Tailwind CSS class .stroke-0 / .stroke-*

<svg class="stroke-0 stroke-current text-teal-400 inline h-12 w-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="8" cy="21" r="2"></circle>
    <circle cx="20" cy="21" r="2"></circle>
    <path d="M5.67 6H23l-1.68 8.39a2 2 0 0 1-2 1.61H8.75a2 2 0 0 1-2-1.74L5.23 2.74A2 2 0 0 0 3.25 1H1"></path>
</svg>
<svg class="stroke-1 stroke-current text-teal-400 inline h-12 w-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="8" cy="21" r="2"></circle>
    <circle cx="20" cy="21" r="2"></circle>
    <path d="M5.67 6H23l-1.68 8.39a2 2 0 0 1-2 1.61H8.75a2 2 0 0 1-2-1.74L5.23 2.74A2 2 0 0 0 3.25 1H1"></path>
</svg>
<svg class="stroke-2 stroke-current text-teal-400 inline h-12 w-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="8" cy="21" r="2"></circle>
    <circle cx="20" cy="21" r="2"></circle>
    <path d="M5.67 6H23l-1.68 8.39a2 2 0 0 1-2 1.61H8.75a2 2 0 0 1-2-1.74L5.23 2.74A2 2 0 0 0 3.25 1H1"></path>
</svg>

Preview

Are you tired of writing HTML by hand?

CSS source

.stroke-0 { stroke-width: 0; }
.stroke-1 { stroke-width: 1; }
.stroke-2 { stroke-width: 2; }

More Tailwind CSS classes in Svg category

© 2024 Shuffle. All rights reserved.