Additional SVG properties

[techniq]

With the recent addition of fill-* and stroke-* classes, it would be great if more SVG properties were added to Tailwind.

Some properties I reach for often which would be a good start (instead of having to reach for style="..." or adding a Svelte class).

• stroke-width
• stroke-opacity
• stroke-linejoin
• stroke-linecap
• stroke-dashoffset
• stroke-dasharray
• fill-opacity
• fill-rule
• text-anchor
• alignment-baseline
• dominant-baseline
• paint-order
  • Useful for adding outline / halo strokes to text
    • https://observablehq.com/@d3/radial-tree
    • https://stackoverflow.com/questions/442164/how-to-get-an-outline-effect-on-text-in-svg/26498819#26498819

Some of these will be best to primarily leverage with arbitrary values (ex. stroke-dashoffset / stroke-dasharray) although those with a defined list (ex. stroke-linejoin / stroke-linecap) should make for straight forward class names.

[felipepodesta]

+1

[gotpop]

Tailwind = Bootstrap

[nigelpasco]

Tailwind = Bootstrap

Tailwind > Bootstrap :)

[Kathalysth]

Just started using Tailwind, and I am wondering why I didn't start sooner.

[debjotyms]

Bootstrap who?

[h0ds]

+1

[tpalecian]

+1

[eduardocque]

+1

[Pj-Thinker]

+1

[wilsonfaustino]

+1

[DarioLopes]

+1

[mreduar]

+1

[nikitastryuk]

+1

[carsonkrueger]

+1

[munezerobagira]

+1

[joevingracien]

+1

[InanisOmnia]

I would love to see this feature! +1

[icarodavi]

+1

[leo-bjorn]

+1

[adamchenwei]

can't believe tailwind still has not added this yet 😮‍💨

[devanshdsoni]

+1

[marcelotten]

+1

[Avi-Cohen-Nehemia]

+1

[by-huy]

+1

[PhillipFraThailand]

+1

[whoisaymen]

+1

[macadiz]

+1

[roberto-juniorjp]

+1

[siddhant-rl]

+1

[danilobjr]

This thread started 2021. Here we are in 2025: +1

[Shalev-Aviv]

+1

[caseyohara]

+1

[rozsazoltan]

You can continue to extend your project with your own functional utilities (in both v3 and v4). Here's a v4 example:

-webkit-text-stroke custom utilities for width & color

• How can I use the -webkit-text-stroke setting similarly to the stroke-* utility?
• https://play.tailwindcss.com/L1LLBBpyCA?file=css
• https://caniuse.com/?search=-webkit-text-stroke (Baseline 2017 - available Chrome, Edge, Firefox, Safari)

@theme {
  --stroke-none: unset;
}

@utility text-stroke-* {
  -webkit-text-stroke-width: calc(--value(integer) * 0.5px);
  -webkit-text-stroke-width: --value(--stroke-*, [*]);

  --tw-stroke-color: --value(--color-*);
  -webkit-text-stroke-color: var(--tw-stroke-color, black);
}

stroke-width, stroke-color available from v4

• https://play.tailwindcss.com/0P4u4aAL2R
• https://tailwindcss.com/docs/stroke

stroke-opacity, stroke-linejoin, stroke-linecap, stroke-dashoffset, stroke-dasharray custom utilities

They are all part of Baseline 2020, so they can be safely used in Baseline 2023, which is targeted by v4.

stroke-opacity

Available by modifier:

• https://play.tailwindcss.com/DbW8Q5Q2AV

But the v3 bg-opacity-* can also be restored, and similarly stroke-opacity-* as well.

• The bg-opacity-* utility no longer exists as of v4 - how could it still be created?
• https://play.tailwindcss.com/LJdF0MUwef?file=css

@utility stroke-opacity-* {
  --stroke-opacity: calc(100% - --value(integer) * 1%);
}

@utility stroke-* {
  stroke: color-mix(in oklab, --value(--color-*, [*]) var(--stroke-opacity, 100%), transparent);
}

Or can use stroke-opacity CSS property:

• https://play.tailwindcss.com/DbW8Q5Q2AV

@theme {
  --stroke-opacity-none: 0%;
}

@utility stroke-opacity-* {
  stroke-opacity: calc(--value(integer) * 1%);
  stroke-opacity: calc(--value(ratio, [ratio]) * 100%);
  stroke-opacity: --value(--stroke-opacity-*, [percentage]);
}

stroke-linejoin

• https://play.tailwindcss.com/YQnhBWD7Qy?file=css

@theme {
  --stroke-join-default: 'miter';
  --stroke-join-clip: 'miter-clip';
}

@utility stroke-join-* {
  stroke-linejoin: --value('arcs', 'bevel', 'miter', 'round', --stroke-join-*);
}

stroke-linecap

• https://play.tailwindcss.com/w1Kd9ije3h?file=css

@theme {
  --stroke-cap-default: 'butt';
}

@utility stroke-cap-* {
  stroke-linecap: --value('butt', 'round', 'square', --stroke-cap-*);
}

stroke-dashoffset, stroke-dasharray

• https://play.tailwindcss.com/HeuNx3ynEZ?file=css

@theme {
  --stroke-offset-none: 0;
  --stroke-array-sos: 1 1 1 1 1 1 3 1 3 1 3 1;
}

@utility stroke-array-* {
  stroke-dasharray: --value(integer, 'none', [*], --stroke-array-*);
}

@utility stroke-offset-* {
  stroke-dashoffset: --value(integer);
  stroke-dashoffset: --value(--stroke-offset-*, [integer], [length], [percentage]);
}

@utility -stroke-offset-* {
  stroke-dashoffset: calc(-1 * --value(integer));
  stroke-dashoffset: calc(-1 * --value([integer], [length], [percentage]));
}

fill-opacity available from v4 by modifier: fill-sky-500/20

• https://play.tailwindcss.com/qpd4FOh58N

But the v3 bg-opacity-* can also be restored, and similarly fill-opacity-* as well.

• The bg-opacity-* utility no longer exists as of v4 - how could it still be created?
• https://play.tailwindcss.com/VQjTBVU3oA

@utility fill-opacity-* {
  --fill-opacity: calc(100% - --value(integer) * 1%);
}

@utility fill-* {
  fill: color-mix(in oklab, --value(--color-*, [*]) var(--fill-opacity, 100%), transparent);
}

Or can use fill-opacity CSS property:

• https://play.tailwindcss.com/KEwzBd4BQa?file=css

@theme {
  --fill-opacity-none: 0%;
}

@utility fill-opacity-* {
  fill-opacity: calc(--value(integer) * 1%);
  fill-opacity: calc(--value(ratio, [ratio]) * 100%);
  fill-opacity: --value(--stroke-opacity-*, [percentage]);
}

fill-rule

• https://play.tailwindcss.com/G70V4xYv4c

@utility fill-* {
  fill-rule: --value('evenodd', 'nonzero');
}

[danilobjr]

Sir, thank you so much for this!