Skip to content

Latest commit

 

History

History
994 lines (760 loc) · 34.2 KB

layout.md

File metadata and controls

994 lines (760 loc) · 34.2 KB
Raw

Layout

Aspect Ratio

Utilities for controlling the aspect ratio of an element.

Group

TailwindJS token
aspect_ratio_utilities

Utilities

TailwindJS token TailwindCSS token
aspect_auto aspect-auto
aspect_square aspect-square
aspect_video aspect-video

Arbitraries

TailwindJS token TailwindCSS token
aspect_arbitrary, aspect_arb aspect-[…]

Box Decoration Break

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

Group

TailwindJS token
box_decoration_break_utilities

Utilities

TailwindJS token TailwindCSS token
box_decoration_clone box-decoration-clone
box_decoration_slice box-decoration-slice

Box Sizing

Utilities for controlling how the browser should calculate an element's total size.

Group

TailwindJS token
box_sizing_utilities

Utilities

TailwindJS token TailwindCSS token
box_border box-border
box_content box-content

Break After

Utilities for controlling how a column or page should break after an element.

Group

TailwindJS token
break_after_utilities

Utilities

TailwindJS token TailwindCSS token
break_after_all break-after-all
break_after_auto break-after-auto
break_after_avoid break-after-avoid
break_after_avoid_page break-after-avoid-page
break_after_column break-after-column
break_after_left break-after-left
break_after_page break-after-page
break_after_right break-after-right

Break Before

Utilities for controlling how a column or page should break before an element.

Group

TailwindJS token
break_before_utilities

Utilities

TailwindJS token TailwindCSS token
break_before_all break-before-all
break_before_auto break-before-auto
break_before_avoid break-before-avoid
break_before_avoid_page break-before-avoid-page
break_before_column break-before-column
break_before_left break-before-left
break_before_page break-before-page
break_before_right break-before-right

Break Inside

Utilities for controlling how a column or page should break within an element.

Group

TailwindJS token
break_inside_utilities

Utilities

TailwindJS token TailwindCSS token
break_inside_auto break-inside-auto
break_inside_avoid break-inside-avoid
break_inside_avoid_column break-inside-avoid-column
break_inside_avoid_page break-inside-avoid-page

Clear

Utilities for controlling the wrapping of content around an element.

Group

TailwindJS token
clear_utilities

Utilities

TailwindJS token TailwindCSS token
clear_both clear-both
clear_end clear-end
clear_left clear-left
clear_none clear-none
clear_right clear-right
clear_start clear-start

Columns

Utilities for controlling the number of columns within an element.

Group

TailwindJS token
columns_utilities

Utilities

TailwindJS token TailwindCSS token
columns_1 columns-1
columns_10 columns-10
columns_11 columns-11
columns_12 columns-12
columns_2 columns-2
columns_2xl columns-2xl
columns_2xs columns-2xs
columns_3 columns-3
columns_3xl columns-3xl
columns_3xs columns-3xs
columns_4 columns-4
columns_4xl columns-4xl
columns_5 columns-5
columns_5xl columns-5xl
columns_6 columns-6
columns_6xl columns-6xl
columns_7 columns-7
columns_7xl columns-7xl
columns_8 columns-8
columns_9 columns-9
columns_auto columns-auto
columns_lg columns-lg
columns_md columns-md
columns_sm columns-sm
columns_xl columns-xl
columns_xs columns-xs

Arbitraries

TailwindJS token TailwindCSS token
columns_arbitrary, columns_arb columns-[…]

Container

A component for fixing an element's width to the current breakpoint.

Group

TailwindJS token
container_utilities

Utilities

TailwindJS token TailwindCSS token
container container

Display

Utilities for controlling the display box type of an element.

Group

TailwindJS token
display_utilities

Utilities

TailwindJS token TailwindCSS token
block block
contents contents
flex flex
flow_root flow-root
grid grid
hidden hidden
inline inline
inline_block inline-block
inline_flex inline-flex
inline_grid inline-grid
inline_table inline-table
list_item list-item
table table
table_caption table-caption
table_cell table-cell
table_column table-column
table_column_group table-column-group
table_footer_group table-footer-group
table_header_group table-header-group
table_row table-row
table_row_group table-row-group

Floats

Utilities for controlling the wrapping of content around an element.

Group

TailwindJS token
floats_utilities

Utilities

TailwindJS token TailwindCSS token
float_end float-end
float_left float-left
float_none float-none
float_right float-right
float_start float-start

Isolation

Utilities for controlling whether an element should explicitly create a new stacking context.

Group

TailwindJS token
isolation_utilities

Utilities

TailwindJS token TailwindCSS token
isolate isolate
isolation_auto isolation-auto

Object Fit

Utilities for controlling how a replaced element's content should be resized.

Group

TailwindJS token
object_fit_utilities

Utilities

TailwindJS token TailwindCSS token
object_contain object-contain
object_cover object-cover
object_fill object-fill
object_none object-none
object_scale_down object-scale-down

Object Position

Utilities for controlling how a replaced element's content should be positioned within its container.

Group

TailwindJS token
object_position_utilities

Utilities

TailwindJS token TailwindCSS token
object_bottom object-bottom
object_center object-center
object_left object-left
object_left_bottom object-left-bottom
object_left_top object-left-top
object_right object-right
object_right_bottom object-right-bottom
object_right_top object-right-top
object_top object-top

Arbitraries

TailwindJS token TailwindCSS token
object_arbitrary, object_arb object-[…]
object_left_arbitrary, object_left_arb object-left-[…]
object_right_arbitrary, object_right_arb object-right-[…]

Overflow

Utilities for controlling how an element handles content that is too large for the container.

Group

TailwindJS token
overflow_utilities

Utilities

TailwindJS token TailwindCSS token
overflow_auto overflow-auto
overflow_clip overflow-clip
overflow_hidden overflow-hidden
overflow_scroll overflow-scroll
overflow_visible overflow-visible
overflow_x_auto overflow-x-auto
overflow_x_clip overflow-x-clip
overflow_x_hidden overflow-x-hidden
overflow_x_scroll overflow-x-scroll
overflow_x_visible overflow-x-visible
overflow_y_auto overflow-y-auto
overflow_y_clip overflow-y-clip
overflow_y_hidden overflow-y-hidden
overflow_y_scroll overflow-y-scroll
overflow_y_visible overflow-y-visible

Overscroll Behavior

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

Group

TailwindJS token
overscroll_behavior_utilities

Utilities

TailwindJS token TailwindCSS token
overscroll_auto overscroll-auto
overscroll_contain overscroll-contain
overscroll_none overscroll-none
overscroll_x_auto overscroll-x-auto
overscroll_x_contain overscroll-x-contain
overscroll_x_none overscroll-x-none
overscroll_y_auto overscroll-y-auto
overscroll_y_contain overscroll-y-contain
overscroll_y_none overscroll-y-none

Position

Utilities for controlling how an element is positioned in the DOM.

Group

TailwindJS token
position_utilities

Utilities

TailwindJS token TailwindCSS token
absolute absolute
fixed fixed
relative relative
static_ static
sticky sticky

Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Group

TailwindJS token
top_right_bottom_left_utilities

Utilities

TailwindJS token TailwindCSS token
bottom_0 bottom-0
bottom_0_5 bottom-0.5
bottom_1 bottom-1
bottom_10 bottom-10
bottom_11 bottom-11
bottom_12 bottom-12
bottom_14 bottom-14
bottom_16 bottom-16
bottom_1_5 bottom-1.5
bottom_1_on_2 bottom-1/2
bottom_1_on_3 bottom-1/3
bottom_1_on_4 bottom-1/4
bottom_2 bottom-2
bottom_20 bottom-20
bottom_24 bottom-24
bottom_28 bottom-28
bottom_2_5 bottom-2.5
bottom_2_on_3 bottom-2/3
bottom_2_on_4 bottom-2/4
bottom_3 bottom-3
bottom_32 bottom-32
bottom_36 bottom-36
bottom_3_5 bottom-3.5
bottom_3_on_4 bottom-3/4
bottom_4 bottom-4
bottom_40 bottom-40
bottom_44 bottom-44
bottom_48 bottom-48
bottom_5 bottom-5
bottom_52 bottom-52
bottom_56 bottom-56
bottom_6 bottom-6
bottom_60 bottom-60
bottom_64 bottom-64
bottom_7 bottom-7
bottom_72 bottom-72
bottom_8 bottom-8
bottom_80 bottom-80
bottom_9 bottom-9
bottom_96 bottom-96
bottom_auto bottom-auto
bottom_full bottom-full
bottom_px bottom-px
end_0 end-0
end_0_5 end-0.5
end_1 end-1
end_10 end-10
end_11 end-11
end_12 end-12
end_14 end-14
end_16 end-16
end_1_5 end-1.5
end_1_on_2 end-1/2
end_1_on_3 end-1/3
end_1_on_4 end-1/4
end_2 end-2
end_20 end-20
end_24 end-24
end_28 end-28
end_2_5 end-2.5
end_2_on_3 end-2/3
end_2_on_4 end-2/4
end_3 end-3
end_32 end-32
end_36 end-36
end_3_5 end-3.5
end_3_on_4 end-3/4
end_4 end-4
end_40 end-40
end_44 end-44
end_48 end-48
end_5 end-5
end_52 end-52
end_56 end-56
end_6 end-6
end_60 end-60
end_64 end-64
end_7 end-7
end_72 end-72
end_8 end-8
end_80 end-80
end_9 end-9
end_96 end-96
end_auto end-auto
end_full end-full
end_px end-px
inset_0 inset-0
inset_0_5 inset-0.5
inset_1 inset-1
inset_10 inset-10
inset_11 inset-11
inset_12 inset-12
inset_14 inset-14
inset_16 inset-16
inset_1_5 inset-1.5
inset_1_on_2 inset-1/2
inset_1_on_3 inset-1/3
inset_1_on_4 inset-1/4
inset_2 inset-2
inset_20 inset-20
inset_24 inset-24
inset_28 inset-28
inset_2_5 inset-2.5
inset_2_on_3 inset-2/3
inset_2_on_4 inset-2/4
inset_3 inset-3
inset_32 inset-32
inset_36 inset-36
inset_3_5 inset-3.5
inset_3_on_4 inset-3/4
inset_4 inset-4
inset_40 inset-40
inset_44 inset-44
inset_48 inset-48
inset_5 inset-5
inset_52 inset-52
inset_56 inset-56
inset_6 inset-6
inset_60 inset-60
inset_64 inset-64
inset_7 inset-7
inset_72 inset-72
inset_8 inset-8
inset_80 inset-80
inset_9 inset-9
inset_96 inset-96
inset_auto inset-auto
inset_full inset-full
inset_px inset-px
inset_x_0 inset-x-0
inset_x_0_5 inset-x-0.5
inset_x_1 inset-x-1
inset_x_10 inset-x-10
inset_x_11 inset-x-11
inset_x_12 inset-x-12
inset_x_14 inset-x-14
inset_x_16 inset-x-16
inset_x_1_5 inset-x-1.5
inset_x_1_on_2 inset-x-1/2
inset_x_1_on_3 inset-x-1/3
inset_x_1_on_4 inset-x-1/4
inset_x_2 inset-x-2
inset_x_20 inset-x-20
inset_x_24 inset-x-24
inset_x_28 inset-x-28
inset_x_2_5 inset-x-2.5
inset_x_2_on_3 inset-x-2/3
inset_x_2_on_4 inset-x-2/4
inset_x_3 inset-x-3
inset_x_32 inset-x-32
inset_x_36 inset-x-36
inset_x_3_5 inset-x-3.5
inset_x_3_on_4 inset-x-3/4
inset_x_4 inset-x-4
inset_x_40 inset-x-40
inset_x_44 inset-x-44
inset_x_48 inset-x-48
inset_x_5 inset-x-5
inset_x_52 inset-x-52
inset_x_56 inset-x-56
inset_x_6 inset-x-6
inset_x_60 inset-x-60
inset_x_64 inset-x-64
inset_x_7 inset-x-7
inset_x_72 inset-x-72
inset_x_8 inset-x-8
inset_x_80 inset-x-80
inset_x_9 inset-x-9
inset_x_96 inset-x-96
inset_x_auto inset-x-auto
inset_x_full inset-x-full
inset_x_px inset-x-px
inset_y_0 inset-y-0
inset_y_0_5 inset-y-0.5
inset_y_1 inset-y-1
inset_y_10 inset-y-10
inset_y_11 inset-y-11
inset_y_12 inset-y-12
inset_y_14 inset-y-14
inset_y_16 inset-y-16
inset_y_1_5 inset-y-1.5
inset_y_1_on_2 inset-y-1/2
inset_y_1_on_3 inset-y-1/3
inset_y_1_on_4 inset-y-1/4
inset_y_2 inset-y-2
inset_y_20 inset-y-20
inset_y_24 inset-y-24
inset_y_28 inset-y-28
inset_y_2_5 inset-y-2.5
inset_y_2_on_3 inset-y-2/3
inset_y_2_on_4 inset-y-2/4
inset_y_3 inset-y-3
inset_y_32 inset-y-32
inset_y_36 inset-y-36
inset_y_3_5 inset-y-3.5
inset_y_3_on_4 inset-y-3/4
inset_y_4 inset-y-4
inset_y_40 inset-y-40
inset_y_44 inset-y-44
inset_y_48 inset-y-48
inset_y_5 inset-y-5
inset_y_52 inset-y-52
inset_y_56 inset-y-56
inset_y_6 inset-y-6
inset_y_60 inset-y-60
inset_y_64 inset-y-64
inset_y_7 inset-y-7
inset_y_72 inset-y-72
inset_y_8 inset-y-8
inset_y_80 inset-y-80
inset_y_9 inset-y-9
inset_y_96 inset-y-96
inset_y_auto inset-y-auto
inset_y_full inset-y-full
inset_y_px inset-y-px
left_0 left-0
left_0_5 left-0.5
left_1 left-1
left_10 left-10
left_11 left-11
left_12 left-12
left_14 left-14
left_16 left-16
left_1_5 left-1.5
left_1_on_2 left-1/2
left_1_on_3 left-1/3
left_1_on_4 left-1/4
left_2 left-2
left_20 left-20
left_24 left-24
left_28 left-28
left_2_5 left-2.5
left_2_on_3 left-2/3
left_2_on_4 left-2/4
left_3 left-3
left_32 left-32
left_36 left-36
left_3_5 left-3.5
left_3_on_4 left-3/4
left_4 left-4
left_40 left-40
left_44 left-44
left_48 left-48
left_5 left-5
left_52 left-52
left_56 left-56
left_6 left-6
left_60 left-60
left_64 left-64
left_7 left-7
left_72 left-72
left_8 left-8
left_80 left-80
left_9 left-9
left_96 left-96
left_auto left-auto
left_full left-full
left_px left-px
right_0 right-0
right_0_5 right-0.5
right_1 right-1
right_10 right-10
right_11 right-11
right_12 right-12
right_14 right-14
right_16 right-16
right_1_5 right-1.5
right_1_on_2 right-1/2
right_1_on_3 right-1/3
right_1_on_4 right-1/4
right_2 right-2
right_20 right-20
right_24 right-24
right_28 right-28
right_2_5 right-2.5
right_2_on_3 right-2/3
right_2_on_4 right-2/4
right_3 right-3
right_32 right-32
right_36 right-36
right_3_5 right-3.5
right_3_on_4 right-3/4
right_4 right-4
right_40 right-40
right_44 right-44
right_48 right-48
right_5 right-5
right_52 right-52
right_56 right-56
right_6 right-6
right_60 right-60
right_64 right-64
right_7 right-7
right_72 right-72
right_8 right-8
right_80 right-80
right_9 right-9
right_96 right-96
right_auto right-auto
right_full right-full
right_px right-px
start_0 start-0
start_0_5 start-0.5
start_1 start-1
start_10 start-10
start_11 start-11
start_12 start-12
start_14 start-14
start_16 start-16
start_1_5 start-1.5
start_1_on_2 start-1/2
start_1_on_3 start-1/3
start_1_on_4 start-1/4
start_2 start-2
start_20 start-20
start_24 start-24
start_28 start-28
start_2_5 start-2.5
start_2_on_3 start-2/3
start_2_on_4 start-2/4
start_3 start-3
start_32 start-32
start_36 start-36
start_3_5 start-3.5
start_3_on_4 start-3/4
start_4 start-4
start_40 start-40
start_44 start-44
start_48 start-48
start_5 start-5
start_52 start-52
start_56 start-56
start_6 start-6
start_60 start-60
start_64 start-64
start_7 start-7
start_72 start-72
start_8 start-8
start_80 start-80
start_9 start-9
start_96 start-96
start_auto start-auto
start_full start-full
start_px start-px
top_0 top-0
top_0_5 top-0.5
top_1 top-1
top_10 top-10
top_11 top-11
top_12 top-12
top_14 top-14
top_16 top-16
top_1_5 top-1.5
top_1_on_2 top-1/2
top_1_on_3 top-1/3
top_1_on_4 top-1/4
top_2 top-2
top_20 top-20
top_24 top-24
top_28 top-28
top_2_5 top-2.5
top_2_on_3 top-2/3
top_2_on_4 top-2/4
top_3 top-3
top_32 top-32
top_36 top-36
top_3_5 top-3.5
top_3_on_4 top-3/4
top_4 top-4
top_40 top-40
top_44 top-44
top_48 top-48
top_5 top-5
top_52 top-52
top_56 top-56
top_6 top-6
top_60 top-60
top_64 top-64
top_7 top-7
top_72 top-72
top_8 top-8
top_80 top-80
top_9 top-9
top_96 top-96
top_auto top-auto
top_full top-full
top_px top-px

Arbitraries

TailwindJS token TailwindCSS token
bottom_arbitrary, bottom_arb bottom-[…]
end_arbitrary, end_arb end-[…]
inset_arbitrary, inset_arb inset-[…]
inset_x_arbitrary, inset_x_arb inset-x-[…]
inset_y_arbitrary, inset_y_arb inset-y-[…]
left_arbitrary, left_arb left-[…]
right_arbitrary, right_arb right-[…]
start_arbitrary, start_arb start-[…]
top_arbitrary, top_arb top-[…]

Visibility

Utilities for controlling the visibility of an element.

Group

TailwindJS token
visibility_utilities

Utilities

TailwindJS token TailwindCSS token
collapse collapse
invisible invisible
visible visible

Z-Index

Utilities for controlling the stack order of an element.

Group

TailwindJS token
z_index_utilities

Utilities

TailwindJS token TailwindCSS token
z_0 z-0
z_10 z-10
z_20 z-20
z_30 z-30
z_40 z-40
z_50 z-50
z_auto z-auto

Arbitraries

TailwindJS token TailwindCSS token
z_arbitrary, z_arb z-[…]