CODEWITHSUNDEEP
svgtailwind-cssstroke-dasharray
Avi
Avi

Reputation: 1407

How to apply stroke-dasharray using tailwind

I'm using tailwind for styling in my React project. I wanted to apply a stroke-dasharray styling to a <circle> element using tailwind classes but after some researching, it seems tailwind does not provide any classes to style those attributes as can be seen in this discussion on the tailwind github repo.

Any ideas?

Upvotes: 0

Views: 1237

Answers (2)

Kulsum Paree
Kulsum Paree

Reputation: 1

Tailwind CSS does not provide a direct utility class for the stroke-dasharray CSS property, which is commonly used in SVGs to create dashed or dotted lines. However, you can extend Tailwind to include this functionality by adding custom utilities.

Upvotes: -2

Avi
Avi

Reputation: 1407

I already knew about tailwind's arbitrary values but after some more researching, I found out about tailwind's arbitrary properties! This is tailwind's way of allowing styling any properties they are not supporting.

So in my case I was able to do:

<circle className="[stroke-dasharray:2,5]" />

Upvotes: 2

Related Questions