Tailwind CSS · Utilities reference · all subjects

stroke

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

stroke utility classes complete reference

The stroke utility generates classes to style the stroke property of SVG elements. The complete set of stroke utilities includes: stroke-none (stroke: none), stroke-inherit (stroke: inherit), stroke-current (stroke: currentColor), stroke-transparent (stroke: transparent), stroke-{color} for each color in the theme (generates stroke: var(--color-{color})), stroke-(<custom-property>) for custom properties (generates stroke: var(<custom-property>)), and stroke-[<color>] for arbitrary values (generates stroke: <color>).

stroke-current uses current text color

The stroke-current utility sets the stroke color to currentColor, which is the current text color. This allows SVG strokes to automatically inherit the text color of their parent element, making it useful for styling icons that should match surrounding text color changes.

stroke utility responsive design support

The stroke utility supports responsive design through Tailwind's standard responsive prefixes. You can use prefixes like md:stroke-cyan-700 to apply different stroke colors at different breakpoints.

stroke utility theme customization

The stroke utility can be customized by extending the theme colors. The stroke utilities use the colors from your theme configuration, and you can add custom stroke colors by extending or overriding the colors in your Tailwind theme.

stroke-cyan-500 example SVG icon styling

Example: <svg class="stroke-cyan-500 ..."></svg> applies a cyan stroke color to an SVG element. This is useful for styling icon sets like Heroicons.

stroke-current in interactive elements

Example: <button class="bg-white text-pink-600 hover:bg-pink-600 hover:text-white ..."><svg class="size-5 stroke-current ..." fill="none"></svg>Download file</button> demonstrates using stroke-current so the SVG stroke color automatically matches the button's text color, inheriting color changes on hover.

stroke arbitrary value syntax

You can use arbitrary stroke values with the syntax stroke-[<color>] where <color> is any valid CSS color value. This generates stroke: <color>. You can also use stroke-(<custom-property>) to reference a CSS custom property, which generates stroke: var(<custom-property>).

Give your agent this brain