Stroke Widthv1.2.0+

@include('_partials.class-table', [ 'scroll' => true, 'rows' => $page->config['theme']['strokeWidth']->map(function ($value, $name) { $class = ".stroke-{$name}"; $code = "stroke-width: {$value};"; return [$class, $code]; }) ])

Usage

Use the .stroke-{width} utilities to set the stroke width of an SVG.

Useful for styling icon sets like Feather that are drawn entirely with strokes.

@component('_partials.code-sample', ['class' => 'text-center'])

@slot('code')@endslot @endcomponent

Responsive

To control the stroke width of an SVG element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:stroke-2 to an element would apply the stroke-2 utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample', ['class' => 'text-center']) @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

Customizing

Control which stroke-width utilities Tailwind generates by customizing the theme.strokeWidth section in your tailwind.config.js file:

@component('_partials.customized-config', ['key' => 'theme.extend.strokeWidth'])

• '3': '3',
• '4': '4', @endcomponent

Learn more about customizing the default theme in the theme customization documentation.

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'stroke-width', 'property' => 'strokeWidth', ], 'variants' => ['responsive'], ])