Layout
Utilities for controlling the wrapping of content around an element.
Class | Styles |
---|---|
clear-start | clear: inline-start; |
clear-end | clear: inline-end; |
clear-left | clear: left; |
clear-right | clear: right; |
clear-both | clear: both; |
clear-none | clear: none; |
Use the clear-left
utility to position an element below any preceding left-floated elements.
Use the clear-right
utility to position an element below any preceding right-floated elements.
Use the clear-both
utility to position an element below all preceding floated elements.
Use the clear-none
utility to reset any clears that are applied to an element. This is the default value for the clear property.
Use the clear-start
or clear-end
logical properties, which map to either the left or right side based on the text direction.
Use the utility-(<custom-property>)
syntax to set the utility based on a custom property:
<div class="utility-(--my-utility) ..."> <!-- ... --></div>
Use the utility-[<value>]
syntax to set the utility based on a completely custom value:
<div class="utility-[1px] ..."> <!-- ... --></div>
Prefix an utility
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="__non_responsive_class__ md:__will_be_prefixed_with_responsive_variant__"> <!-- ... --></div>
Learn more about using variants in the variants documentation.
Use the --utility-*
theme variables to customize the utility name utilities in your project:
@theme { --utility-foo: 1px; }
Now the utility-foo
utility can be used in your markup:
<div class="utility-foo"> <!-- ... --></div>
Additionally, customizing your spacing scale will also update the utility-<number>
scale:
@theme { --spacing: 1px; }
Learn more about customizing your theme in the theme documentation.