Apply the max-width of an element to fix its width to the current breakpoint.
.container
none
width: 100%
Tailwind Cheat Sheet
Get started with this free tool to view and search for all the class names and CSS properties use pagedone cheat sheet.
Layout
Container
sm:
max-width: 640px;
md:
max-width: 768px;
lg:
max-width: 1024px;
xl:
max-width: 1280px;
2xl:
max-width: 1536px;
Box Decoration Break
Set how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
.decoration-slice
box-decoration-break: slice;
.decoration-clone
box-decoration-break: clone;
Box Sizing
Define how the width and height of an element are calculated: should they include padding and borders, or not.
.box-border
box-sizing: border-box;
.box-content
box-sizing: content-box;
Breakpoints
Use the breakpoints (screen sizes) to set how the utility-classes respond according to the device width.
sm:
@media (min-width: 640px) { ... }
md:
@media (min-width: 768px) { ... }
lg:
@media (min-width: 1024px) { ... }
xl:
@media (min-width: 1280px) { ... }
2xl:
@media (min-width: 1536px) { ... }
Display
Specify the display behavior (the type of rendering box) of an element.
.hidden
display: none;
.contents
display: contents;
.list-item
display: list-item;
.block
display: block;
.inline-block
display: inline-block;
.flex
display: flex;
.inline-flex
display: inline-flex;
.inline
display: inline;
.table
display: table;
.inline-table
display: inline-table;
.table-cell
display: table-cell;
.table-caption
display: table-caption;
.table-column
display: table-column;
.table-column-group
display: table-column-group;
.table-footer-group
display: table-footer-group;
.table-header-group
display: table-header-group;
.table-row-group
display: table-row-group;
.table-row
display: table-row;
.flow-root
display: flow-root
.grid
display: grid
.inline-grid
display: inline-grid
Float
Place an element on the left or right side of its container, allowing text and inline elements to wrap around it.
.float-right
float: right;
.float-left
float: left;
.float-none
float: none;
Clear
Set whether an element must be moved below (cleared) floating elements that precede it.
.clear-left
clear: left;
.clear-right
clear: right;
.clear-both
clear: both;
.clear-none
clear: none;
Isolation
Determine whether an element must create a new stacking context.
.isolate
isolation: isolate;
.isolate-auto
isolation: auto;
Object Fit
Set how the content of a replaced element, such as
an <img>or<video>, should
be resized to fit its container.
.object-contain
object-fit: contain;
.object-cover
object-fit: cover;
.object-fill
object-fit: fill;
.object-none
object-fit: none;
.object-scale-down
object-fit: scale-down;
Object Position
Specify the alignment of the selected replaced element's contents within the element's box.
.object-bottom
object-position: bottom;
.object-center
object-position: center;
.object-left
object-position: left;
.object-left-bottom
object-position: left bottom;
.object-left-top
object-position: left top;
.object-right
object-position: right;
.object-right-bottom
object-position: right bottom;
.object-right-top
object-position: right top;
.object-top
object-position: top;
Overflow
Set the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
.overflow-auto
overflow: auto;
.overflow-x-auto
overflow-x: auto;
.overflow-y-auto
overflow-y: auto;
.overflow-hidden
overflow: hidden;
.overflow-x-hidden
overflow-x: hidden;
.overflow-y-hidden
overflow-y: hidden;
.overflow-visible
overflow: visible;
.overflow-x-visible
overflow-x: visible;
.overflow-y-visible
overflow-y: visible;
.overflow-scroll
overflow: scroll;
.overflow-x-scroll
overflow-x: scroll;
.overflow-y-scroll
overflow-y: scroll;
.scrolling-touch
-webkit-overflow-scrolling: touch;
.scrolling-auto
-webkit-overflow-scrolling: auto;
Overscroll Behavior
Set what a browser does when reaching the boundary of a scrolling area.
.overscroll-auto
overscroll-behavior: auto;
.overscroll-y-auto
overscroll-behavior-y: auto;
.overscroll-x-auto
overscroll-behavior-x: auto;
.overscroll-contain
overscroll-behavior: contain;
.overscroll-y-contain
overscroll-behavior-y: contain;
.overscroll-x-contain
overscroll-behavior-x: contain;
.overscroll-none
overscroll-behavior: none;
.overscroll-y-none
overscroll-behavior-y: none;
.overscroll-x-none
overscroll-behavior-x: none;
Position
Set how an element is positioned in a document.
.static
position: static;
.fixed
position: fixed;
.absolute
position: absolute;
.relative
position: relative;
.sticky
position: sticky;
Top / Right / Bottom / Left
Determine the final location of positioned elements.
.inset-0
top: 0; right: 0; bottom: 0; left: 0;
.-inset-0
top: 0; right: 0; bottom: 0; left: 0;
.inset-y-0
top: 0; bottom: 0;
.-inset-y-0
top: 0; bottom: 0;
.inset-x-0
right: 0; left: 0;
.-inset-x-0
right: 0; left: 0;
.top-0
top: 0;
.right-0
right: 0;
.bottom-0
bottom: 0;
.left-0
left: 0;
.-top-0
top: 0;
.-right-0
right: 0;
.-bottom-0
bottom: 0;
.-left-0
left: 0;
.inset-0.5
top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem;
.-inset-0.5
top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem;
.inset-y-0.5
top: 0.125rem; bottom: 0.125rem;
.-inset-y-0.5
top: -0.125rem; bottom: -0.125rem;
.inset-x-0.5
right: 0.125rem; left: 0.125rem;
.-inset-x-0.5
right: -0.125rem; left: -0.125rem;
.top-0.5
top: 0.125rem;
.right-0.5
right: 0.125rem;
.bottom-0.5
bottom: 0.125rem;
.left-0.5
left: 0.125rem;
.-top-0.5
top: -0.125rem;
.-right-0.5
right: -0.125rem;
.-bottom-0.5
bottom: -0.125rem;
.-left-0.5
left: -0.125rem;
.inset-1
top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem;
.-inset-1
top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem;
.inset-y-1
top: 0.25rem; bottom: 0.25rem;
.-inset-y-1
top: -0.25rem; bottom: -0.25rem;
.inset-x-1
right: 0.25rem; left: 0.25rem;
.-inset-x-1
right: -0.25rem; left: -0.25rem;
.top-1
top: 0.25rem;
.right-1
right: 0.25rem;
.bottom-1
bottom: 0.25rem;
.left-1
left: 0.25rem;
.-top-1
top: -0.25rem;
.-right-1
right: -0.25rem;
.-bottom-1
bottom: -0.25rem;
.-left-1
left: -0.25rem;
.inset-1.5
top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem;
.-inset-1.5
top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem;
.inset-y-1.5
top: 0.375rem; bottom: 0.375rem;
.-inset-y-1.5
top: -0.375rem; bottom: -0.375rem;
.inset-x-1.5
right: 0.375rem; left: 0.375rem;
.-inset-x-1.5
right: -0.375rem; left: -0.375rem;
.top-1.5
top: 0.375rem;
.right-1.5
right: 0.375rem;;
.bottom-1.5
bottom: 0.375rem;
.left-1.5
left: 0.375rem;
.-top-1.5
top: -0.375rem;
.-right-1.5
right: -0.375rem;
.-bottom-1.5
bottom: -0.375rem;
.-left-1.5
left: -0.375rem;
.inset-2
top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem;
.-inset-2
top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem;
.inset-y-2
top: 0.5rem; bottom: 0.5rem;
.-inset-y-2
top: -0.5rem; bottom: -0.5rem;
.inset-x-2
right: 0.5rem; left: 0.5rem;
.-inset-x-2
right: -0.5rem; left: -0.5rem;
.top-2
top: 0.5rem;
.right-2
right: 0.5rem;
.bottom-2
bottom: 0.5rem;
.left-2
left: 0.5rem;
.-top-2
top: -0.5rem;
.-right-2
right: -0.5rem;
.-bottom-2
bottom: -0.5rem;
.-left-2
left: -0.5rem;
.inset-2.5
top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem;
.-inset-2.5
top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem;
.inset-y-2.5
top: 0.625rem; bottom: 0.625rem;
.-inset-y-2.5
top: -0.625rem; bottom: -0.625rem;
.inset-x-2.5
right: 0.625rem; left: 0.625rem;
.-inset-x-2.5
right: -0.625rem; left: -0.625rem;
.top-2.5
top: 0.625rem;
.right-2.5
right: 0.625rem;
.bottom-2.5
bottom: 0.625rem;
.left-2.5
left: 0.625rem;
.-top-2.5
top: -0.625rem;
.-right-2.5
right: -0.625rem;
.-bottom-2.5
bottom: -0.625rem;
.-left-2.5
left: -0.625rem;
.inset-3
top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem;
.-inset-3
top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem;
.inset-y-3
top: 0.75rem; bottom: 0.75rem;
.-inset-y-3
top: -0.75rem; bottom: -0.75rem;
.inset-x-3
right: 0.75rem; left: 0.75rem;
.-inset-x-3
right: -0.75rem; left: -0.75rem;
.top-3
top: 0.75rem;
.right-3
right: 0.75rem;
.bottom-3
bottom: 0.75rem;
.left-3
left: 0.75rem;
.-top-3
top: -0.75rem;
.-right-3
right: -0.75rem;
.-bottom-3
bottom: -0.75rem;
.-left-3
left: -0.75rem;
.inset-3.5
top: 0.875rem; right: 0.875rem; bottom: 0.875rem; left: 0.875rem;
.-inset-3.5
top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left: -0.875rem;
.inset-y-3.5
top: 0.875rem; bottom: 0.875rem;
.-inset-y-3.5
top: -0.875rem; bottom: -0.875rem;
.inset-x-3.5
right: 0.875rem; left: 0.875rem;
.-inset-x-3.5
right: -0.875rem; left: -0.875rem;
.top-3.5
top: 0.875rem;
.right-3.5
right: 0.875rem;
.bottom-3.5
bottom: 0.875rem;
.left-3.5
left: 0.875rem;
.-top-3.5
top: -0.875rem;
.-right-3.5
right: -0.875rem;
.-bottom-3.5
bottom: -0.875rem;
.-left-3.5
left: -0.875rem;
.inset-4
top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;
.-inset-4
top: -1rem; right: -1rem; bottom: -1rem; left: -1rem;
.inset-y-4
top: 1rem; bottom: 1rem;
.-inset-y-4
top: -1rem; bottom: -1rem;
.inset-x-4
right: 1rem; left: 1rem;
.-inset-x-4
right: -1rem; left: -1rem;
.top-4
top: 1rem;
.right-4
right: 1rem;
.bottom-4
bottom: 1rem;
.left-4
left: 1rem;
.-top-4
top: -1rem;
.-right-4
right: -1rem;
.-bottom-4
bottom: -1rem;
.-left-4
left: -1rem;
.inset-5
top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem;
.-inset-5
top: -1.25rem; right: -1.25rem; bottom: -1.25rem; left: -1.25rem;
.inset-y-5
top: 1.25rem; bottom: 1.25rem;
.-inset-y-5
top: -1.25rem; bottom: -1.25rem;
.inset-x-5
right: 1.25rem; left: 1.25rem;
.-inset-x-5
right: -1.25rem; left: -1.25rem;
.top-5
top: 1.25rem;
.right-5
right: 1.25rem;
.bottom-5
bottom: 1.25rem;
.left-5
left: 1.25rem;
.-top-5
top: -1.25rem;
.-right-5
right: -1.25rem;
.-bottom-5
bottom: -1.25rem;
.-left-5
left: -1.25rem;
.inset-6
top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem;
.-inset-6
top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem;
.inset-y-6
top: 1.5rem; bottom: 1.5rem;
.-inset-y-6
top: -1.5rem; bottom: -1.5rem;
.inset-x-6
right: 1.5rem; left: 1.5rem;
.-inset-x-6
right: -1.5rem; left: -1.5rem;
.top-6
top: 1.5rem;
.right-6
right: 1.5rem;
.bottom-6
bottom: 1.5rem;
.left-6
left: 1.5rem;
.-top-6
top: -1.5rem;
.-right-6
right: -1.5rem;
.-bottom-6
bottom: -1.5rem;
.-left-6
left: -1.5rem;
.inset-7
top: 1.75rem; right: 1.75rem; bottom: 1.75rem; left: 1.75rem;
.-inset-7
top: -1.75rem; right: -1.75rem; bottom: -1.75rem; left: -1.75rem;
.inset-y-7
top: 1.75rem; bottom: 1.75rem;
.-inset-y-7
top: -1.75rem; bottom: -1.75rem;
.inset-x-7
right: 1.75rem; left: 1.75rem;
.-inset-x-7
right: -1.75rem; left: -1.75rem;
.top-7
top: 1.75rem;
.right-7
right: 1.75rem;
.bottom-7
bottom: 1.75rem;
.left-7
left: 1.75rem;
.-top-7
top: -1.75rem;
.-right-7
right: -1.75rem;
.-bottom-7
bottom: -1.75rem;
.-left-7
left: -1.75rem;
.inset-8
top: 2rem; right: 2rem; bottom: 2rem; left: 2rem;
.-inset-8
top: -2rem; right: -2rem; bottom: -2rem; left: -2rem;
.inset-y-8
top: 2rem; bottom: 2rem;
.-inset-y-8
top: -2rem; bottom: -2rem;
.inset-x-8
right: 2rem; left: 2rem;
.-inset-x-8
right: -2rem; left: -2rem;
.top-8
top: 2rem;
.right-8
right: 2rem;
.bottom-8
bottom: 2rem;
.left-8
left: 2rem;
.-top-8
top: -2rem;
.-right-8
right: -2rem;
.-bottom-8
bottom: -2rem;
.-left-8
left: -2rem;
.inset-9
top: 2.25rem; right: 2.25rem; bottom: 2.25rem; left: 2.25rem;
.-inset-9
top: -2.25rem; right: -2.25rem; bottom: -2.25rem; left: -2.25rem;
.inset-y-9
top: 2.25rem; bottom: 2.25rem;
.-inset-y-9
top: -2.25rem; bottom: -2.25rem;
.inset-x-9
right: 2.25rem; left: 2.25rem;
.-inset-x-9
right: -2.25rem; left: -2.25rem;
.top-9
top: 2.25rem;
.right-9
right: 2.25rem;
.bottom-9
bottom: 2.25rem;
.left-9
left: 2.25rem;
.-top-9
top: -2.25rem;
.-right-9
right: -2.25rem;
.-bottom-9
bottom: -2.25rem;
.-left-9
left: -2.25rem;
.inset-10
top: 2.5rem; right: 2.5rem; bottom: 2.5rem; left: 2.5rem;
.-inset-10
top: -2.5rem; right: -2.5rem; bottom: -2.5rem; left: -2.5rem;
.inset-y-10
top: 2.5rem; bottom: 2.5rem;
.-inset-y-10
top: -2.5rem; bottom: -2.5rem;
.inset-x-10
right: 2.5rem; left: 2.5rem;
.-inset-x-10
right: -2.5rem; left: -2.5rem;
.top-10
top: 2.5rem;
.right-10
right: 2.5rem;
.bottom-10
bottom: 2.5rem;
.left-10
left: 2.5rem;
.-top-10
top: -2.5rem;
.-right-10
right: -2.5rem;
.-bottom-10
bottom: -2.5rem;
.-left-10
left: -2.5rem;
.inset-11
top: 2.75rem; right: 2.75rem; bottom: 2.75rem; left: 2.75rem;
.-inset-11
top: -2.75rem; right: -2.75rem; bottom: -2.75rem; left: -2.75rem;
.inset-y-11
top: 2.75rem; bottom: 2.75rem;
.-inset-y-11
top: -2.75rem; bottom: -2.75rem;
.inset-x-11
right: 2.75rem; left: 2.75rem;
.-inset-x-11
right: -2.75rem; left: -2.75rem;
.top-11
top: 2.75rem;
.right-11
right: 2.75rem;
.bottom-11
bottom: 2.75rem;
.left-11
left: 2.75rem;
.-top-11
top: -2.75rem;
.-right-11
right: -2.75rem;
.-bottom-11
bottom: -2.75rem;
.-left-11
left: -2.75rem;
.inset-12
top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;
.-inset-12
top: -3rem; right: -3rem; bottom: -3rem; left: -3rem;
.inset-y-12
top: 3rem; bottom: 3rem;
.-inset-y-12
top: -3rem; bottom: -3rem;
.inset-x-12
right: 3rem; left: 3rem;
.-inset-x-12
right: -3rem; left: -3rem;
.top-12
top: 3rem;
.right-12
right: 3rem;
.bottom-12
bottom: 3rem;
.left-12
left: 3rem;
.-top-12
top: -3rem;
.-right-12
right: -3rem;
.-bottom-12
bottom: -3rem;
.-left-12
left: -3rem;
.inset-14
top: 3.5rem; right: 3.5rem; bottom: 3.5rem; left: 3.5rem;
.-inset-14
top: -3.5rem; right: -3.5rem; bottom: -3.5rem; left: -3.5rem;
.inset-y-14
top: 3.5rem; bottom: 3.5rem;
.-inset-y-14
top: -3.5rem; bottom: -3.5rem;
.inset-x-14
right: 3.5rem; left: 3.5rem;
.-inset-x-14
right: -3.5rem; left: -3.5rem;
.top-14
top: 3.5rem;
.right-14
right: 3.5rem;
.bottom-14
bottom: 3.5rem;
.left-14
left: 3.5rem;
.-top-14
top: -3.5rem;
.-right-14
right: -3.5rem;
.-bottom-14
bottom: -3.5rem;
.-left-14
left: -3.5rem;
.inset-16
top: 4rem; right: 4rem; bottom: 4rem; left: 4rem;
.-inset-16
top: -4rem; right: -4rem; bottom: -4rem; left: -4rem;
.inset-y-16
top: 4rem; bottom: 4rem;
.-inset-y-16
top: -4rem; bottom: -4rem;
.inset-x-16
right: 4rem; left: 4rem;
.-inset-x-16
right: -4rem; left: -4rem;
.top-16
top: 4rem;
.right-16
right: 4rem;
.bottom-16
bottom: 4rem;
.left-16
left: 4rem;
.-top-16
top: -4rem;
.-right-16
right: -4rem;
.-bottom-16
bottom: -4rem;
.-left-16
left: -4rem;
.inset-20
top: 5rem; right: 5rem; bottom: 5rem; left: 5rem;
.-inset-20
top: -5rem; right: -5rem; bottom: -5rem; left: -5rem;
.inset-y-20
top: 5rem; bottom: 5rem;
.-inset-y-20
top: -5rem; bottom: -5rem;
.inset-x-20
right: 5rem; left: 5rem;
.-inset-x-20
right: -5rem; left: -5rem;
.top-20
top: 5rem;
.right-20
right: 5rem;
.bottom-20
bottom: 5rem;
.left-20
left: 5rem;
.-top-20
top: -5rem;
.-right-20
right: -5rem;
.-bottom-20
bottom: -5rem;
.-left-20
left: -5rem;
.inset-24
top: 6rem; right: 6rem; bottom: 6rem; left: 6rem;
.-inset-24
top: -6rem; right: -6rem; bottom: -6rem; left: -6rem;
.inset-y-24
top: 6rem; bottom: 6rem;
.-inset-y-24
top: -6rem; bottom: -6rem;
.inset-x-24
right: 6rem; left: 6rem;
.-inset-x-24
right: -6rem; left: -6rem;
.top-24
top: 6rem;
.right-24
right: 6rem;
.bottom-24
bottom: 6rem;
.left-24
left: 6rem;
.-top-24
top: -6rem;
.-right-24
right: -6rem;
.-bottom-24
bottom: -6rem;
.-left-24
left: -6rem;
.inset-28
top: 7rem; right: 7rem; bottom: 7rem; left: 7rem;
.-inset-28
top: -7rem; right: -7rem; bottom: -7rem; left: -7rem;
.inset-y-28
top: 7rem; bottom: 7rem;
.-inset-y-28
top: -7rem; bottom: -7rem;
.inset-x-28
right: 7rem; left: 7rem;
.-inset-x-28
right: -7rem; left: -7rem;
.top-28
top: 7rem;
.right-28
right: 7rem;
.bottom-28
bottom: 7rem;
.left-28
left: 7rem;
.-top-28
top: -7rem;
.-right-28
right: -7rem;
.-bottom-28
bottom: -7rem;
.-left-28
left: -7rem;
.inset-32
top: 8rem; right: 8rem; bottom: 8rem; left: 8rem;
.-inset-32
top: -8rem; right: -8rem; bottom: -8rem; left: -8rem;
.inset-y-32
top: 8rem; bottom: 8rem;
.-inset-y-32
top: -8rem; bottom: -8rem;
.inset-x-32
right: 8rem; left: 8rem;
.-inset-x-32
right: -8rem; left: -8rem;
.top-32
top: 8rem;
.right-32
right: 8rem;
.bottom-32
bottom: 8rem;
.left-32
left: 8rem;
.-top-32
top: -8rem;
.-right-32
right: -8rem;
.-bottom-32
bottom: -8rem;
.-left-32
left: -8rem;
.inset-36
top: 9rem; right: 9rem; bottom: 9rem; left: 9rem;
.-inset-36
top: -9rem; right: -9rem; bottom: -9rem; left: -9rem;
.inset-y-36
top: 9rem; bottom: 9rem;
.-inset-y-36
top: -9rem; bottom: -9rem;
.inset-x-36
right: 9rem; left: 9rem;
.-inset-x-36
right: -9rem; left: -9rem;
.top-36
top: 9rem;
.right-36
right: 9rem;
.bottom-36
bottom: 9rem;
.left-36
left: 9rem;
.-top-36
top: -9rem;
.-right-36
right: -9rem;
.-bottom-36
bottom: -9rem;
.-left-36
left: -9rem;
.inset-40
top: 10rem; right: 10rem; bottom: 10rem; left: 10rem;
.-inset-40
top: -10rem; right: -10rem; bottom: -10rem; left: -10rem;
.inset-y-40
top: 10rem; bottom: 10rem;
.-inset-y-40
top: -10rem; bottom: -10rem;
.inset-x-40
right: 10rem; left: 10rem;
.-inset-x-40
right: -10rem; left: -10rem;
.top-40
top: 10rem;
.right-40
right: 10rem;
.bottom-40
bottom: 10rem;
.left-40
left: 10rem;
.-top-40
top: -10rem;
.-right-40
right: -10rem;
.-bottom-40
bottom: -10rem;
.-left-40
left: -10rem;
.inset-44
top: 11rem; right: 11rem; bottom: 11rem; left: 11rem;
.-inset-44
top: -11rem; right: -11rem; bottom: -11rem; left: -11rem;
.inset-y-44
top: 11rem; bottom: 11rem;
.-inset-y-44
top: -11rem; bottom: -11rem;
.inset-x-44
right: 11rem; left: 11rem;
.-inset-x-44
right: -11rem; left: -11rem;
.top-44
top: 11rem;
.right-44
right: 11rem;
.bottom-44
bottom: 11rem;
.left-44
left: 11rem;
.-top-44
top: -11rem;
.-right-44
right: -11rem;
.-bottom-44
bottom: -11rem;
.-left-44
left: -11rem;
.inset-48
top: 12rem; right: 12rem; bottom: 12rem; left: 12rem;
.-inset-48
top: -12rem; right: -12rem; bottom: -12rem; left: -12rem;
.inset-y-48
top: 12rem; bottom: 12rem;
.-inset-y-48
top: -12rem; bottom: -12rem;
.inset-x-48
right: 12rem; left: 12rem;
.-inset-x-48
right: -12rem; left: -12rem;
.top-48
top: 12rem;
.right-48
right: 12rem;
.bottom-48
bottom: 12rem;
.left-48
left: 12rem;
.-top-48
top: -12rem;
.-right-48
right: -12rem;
.-bottom-48
bottom: -12rem;
.-left-48
left: -12rem;
.inset-52
top: 13rem; right: 13rem; bottom: 13rem; left: 13rem;
.-inset-52
top: -13rem; right: -13rem; bottom: -13rem; left: -13rem;
.inset-y-52
top: 13rem; bottom: 13rem;
.-inset-y-52
top: -13rem; bottom: -13rem;
.inset-x-52
right: 13rem; left: 13rem;
.-inset-x-52
right: -13rem; left: -13rem;
.top-52
top: 13rem;
.right-52
right: 13rem;
.bottom-52
bottom: 13rem;
.left-52
left: 13rem;
.-top-52
top: -13rem;
.-right-52
right: -13rem;
.-bottom-52
bottom: -13rem;
.-left-52
left: -13rem;
.inset-56
top: 14rem; right: 14rem; bottom: 14rem; left: 14rem;
.-inset-56
top: -14rem; right: -14rem; bottom: -14rem; left: -14rem;
.inset-y-56
top: 14rem; bottom: 14rem;
.-inset-y-56
top: -14rem; bottom: -14rem;
.inset-x-56
right: 14rem; left: 14rem;
.-inset-x-56
right: -14rem; left: -14rem;
.top-56
top: 14rem;
.right-56
right: 14rem;
.bottom-56
bottom: 14rem;
.left-56
left: 14rem;
.-top-56
top: -14rem;
.-right-56
right: -14rem;
.-bottom-56
bottom: -14rem;
.-left-56
left: -14rem;
.inset-60
top: 15rem; right: 15rem; bottom: 15rem; left: 15rem;
.-inset-60
top: -15rem; right: -15rem; bottom: -15rem; left: -15rem;
.inset-y-60
top: 15rem; bottom: 15rem;
.-inset-y-60
top: -15rem; bottom: -15rem;
.inset-x-60
right: 15rem; left: 15rem;
.-inset-x-60
right: -15rem; left: -15rem;
.top-60
top: 15rem;
.right-60
right: 15rem;
.bottom-60
bottom: 15rem;
.left-60
left: 15rem;
.-top-60
top: -15rem;
.-right-60
right: -15rem;
.-bottom-60
bottom: -15rem;
.-left-60
left: -15rem;
.inset-64
top: 16rem; right: 16rem; bottom: 16rem; left: 16rem;
.-inset-64
top: -16rem; right: -16rem; bottom: -16rem; left: -16rem;
.inset-y-64
top: 16rem; bottom: 16rem;
.-inset-y-64
top: -16rem; bottom: -16rem;
.inset-x-64
right: 16rem; left: 16rem;
.-inset-x-64
right: -16rem; left: -16rem;
.top-64
top: 16rem;
.right-64
right: 16rem;
.bottom-64
bottom: 16rem;
.left-64
left: 16rem;
.-top-64
top: -16rem;
.-right-64
right: -16rem;
.-bottom-64
bottom: -16rem;
.-left-64
left: -16rem;
.inset-72
top: 18rem; right: 18rem; bottom: 18rem; left: 18rem;
.-inset-72
top: -18rem; right: -18rem; bottom: -18rem; left: -18rem;
.inset-y-72
top: 18rem; bottom: 18rem;
.-inset-y-72
top: -18rem; bottom: -18rem;
.inset-x-72
right: 18rem; left: 18rem;
.-inset-x-72
right: -18rem; left: -18rem;
.top-72
top: 18rem;
.right-72
right: 18rem;
.bottom-72
bottom: 18rem;
.left-72
left: 18rem;
.-top-72
top: -18rem;
.-right-72
right: -18rem;
.-bottom-72
bottom: -18rem;
.-left-72
left: -18rem;
.inset-80
top: 20rem; right: 20rem; bottom: 20rem; left: 20rem;
.-inset-80
top: -20rem; right: -20rem; bottom: -20rem; left: -20rem;
.inset-y-80
top: 20rem; bottom: 20rem;
.-inset-y-80
top: -20rem; bottom: -20rem;
.inset-x-80
right: 20rem; left: 20rem;
.-inset-x-80
right: -20rem; left: -20rem;
.top-80
top: 20rem;
.right-80
right: 20rem;
.bottom-80
bottom: 20rem;
.left-80
left: 20rem;
.-top-80
top: -20rem;
.-right-80
right: -20rem;
.-bottom-80
bottom: -20rem;
.-left-80
left: -20rem;
.inset-96
top: 24rem; right: 24rem; bottom: 24rem; left: 24rem;
.-inset-96
top: -24rem; right: -24rem; bottom: -24rem; left: -24rem;
.inset-y-96
top: 24rem; bottom: 24rem;
.-inset-y-96
top: -24rem; bottom: -24rem;
.inset-x-96
right: 24rem; left: 24rem;
.-inset-x-96
right: -24rem; left: -24rem;
.top-96
top: 24rem;
.right-96
right: 24rem;
.bottom-96
bottom: 24rem;
.left-96
left: 24rem;
.-top-96
top: -24rem;
.-right-96
right: -24rem;
.-bottom-96
bottom: -24rem;
.-left-96
left: -24rem;
.inset-auto
top: auto; right: auto; bottom: auto; left: auto;
.inset-y-auto
top: auto; bottom: auto;
.inset-x-auto
right: auto; left: auto;
.top-auto
top: auto;
.right-auto
right: auto;
.bottom-auto
bottom: auto;
.left-auto
left: auto;
.inset-1/2
top: 50%; right: 50%; bottom: 50%; left: 50%;
.inset-2/3
top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%;
.inset-1/4
top: 25%; right: 25%; bottom: 25%; left: 25%;
.inset-3/4
top: 75%; right: 75%; bottom: 75%; left: 75%;
.inset-full
top: 100%; right: 100%; bottom: 100%; left: 100%;
.-inset-1/2
top: -50%; right: -50%; bottom: -50%; left: -50%;
.-inset-2/3
top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left: -66.666667%;
.-inset-1/4
top: -25%; right: -25%; bottom: -25%; left: -25%;
.-inset-3/4
top: -75%; right: -75%; bottom: -75%; left: -75%;
.-inset-full
top: -100%; right: -100%; bottom: -100%; left: -100%;
.inset-x-1/2
right: 50%; left: 50%;
.inset-x-2/3
right: 66.666667%; left: 66.666667%;
.inset-x-1/4
right: 25%; left: 25%;
.inset-x-3/4
right: 75%; left: 75%;
.inset-x-full
right: 100%; left: 100%;
.-inset-x-1/2
right: -50%; left: -50%;
.-inset-x-2/3
right: -66.666667%; left: -66.666667%;
.-inset-x-1/4
right: -25%; left: -25%;
.-inset-x-3/4
right: -75%; left: -75%;
.-inset-x-full
right: -100%; left: -100%;
.inset-y-1/2
top: 50%; bottom: 50%;
.inset-y-2/3
top: 66.666667%; bottom: 66.666667%;
.inset-y-1/4
top: 25%; bottom: 25%;
.inset-y-3/4
top: 75%; bottom: 75%;
.inset-y-full
top: 100%; bottom: 100%;
.-inset-y-1/2
top: -50%; bottom: -50%;
.-inset-y-2/3
top: -66.666667%; bottom: -66.666667%;
.-inset-y-1/4
top: -25%; bottom: -25%;
.-inset-y-3/4
top: -75%; bottom: -75%;
.-inset-y-full
top: -100%; bottom: -100%;
.top-1/2
top: 50%;
.top-2/3
top: 66.666667%;
.top-1/4
top: 25%;
.top-3/4
top: 75%;
.top-full
top: 100%;
.-top-1/2
top: -50%;
.-top-2/3
top: -66.666667%;
.-top-1/4
top: -25%;
.-top-3/4
top: -75%;
.-top-full
top: -100%;
.right-1/2
right: 50%;
.right-2/3
right: 66.666667%;
.right-1/4
right: 25%;
.right-3/4
right: 75%;
.right-full
right: 100%;
.-right-1/2
right: -50%;
.-right-2/3
right: -66.666667%;
.-right-1/4
right: -25%;
.-right-3/4
right: -75%;
.-right-full
right: -100%;
.bottom-1/2
bottom: 50%;
.bottom-2/3
bottom: 66.666667%;
.bottom-1/4
bottom: 25%;
.bottom-3/4
bottom: 75%;
.bottom-full
bottom: 100%;
.-bottom-1/2
bottom: -50%;
.-bottom-2/3
bottom: -66.666667%;
.-bottom-1/4
bottom: -25%;
.-bottom-3/4
bottom: -75%;
.-bottom-full
bottom: -100%;
.left-1/2
left: 50%;
.left-2/3
left: 66.666667%;
.left-1/4
left: 25%;
.left-3/4
left: 75%;
.left-full
left: 100%;
.-left-1/2
left: -50%;
.-left-2/3
left: -66.666667%;
.-left-1/4
left: -25%;
.-left-3/4
left: -75%;
.-left-full
left: -100%;
Visibility
Show or hide an element without changing the layout of a document.
.visible
visibility: visible;
.invisible
visibility: hidden;
Z-index
Set the z-order of a positioned element and its descendants or flex items.
.z-0
z-index: 0;
.z-10
z-index: 10;
.z-20
z-index: 20;
.z-30
z-index: 30;
.z-40
z-index: 40;
.z-50
z-index: 50;
.z-auto
z-index: auto;
Spacing
Padding
Set the padding area of an element on all sides, vertically, horizontally, or just on one side.
.p-0
padding: 0;
.p-0.5
padding: 0.125rem;
.p-1
padding: 0.25rem;
.p-1.5
padding: 0.375rem;
.p-2
padding: 0.5rem;
.p-2.5
padding: 0.625rem;
.p-3
padding: 0.75rem;
.p-3.5
padding: 0.875rem;
.p-4
padding: 1rem;
.p-5
padding: 1.25rem;
.p-6
padding: 1.5rem;
.p-8
padding: 2rem;
.p-10
padding: 2.5rem;
.p-11
padding: 2.75rem;
.p-12
padding: 3rem;
.p-14
padding: 3.5rem;
.p-16
padding: 4rem;
.p-20
padding: 5rem;
.p-24
padding: 6rem;
.p-28
padding: 7rem;
.p-32
padding: 8rem;
.p-36
padding: 9rem;
.p-40
padding: 10rem;
.p-44
padding: 11rem;
.p-48
padding: 12rem;
.p-52
padding: 13rem;
.p-56
padding: 14rem;
.p-64
padding: 16rem;
.p-72
padding: 18rem;
.p-80
padding: 20rem;
.p-96
padding: 24rem;
.p-px
padding: 1px;
.py-0
padding-top: 0; padding-bottom: 0;
.px-0
padding-left: 0; padding-right: 0;
.py-0.5
padding-top: 0.125rem; padding-bottom: 0.125rem;
.px-0.5
padding-left: 0.125rem; padding-right: 0.125rem;
.py-1
padding-top: 0.25rem; padding-bottom: 0.25rem;
.px-1
padding-left: 0.25rem; padding-right: 0.25rem;
.py-1.5
padding-top: 0.375rem; padding-bottom: 0.375rem;
.px-1.5
padding-left: 0.375rem; padding-right: 0.375rem;
.py-2
padding-top: 0.5rem; padding-bottom: 0.5rem;
.px-2
padding-left: 0.5rem; padding-right: 0.5rem;
.py-2.5
padding-top: 0.625rem; padding-bottom: 0.625rem;
.px-2.5
padding-left: 0.625rem; padding-right: 0.625rem;
.py-3
padding-top: 0.75rem; padding-bottom: 0.75rem;
.px-3
padding-left: 0.75rem; padding-right: 0.75rem;
.py-3.5
padding-top: 0.875rem; padding-bottom: 0.875rem;
.px-3.5
padding-left: 0.875rem; padding-right: 0.875rem;
.py-4
padding-top: 1rem; padding-bottom:1rem;
.px-4
padding-left: 1rem; padding-right: 1rem;
.py-5
padding-top: 1.25rem; padding-bottom: 1.25rem;
.px-5
padding-left: 1.25rem; padding-right: 1.25rem;
.py-6
padding-top: 1.5rem; padding-bottom: 1.5rem;
.px-6
padding-left: 1.5rem; padding-right: 1.5rem;
.py-7
padding-top: 1.75rem; padding-bottom: 1.75rem;
.px-7
padding-left: 1.75rem; padding-right: 1.75rem;
.py-8
padding-top: 2rem; padding-bottom: 2rem;
.px-8
padding-left: 2rem; padding-right: 2rem;
.py-9
padding-top: 2.25rem; padding-bottom: 2.25rem;
.px-9
padding-left: 2.25rem; padding-right: 2.25rem;
.py-10
padding-top: 2.5rem; padding-bottom: 2.5rem;
.px-10
padding-left: 2.5rem; padding-right: 2.5rem;
.py-11
padding-top: 2.75rem; padding-bottom: 2.75rem;
.px-11
padding-left: 2.75rem; padding-right: 2.75rem;
.py-12
padding-top: 3rem; padding-bottom: 3rem;
.px-12
padding-left: 3rem; padding-right: 3rem;
.py-14
padding-top: 3.5rem; padding-bottom: 3.5rem;
.px-14
padding-left: 3.5rem; padding-right: 3.5rem;
.py-16
padding-top: 4rem; padding-bottom: 4rem;
.px-16
padding-left: 4rem; padding-right: 4rem;
.py-20
padding-top: 5rem; padding-bottom: 5rem;
.px-20
padding-left: 5rem; padding-right: 5rem;
.py-24
padding-top: 6rem; padding-bottom: 6rem;
.px-24
padding-left: 6rem; padding-right: 6rem;
.py-28
padding-top: 7rem; padding-bottom: 7rem;
.px-28
padding-left: 7rem; padding-right: 7rem;
.py-32
padding-top: 8rem; padding-bottom: 8rem;
.px-32
padding-left: 8rem; padding-right: 8rem;
.py-36
padding-top: 9rem; padding-bottom: 9rem;
.px-36
padding-left: 9rem; padding-right: 9rem;
.py-40
padding-top: 10rem; padding-bottom: 10rem;
.px-40
padding-left: 10rem; padding-right: 10rem;
.py-44
padding-top: 11rem; padding-bottom: 11rem;
.px-44
padding-left: 11rem; padding-right: 11rem;
.py-48
padding-top: 12rem; padding-bottom: 12rem;
.px-48
padding-left: 12rem; padding-right: 12rem;
.py-52
padding-top: 13rem; padding-bottom: 13rem;
.px-52
padding-left: 13rem; padding-right: 13rem;
.py-56
padding-top: 14rem; padding-bottom: 14rem;
.px-56
padding-left: 14rem; padding-right: 14rem;
.py-60
padding-top: 15rem; padding-bottom: 15rem;
.px-60
padding-left: 15rem; padding-right: 15rem;
.py-64
padding-top: 16rem; padding-bottom: 16rem;
.px-64
padding-left: 16rem; padding-right: 16rem;
.py-72
padding-top: 18rem; padding-bottom: 18rem;
.px-72
padding-left: 18rem; padding-right: 18rem;
.py-80
padding-top: 20rem; padding-bottom: 20rem;
.px-80
padding-left: 20rem; padding-right: 20rem;
.py-96
padding-top: 24rem; padding-bottom: 24rem;
.px-96
padding-left: 24rem; padding-right: 24rem;
.py-px
padding-top: 1px; padding-bottom: 1px;
.px-px
padding-left: 1px; padding-right: 1px;
.pt-0
padding-top: 0;
.pr-0
padding-right: 0;
.pb-0
padding-bottom: 0;
.pl-0
padding-left: 0;
.pt-0.5
padding-top: 0.125rem;
.pr-0.5
padding-right: 0.125rem;
.pb-0.5
padding-bottom: 0.125rem;
.pl-0.5
padding-left: 0.125rem;
.pt-1
padding-top: 0.25rem;
.pr-1
padding-right: 0.25rem;
.pb-1
padding-bottom: 0.25rem;
.pl-1
padding-left: 0.25rem;
.pt-1.5
padding-top: 0.375rem;
.pr-1.5
padding-right: 0.375rem;
.pb-1.5
padding-bottom: 0.375rem;
.pl-1.5
padding-left: 0.375rem;
.pt-2
padding-top: 0.5rem;
.pr-2
padding-right: 0.5rem;
.pb-2
padding-bottom: 0.5rem;
.pl-2
padding-left: 0.5rem;
.pt-2.5
padding-top: 0.625rem;
.pr-2.5
padding-right: 0.625rem;
.pb-2.5
padding-bottom: 0.625rem;
.pl-2.5
padding-left: 0.625rem;
.pt-3
padding-top: 0.75rem;
.pr-3
padding-right: 0.75rem;
.pb-3
padding-bottom: 0.75rem;
.pl-3
padding-left: 0.75rem;
.pt-3.5
padding-top: 0.875rem;
.pr-3.5
padding-right: 0.875rem;
.pb-3.5
padding-bottom: 0.875rem;
.pl-3.5
padding-left: 0.875rem;
.pt-4
padding-top: 1rem;
.pr-4
padding-right: 1rem;
.pb-4
padding-bottom: 1rem;
.pl-4
padding-left: 1rem;
.pt-5
padding-top: 1.25rem;
.pr-5
padding-right: 1.25rem;
.pb-5
padding-bottom: 1.25rem;
.pl-5
padding-left: 1.25rem;
.pt-6
padding-top: 1.5rem;
.pr-6
padding-right: 1.5rem;
.pb-6
padding-bottom: 1.5rem;
.pl-6
padding-left: 1.5rem;
.pt-7
padding-top: 1.75rem;
.pr-7
padding-right: 1.75rem;
.pb-7
padding-bottom: 1.75rem;
.pl-7
padding-left: 1.75rem;
.pt-8
padding-top: 2rem;
.pr-8
padding-right: 2rem;
.pb-8
padding-bottom: 2rem;
.pl-8
padding-left: 2rem;
.pt-9
padding-top: 2.25rem;
.pr-9
padding-right: 2.25rem;
.pb-9
padding-bottom: 2.25rem;
.pl-9
padding-left: 2.25rem;
.pt-10
padding-top: 2.5rem;
.pr-10
padding-right: 2.5rem;
.pb-10
padding-bottom: 2.5rem;
.pl-10
padding-left: 2.5rem;
.pt-11
padding-top: 2.75rem;
.pr-11
padding-right: 2.75rem;
.pb-11
padding-bottom: 2.75rem;
.pl-11
padding-left: 2.75rem;
.pt-12
padding-top: 3rem;
.pr-12
padding-right: 3rem;
.pb-12
padding-bottom: 3rem;
.pl-12
padding-left: 3rem;
.pt-14
padding-top: 3.5rem;
.pr-14
padding-right: 3.5rem;
.pb-14
padding-bottom: 3.5rem;
.pl-14
padding-left: 3.5rem;
.pt-16
padding-top: 4rem;
.pr-16
padding-right: 4rem;
.pb-16
padding-bottom: 4rem;
.pl-16
padding-left: 4rem;
.pt-20
padding-top: 5rem;
.pr-20
padding-right: 5rem;
.pb-20
padding-bottom: 5rem;
.pl-20
padding-left: 5rem;
.pt-24
padding-top: 6rem;
.pr-24
padding-right: 6rem;
.pb-24
padding-bottom: 6rem;
.pl-24
padding-left: 6rem;
.pt-28
padding-top: 7rem;
.pr-28
padding-right: 7rem;
.pb-28
padding-bottom: 7rem;
.pl-28
padding-left: 7rem;
.pt-32
padding-top: 8rem;
.pr-32
padding-right: 8rem;
.pb-32
padding-bottom: 8rem;
.pl-32
padding-left: 8rem;
.pt-36
padding-top: 9rem;
.pr-36
padding-right: 9rem;
.pb-36
padding-bottom: 9rem;
.pl-36
padding-left: 9rem;
.pt-40
padding-top: 10rem;
.pr-40
padding-right: 10rem;
.pb-40
padding-bottom: 10rem;
.pl-40
padding-left: 10rem;
.pt-44
padding-top: 11rem;
.pr-44
padding-right: 11rem;
.pb-44
padding-bottom: 11rem;
.pl-44
padding-left: 11rem;
.pt-48
padding-top: 12rem;
.pr-48
padding-right: 12rem;
.pb-48
padding-bottom: 12rem;
.pl-48
padding-left: 12rem;
.pt-52
padding-top: 13rem;
.pr-52
padding-right: 13rem;
.pb-52
padding-bottom: 13rem;
.pl-52
padding-left: 13rem;
.pt-56
padding-top: 14rem;
.pr-56
padding-right: 14rem;
.pb-56
padding-bottom: 14rem;
.pl-56
padding-left: 14rem;
.pt-60
padding-top: 15rem;
.pr-60
padding-right: 15rem;
.pb-60
padding-bottom: 15rem;
.pl-60
padding-left: 15rem;
.pt-64
padding-top: 16rem;
.pr-64
padding-right: 16rem;
.pb-64
padding-bottom: 16rem;
.pl-64
padding-left: 16rem;
.pt-72
padding-top: 18rem;
.pr-72
padding-right: 18rem;
.pb-72
padding-bottom: 18rem;
.pl-72
padding-left: 18rem;
.pt-80
padding-top: 20rem;
.pr-80
padding-right: 20rem;
.pb-80
padding-bottom: 20rem;
.pl-80
padding-left: 20rem;
.pt-96
padding-top: 24rem;
.pr-96
padding-right: 24rem;
.pb-96
padding-bottom: 24rem;
.pl-96
padding-left: 24rem;
.pt-px
padding-top: 1px;
.pr-px
padding-right: 1px;
.pb-px
padding-bottom: 1px;
.pl-px
padding-left: 1px;
Margin
Set the margin area of an element on all sides, vertically, horizontally, or just on one side.
.m-0
margin: 0;
.m-0.5
margin: 0.125rem;
.m-1
margin: 0.25rem;
.m-1.5
margin: 0.325rem;
.m-2
margin: 0.5rem;
.m-2.5
margin: 0.625rem;
.m-3
margin: 0.75rem;
.m-3.5
margin: 0.875rem;
.m-4
margin: 1rem;
.m-5
margin: 1.25rem;
.m-6
margin: 1.5rem;
.m-8
margin: 2rem;
.m-10
margin: 2.5rem;
.m-11
margin: 2.75rem;
.m-12
margin: 3rem;
.m-14
margin: 3.5rem;
.m-16
margin: 4rem;
.m-20
margin: 5rem;
.m-24
margin: 6rem;
.m-28
margin: 7rem;
.m-32
margin: 8rem;
.m-36
margin: 9rem;
.m-40
margin: 10rem;
.m-44
margin: 11rem;
.m-48
margin: 12rem;
.m-52
margin: 13rem;
.m-56
margin: 14rem;
.m-64
margin: 16rem;
.m-72
margin: 18rem;
.m-80
margin: 20rem;
.m-96
margin: 24rem;
.m-px
margin: 1px;
.my-0
margin-top: 0; margin-bottom: 0;
.mx-0
margin-left: 0; margin-right: 0;
.my-0.5
margin-top: 0.125rem; margin-bottom: 0.125rem;
.mx-0.5
margin-left: 0.125rem; margin-right: 0.125rem;
.my-1
margin-top: 0.25rem; margin-bottom: 0.25rem;
.mx-1
margin-left: 0.25rem; margin-right: 0.25rem;
.my-1.5
margin-top: 0.375rem; margin-bottom: 0.375rem;
.mx-1.5
margin-left: 0.375rem; margin-right: 0.375rem;
.my-2
margin-top: 0.5rem; margin-bottom: 0.5rem;
.mx-2
margin-left: 0.5rem; margin-right: 0.5rem;
.my-2.5
margin-top: 0.625rem; margin-bottom: 0.625rem;
.mx-2.5
margin-left: 0.625rem; margin-right: 0.625rem;
.my-3
margin-top: 0.75rem; margin-bottom: 0.75rem;
.mx-3
margin-left: 0.75rem; margin-right: 0.75rem;
.my-3.5
margin-top: 0.875rem; margin-bottom: 0.875rem;
.mx-3.5
margin-left: 0.875rem; margin-right: 0.875rem;
.my-4
margin-top: 1rem; margin-bottom: 1rem;
.mx-4
margin-left: 1rem; margin-right: 1rem;
.my-5
margin-top: 1.25rem; margin-bottom: 1.25rem;
.mx-5
margin-left: 1.25rem; margin-right: 1.25rem;
.my-6
margin-top: 1.5rem; margin-bottom: 1.5rem;
.mx-6
margin-left: 1.5rem; margin-right: 1.5rem;
.my-7
margin-top: 1.75rem; margin-bottom: 1.75rem;
.mx-7
margin-left: 1.75rem; margin-right: 1.75rem;
.my-8
margin-top: 2rem; margin-bottom: 2rem;
.mx-8
margin-left: 2rem; margin-right: 2rem;
.my-9
margin-top: 2.25rem; margin-bottom: 2.25rem;
.mx-9
margin-left: 2.25rem; margin-right: 2.25rem;
.my-10
margin-top: 2.5rem; margin-bottom: 2.5rem;
.mx-10
margin-left: 2.5rem; margin-right: 2.5rem;
.my-11
margin-top: 2.75rem; margin-bottom: 2.75rem;
.mx-11
margin-left: 2.75rem; margin-right: 2.75rem;
.my-12
margin-top: 3rem; margin-bottom: 3rem;
.mx-12
margin-left: 3rem; margin-right: 3rem;
.my-14
margin-top: 3.5rem; margin-bottom: 3.5rem;
.mx-14
margin-left: 3.5rem; margin-right: 3.5rem;
.my-16
margin-top: 4rem; margin-bottom: 4rem;
.mx-16
margin-left: 4rem; margin-right: 4rem;
.my-16
margin-top: 4rem; margin-bottom: 4rem;
.mx-16
margin-left: 4rem; margin-right: 4rem;
.my-20
margin-top: 5rem; margin-bottom: 5rem;
.mx-20
margin-left: 5rem; margin-right: 5rem;
.my-24
margin-top: 6rem; margin-bottom: 6rem;
.mx-24
margin-left: 6rem; margin-right: 6rem;
.my-28
margin-top: 7rem; margin-bottom: 7rem;
.mx-28
margin-left: 7rem; margin-right: 7rem;
.my-32
margin-top: 8rem; margin-bottom: 8rem;
.mx-32
margin-left: 8rem; margin-right: 8rem;
.my-36
margin-top: 9rem; margin-bottom: 9rem;
.mx-36
margin-left: 9rem; margin-right: 9rem;
.my-40
margin-top: 10rem; margin-bottom: 10rem;
.mx-40
margin-left: 10rem; margin-right: 10rem;
.my-44
margin-top: 11rem; margin-bottom: 11rem;
.mx-44
margin-left: 11rem; margin-right: 11rem;
.my-48
margin-top: 12rem; margin-bottom: 12rem;
.mx-48
margin-left: 12rem; margin-right: 12rem;
.my-52
margin-top: 13rem; margin-bottom: 13rem;
.mx-52
margin-left: 13rem; margin-right: 13rem;
.my-56
margin-top: 14rem; margin-bottom: 14rem;
.mx-56
margin-left: 14rem; margin-right: 14rem;
.my-60
margin-top: 15rem; margin-bottom: 15rem;
.mx-60
margin-left: 15rem; margin-right: 15rem;
.my-64
margin-top: 16rem; margin-bottom: 16rem;
.mx-64
margin-left: 16rem; margin-right: 16rem;
.my-72
margin-top: 18rem; margin-bottom: 18rem;
.mx-72
margin-left: 18rem; margin-right: 18rem;
.my-80
margin-top: 20rem; margin-bottom: 20rem;
.mx-80
margin-left: 20rem; margin-right: 20rem;
.my-96
margin-top: 24rem; margin-bottom: 24rem;
.mx-96
margin-left: 24rem; margin-right: 24rem;
.my-px
margin-top: 1px; margin-bottom: 1px;
.mx-px
margin-left: 1px; margin-right: 1px;
.mt-0
margin-top: 0;
.mr-0
margin-right: 0;
.mb-0
margin-bottom: 0;
.ml-0
margin-left: 0;
.mt-0.5
margin-top: 0.125rem;
.mr-0.5
margin-right: 0.125rem;
.mb-0.5
margin-bottom: 0.125rem;
.ml-0.5
margin-left: 0.125rem;
.mt-1
margin-top: 0.25rem;
.mr-1
margin-right: 0.25rem;
.mb-1
margin-bottom: 0.25rem;
.ml-1
margin-left: 0.25rem;
.mt-1.5
margin-top: 0.375rem;
.mr-1.5
margin-right: 0.375rem;
.mb-1.5
margin-bottom: 0.375rem;
.ml-1.5
margin-left: 0.375rem;
.mt-2
margin-top: 0.5rem;
.mr-2
margin-right: 0.5rem;
.mb-2
margin-bottom: 0.5rem;
.ml-2
margin-left: 0.5rem;
.mt-2.5
margin-top: 0.625rem;
.mr-2.5
margin-right: 0.625rem;
.mb-2.5
margin-bottom: 0.625rem;
.ml-2.5
margin-left: 0.625rem;
.mt-3
margin-top: 0.75rem;
.mr-3
margin-right: 0.75rem;
.mb-3
margin-bottom: 0.75rem;
.ml-3
margin-left: 0.75rem;
.mt-3.5
margin-top: 0.875rem;
.mr-3.5
margin-right: 0.875rem;
.mb-3.5
margin-bottom: 0.875rem;
.ml-3.5
margin-left: 0.875rem;
.mt-4
margin-top: 1rem;
.mr-4
margin-right: 1rem;
.mb-4
margin-bottom: 1rem;
.ml-4
margin-left: 1rem;
.mt-5
margin-top: 1.25rem;
.mr-5
margin-right: 1.25rem;
.mb-5
margin-bottom: 1.25rem;
.ml-5
margin-left: 1.25rem;
.mt-6
margin-top: 1.5rem;
.mr-6
margin-right: 1.5rem;
.mb-6
margin-bottom: 1.5rem;
.ml-6
margin-left: 1.5rem;
.mt-7
margin-top: 1.75rem;
.mr-7
margin-right: 1.75rem;
.mb-7
margin-bottom: 1.75rem;
.ml-7
margin-left: 1.75rem;
.mt-8
margin-top: 2rem;
.mr-8
margin-right: 2rem;
.mb-8
margin-bottom: 2rem;
.ml-8
margin-left: 2rem;
.mt-9
margin-top: 2.25rem;
.mr-9
margin-right: 2.25rem;
.mb-9
margin-bottom: 2.25rem;
.ml-9
margin-left: 2.25rem;
.mt-10
margin-top: 2.5rem;
.mr-10
margin-right: 2.5rem;
.mb-10
margin-bottom: 2.5rem;
.ml-10
margin-left: 2.5rem;
.mt-11
margin-top: 2.75rem;
.mr-11
margin-right: 2.75rem;
.mb-11
margin-bottom: 2.75rem;
.ml-11
margin-left: 2.75rem;
.mt-12
margin-top: 3rem;
.mr-12
margin-right: 3rem;
.mb-12
margin-bottom: 3rem;
.ml-12
margin-left: 3rem;
.mt-14
margin-top: 3.5rem;
.mr-14
margin-right: 3.5rem;
.mb-14
margin-bottom: 3.5rem;
.ml-14
margin-left: 3.5rem;
.mt-16
margin-top: 4rem;
.mr-16
margin-right: 4rem;
.mb-16
margin-bottom: 4rem;
.ml-16
margin-left: 4rem;
.mt-20
margin-top: 5rem;
.mr-20
margin-right: 5rem;
.mb-20
margin-bottom: 5rem;
.ml-20
margin-left: 5rem;
.mt-24
margin-top: 6rem;
.mr-24
margin-right: 6rem;
.mb-24
margin-bottom: 6rem;
.ml-24
margin-left: 6rem;
.mt-28
margin-top: 7rem;
.mr-28
margin-right: 7rem;
.mb-28
margin-bottom: 7rem;
.ml-28
margin-left: 7rem;
.mt-32
margin-top: 8rem;
.mr-32
margin-right: 8rem;
.mb-32
margin-bottom: 8rem;
.ml-32
margin-left: 8rem;
.mt-36
margin-top: 9rem;
.mr-36
margin-right: 9rem;
.mb-36
margin-bottom: 9rem;
.ml-36
margin-left: 9rem;
.mt-40
margin-top: 10rem;
.mr-40
margin-right: 10rem;
.mb-40
margin-bottom: 10rem;
.ml-40
margin-left: 10rem;
.mt-44
margin-top: 11rem;
.mr-44
margin-right: 11rem;
.mb-44
margin-bottom: 11rem;
.ml-44
margin-left: 11rem;
.mt-48
margin-top: 12rem;
.mr-48
margin-right: 12rem;
.mb-48
margin-bottom: 12rem;
.ml-48
margin-left: 12rem;
.mt-52
margin-top: 13rem;
.mr-52
margin-right: 13rem;
.mb-52
margin-bottom: 13rem;
.ml-52
margin-left: 13rem;
.mt-56
margin-top: 14rem;
.mr-56
margin-right: 14rem;
.mb-56
margin-bottom: 14rem;
.ml-56
margin-left: 14rem;
.mt-60
margin-top: 15rem;
.mr-60
margin-right: 15rem;
.mb-60
margin-bottom: 15rem;
.ml-60
margin-left: 15rem;
.mt-64
margin-top: 16rem;
.mr-64
margin-right: 16rem;
.mb-64
margin-bottom: 16rem;
.ml-64
margin-left: 16rem;
.mt-72
margin-top: 18rem;
.mr-72
margin-right: 18rem;
.mb-72
margin-bottom: 18rem;
.ml-72
margin-left: 18rem;
.mt-80
margin-top: 20rem;
.mr-80
margin-right: 20rem;
.mb-80
margin-bottom: 20rem;
.ml-80
margin-left: 20rem;
.mt-96
margin-top: 24rem;
.mr-96
margin-right: 24rem;
.mb-96
margin-bottom: 24rem;
.ml-96
margin-left: 24rem;
.mt-px
margin-top: 1px;
.mr-px
margin-right: 1px;
.mb-px
margin-bottom: 1px;
.ml-px
margin-left: 1px;
.-m-0
margin: 0;
.-m-0.5
margin: -0.125rem;
.-m-1
margin: -0.25rem;
.-m-1.5
margin: -0.325rem;
.-m-2
margin: -0.5rem;
.-m-2.5
margin: -0.625rem;
.-m-3
margin: -0.75rem;
.-m-3.5
margin: -0.875rem;
.-m-4
margin: -1rem;
.-m-5
margin: -1.25rem;
.-m-6
margin: -1.5rem;
.-m-8
margin: -2rem;
.-m-10
margin: -2.5rem;
.-m-11
margin: -2.75rem;
.-m-12
margin: -3rem;
.-m-14
margin: -3.5rem;
.-m-16
margin: -4rem;
.-m-20
margin: -5rem;
.-m-24
margin: -6rem;
.-m-28
margin: -7rem;
.-m-32
margin: -8rem;
.-m-36
margin: -9rem;
.-m-40
margin: -10rem;
.-m-44
margin: -11rem;
.-m-48
margin: -12rem;
.-m-52
margin: -13rem;
.-m-56
margin: -14rem;
.-m-64
margin: -16rem;
.-m-72
margin: -18rem;
.-m-80
margin: -20rem;
.-m-96
margin: -24rem;
.-m-px
margin: -1px;
.-my-0
margin-top: 0; margin-bottom: 0;
.-mx-0
margin-left: 0; margin-right: 0;
.-my-0.5
margin-top: -0.125rem; margin-bottom: -0.125rem;
.-mx-0.5
margin-left: -0.125rem; margin-right: -0.125rem;
.-my-1
margin-top: -0.25rem; margin-bottom: -0.25rem;
.-mx-1
margin-left: -0.25rem; margin-right: -0.25rem;
.-my-1.5
margin-top: -0.375rem; margin-bottom: -0.375rem;
.-mx-1.5
margin-left: -0.375rem; margin-right: -0.375rem;
.-my-2
margin-top: -0.5rem; margin-bottom: -0.5rem;
.-mx-2
margin-left: -0.5rem; margin-right: -0.5rem;
.-my-2.5
margin-top: -0.625rem; margin-bottom: -0.625rem;
.-mx-2.5
margin-left: -0.625rem; margin-right: -0.625rem;
.-my-3
margin-top: -0.75rem; margin-bottom: -0.75rem;
.-mx-3
margin-left: -0.75rem; margin-right: -0.75rem;
.-my-3.5
margin-top: -0.875rem; margin-bottom: -0.875rem;
.-mx-3.5
margin-left: -0.875rem; margin-right: -0.875rem;
.-my-4
margin-top: -1rem; margin-bottom: -1rem;
.-mx-4
margin-left: -1rem; margin-right: -1rem;
.-my-5
margin-top: -1.25rem; margin-bottom: -1.25rem;
.-mx-5
margin-left: -1.25rem; margin-right: -1.25rem;
.-my-6
margin-top: -1.5rem; margin-bottom: -1.5rem;
.-mx-6
margin-left: -1.5rem; margin-right: -1.5rem;
.-my-7
margin-top: -1.75rem; margin-bottom: -1.75rem;
.-mx-7
margin-left: -1.75rem; margin-right: -1.75rem;
.-my-8
margin-top: -2rem; margin-bottom: -2rem;
.-mx-8
margin-left: -2rem; margin-right: -2rem;
.-my-9
margin-top: -2.25rem; margin-bottom: -2.25rem;
.-mx-9
margin-left: -2.25rem; margin-right: -2.25rem;
.-my-10
margin-top: -2.5rem; margin-bottom: -2.5rem;
.-mx-10
margin-left: -2.5rem; margin-right: -2.5rem;
.-my-11
margin-top: -2.75rem; margin-bottom: -2.75rem;
.-mx-11
margin-left: -2.75rem; margin-right: -2.75rem;
.-my-12
margin-top: -3rem; margin-bottom: -3rem;
.-mx-12
margin-left: -3rem; margin-right: -3rem;
.-my-14
margin-top: -3.5rem; margin-bottom: -3.5rem;
.-mx-14
margin-left: -3.5rem; margin-right: -3.5rem;
.-my-16
margin-top: -4rem; margin-bottom: -4rem;
.-mx-16
margin-left: -4rem; margin-right: -4rem;
.-my-16
margin-top: -4rem; margin-bottom: -4rem;
.-mx-16
margin-left: -4rem; margin-right: -4rem;
.-my-20
margin-top: -5rem; margin-bottom: -5rem;
.-mx-20
margin-left: -5rem; margin-right: -5rem;
.-my-24
margin-top: -6rem; margin-bottom: -6rem;
.-mx-24
margin-left: -6rem; margin-right: -6rem;
.-my-28
margin-top: -7rem; margin-bottom: -7rem;
.-mx-28
margin-left: -7rem; margin-right: -7rem;
.-my-32
margin-top: -8rem; margin-bottom: -8rem;
.-mx-32
margin-left: -8rem; margin-right: -8rem;
.-my-36
margin-top: -9rem; margin-bottom: -9rem;
.-mx-36
margin-left: -9rem; margin-right: -9rem;
.-my-40
margin-top: -10rem; margin-bottom: -10rem;
.-mx-40
margin-left: -10rem; margin-right: -10rem;
.-my-44
margin-top: -11rem; margin-bottom: -11rem;
.-mx-44
margin-left: -11rem; margin-right: -11rem;
.-my-48
margin-top: -12rem; margin-bottom: -12rem;
.-mx-48
margin-left: -12rem; margin-right: -12rem;
.-my-52
margin-top: -13rem; margin-bottom: -13rem;
.-mx-52
margin-left: -13rem; margin-right: -13rem;
.-my-56
margin-top: -14rem; margin-bottom: -14rem;
.-mx-56
margin-left: -14rem; margin-right: -14rem;
.-my-60
margin-top: -15rem; margin-bottom: -15rem;
.-mx-60
margin-left: -15rem; margin-right: -15rem;
.-my-64
margin-top: -16rem; margin-bottom: -16rem;
.-mx-64
margin-left: -16rem; margin-right: -16rem;
.-my-72
margin-top: -18rem; margin-bottom: -18rem;
.-mx-72
margin-left: -18rem; margin-right: -18rem;
.-my-80
margin-top: -20rem; margin-bottom: -20rem;
.-mx-80
margin-left: -20rem; margin-right: -20rem;
.-my-96
margin-top: -24rem; margin-bottom: -24rem;
.-mx-96
margin-left: -24rem; margin-right: -24rem;
.-my-px
margin-top: -1px; margin-bottom: -1px;
.-mx-px
margin-left: -1px; margin-right: -1px;
.-mt-0
margin-top: 0;
.-mr-0
margin-right: 0;
.-mb-0
margin-bottom: 0;
.-ml-0
margin-left: 0;
.-mt-0.5
margin-top: -0.125rem;
.-mr-0.5
margin-right: -0.125rem;
.-mb-0.5
margin-bottom: -0.125rem;
.-ml-0.5
margin-left: -0.125rem;
.-mt-1
margin-top: -0.25rem;
.-mr-1
margin-right: -0.25rem;
.-mb-1
margin-bottom: -0.25rem;
.-ml-1
margin-left: -0.25rem;
.-mt-1.5
margin-top: -0.375rem;
.-mr-1.5
margin-right: -0.375rem;
.-mb-1.5
margin-bottom: -0.375rem;
.-ml-1.5
margin-left: -0.375rem;
.-mt-2
margin-top: -0.5rem;
.-mr-2
margin-right: -0.5rem;
.-mb-2
margin-bottom: -0.5rem;
.-ml-2
margin-left: -0.5rem;
.-mt-2.5
margin-top: -0.625rem;
.-mr-2.5
margin-right: -0.625rem;
.-mb-2.5
margin-bottom: -0.625rem;
.-ml-2.5
margin-left: -0.625rem;
.-mt-3
margin-top: -0.75rem;
.-mr-3
margin-right: -0.75rem;
.-mb-3
margin-bottom: -0.75rem;
.-ml-3
margin-left: -0.75rem;
.-mt-3.5
margin-top: -0.875rem;
.-mr-3.5
margin-right: -0.875rem;
.-mb-3.5
margin-bottom: -0.875rem;
.-ml-3.5
margin-left: -0.875rem;
.-mt-4
margin-top: -1rem;
.-mr-4
margin-right: -1rem;
.-mb-4
margin-bottom: -1rem;
.-ml-4
margin-left: -1rem;
.-mt-5
margin-top: -1.25rem;
.-mr-5
margin-right: -1.25rem;
.-mb-5
margin-bottom: -1.25rem;
.-ml-5
margin-left: -1.25rem;
.-mt-6
margin-top: -1.5rem;
.-mr-6
margin-right: -1.5rem;
.-mb-6
margin-bottom: -1.5rem;
.-ml-6
margin-left: -1.5rem;
.-mt-7
margin-top: -1.75rem;
.-mr-7
margin-right: -1.75rem;
.-mb-7
margin-bottom: -1.75rem;
.-ml-7
margin-left: -1.75rem;
.-mt-8
margin-top: -2rem;
.-mr-8
margin-right: -2rem;
.-mb-8
margin-bottom: -2rem;
.-ml-8
margin-left: -2rem;
.-mt-9
margin-top: -2.25rem;
.-mr-9
margin-right: -2.25rem;
.-mb-9
margin-bottom: -2.25rem;
.-ml-9
margin-left: -2.25rem;
.-mt-10
margin-top: -2.5rem;
.-mr-10
margin-right: -2.5rem;
.-mb-10
margin-bottom: -2.5rem;
.-ml-10
margin-left: -2.5rem;
.-mt-11
margin-top: -2.75rem;
.-mr-11
margin-right: -2.75rem;
.-mb-11
margin-bottom: -2.75rem;
.-ml-11
margin-left: -2.75rem;
.-mt-12
margin-top: -3rem;
.-mr-12
margin-right: -3rem;
.-mb-12
margin-bottom: -3rem;
.-ml-12
margin-left: -3rem;
.-mt-14
margin-top: -3.5rem;
.-mr-14
margin-right: -3.5rem;
.-mb-14
margin-bottom: -3.5rem;
.-ml-14
margin-left: -3.5rem;
.-mt-16
margin-top: -4rem;
.-mr-16
margin-right: -4rem;
.-mb-16
margin-bottom: -4rem;
.-ml-16
margin-left: -4rem;
.-mt-20
margin-top: -5rem;
.-mr-20
margin-right: -5rem;
.-mb-20
margin-bottom: -5rem;
.-ml-20
margin-left: -5rem;
.-mt-24
margin-top: -6rem;
.-mr-24
margin-right: -6rem;
.-mb-24
margin-bottom: -6rem;
.-ml-24
margin-left: -6rem;
.-mt-28
margin-top: -7rem;
.-mr-28
margin-right: -7rem;
.-mb-28
margin-bottom: -7rem;
.-ml-28
margin-left: -7rem;
.-mt-32
margin-top: -8rem;
.-mr-32
margin-right: -8rem;
.-mb-32
margin-bottom: -8rem;
.-ml-32
margin-left: -8rem;
.-mt-36
margin-top: -9rem;
.-mr-36
margin-right: -9rem;
.-mb-36
margin-bottom: -9rem;
.-ml-36
margin-left: -9rem;
.-mt-40
margin-top: -10rem;
.-mr-40
margin-right: -10rem;
.-mb-40
margin-bottom: -10rem;
.-ml-40
margin-left: -10rem;
.-mt-44
margin-top: -11rem;
.-mr-44
margin-right: -11rem;
.-mb-44
margin-bottom: -11rem;
.-ml-44
margin-left: -11rem;
.-mt-48
margin-top: -12rem;
.-mr-48
margin-right: -12rem;
.-mb-48
margin-bottom: -12rem;
.-ml-48
margin-left: -12rem;
.-mt-52
margin-top: -13rem;
.-mr-52
margin-right: -13rem;
.-mb-52
margin-bottom: -13rem;
.-ml-52
margin-left: -13rem;
.-mt-56
margin-top: -14rem;
.-mr-56
margin-right: -14rem;
.-mb-56
margin-bottom: -14rem;
.-ml-56
margin-left: -14rem;
.-mt-60
margin-top: -15rem;
.-mr-60
margin-right: -15rem;
.-mb-60
margin-bottom: -15rem;
.-ml-60
margin-left: -15rem;
.-mt-64
margin-top: -16rem;
.-mr-64
margin-right: -16rem;
.-mb-64
margin-bottom: -16rem;
.-ml-64
margin-left: -16rem;
.-mt-72
margin-top: -18rem;
.-mr-72
margin-right: -18rem;
.-mb-72
margin-bottom: -18rem;
.-ml-72
margin-left: -18rem;
.-mt-80
margin-top: -20rem;
.-mr-80
margin-right: -20rem;
.-mb-80
margin-bottom: -20rem;
.-ml-80
margin-left: -20rem;
.-mt-96
margin-top: -24rem;
.-mr-96
margin-right: -24rem;
.-mb-96
margin-bottom: -24rem;
.-ml-96
margin-left: -24rem;
.-mt-px
margin-top: -1px;
.-mr-px
margin-right: -1px;
.-mb-px
margin-bottom: -1px;
.-ml-px
margin-left: -1px;
Space Between
Control the space between child elements using margins.
.space-x-0
margin-left: 0;
.space-x-0.5
margin-left: 0.125rem;
.space-x-1
margin-left: 0.25rem;
.space-x-1.5
margin-left: 0.375rem;
.space-x-2
margin-left: 0.5rem;
.space-x-2.5
margin-left: 0.625rem;
.space-x-3
margin-left: 0.75rem;
.space-x-3.5
margin-left: 0.875rem;
.space-x-4
margin-left: 1rem;
.space-x-5
margin-left: 1.25rem;
.space-x-6
margin-left: 1.5rem;
.space-x-7
margin-left: 1.75rem;
.space-x-8
margin-left: 2rem;
.space-x-9
margin-left: 2.25rem;
.space-x-10
margin-left: 2.5rem;
.space-x-11
margin-left: 2.75rem;
.space-x-12
margin-left: 3rem;
.space-x-14
margin-left: 3.5rem;
.space-x-16
margin-left: 4rem;
.space-x-20
margin-left: 5rem;
.space-x-24
margin-left: 6rem;
.space-x-28
margin-left: 7rem;
.space-x-32
margin-left: 8rem;
.space-x-36
margin-left: 9rem;
.space-x-40
margin-left: 10rem;
.space-x-44
margin-left: 11rem;
.space-x-48
margin-left: 12rem;
.space-x-52
margin-left: 13rem;
.space-x-56
margin-left: 14rem;
.space-x-60
margin-left: 15rem;
.space-x-64
margin-left: 16rem;
.space-x-72
margin-left: 18rem;
.space-x-80
margin-left: 20rem;
.space-x-96
margin-left: 24rem;
.space-x-px
margin-left: 1px;
.-space-x-0
margin-left: 0;
.-space-x-0.5
margin-left: -0.125rem;
.-space-x-1
margin-left: -0.25rem;
.-space-x-1.5
margin-left: -0.375rem;
.-space-x-2
margin-left: -0.5rem;
.-space-x-2.5
margin-left: -0.625rem;
.-space-x-3
margin-left: -0.75rem;
.-space-x-3.5
margin-left: -0.875rem;
.-space-x-4
margin-left: -1rem;
.-space-x-5
margin-left: -1.25rem;
.-space-x-6
margin-left: -1.5rem;
.-space-x-7
margin-left: -1.75rem;
.-space-x-8
margin-left: -2rem;
.-space-x-9
margin-left: -2.25rem;
.-space-x-10
margin-left: -2.5rem;
.-space-x-11
margin-left: -2.75rem;
.-space-x-12
margin-left: -3rem;
.-space-x-14
margin-left: -3.5rem;
.-space-x-16
margin-left: -4rem;
.-space-x-20
margin-left: -5rem;
.-space-x-24
margin-left: -6rem;
.-space-x-28
margin-left: -7rem;
.-space-x-32
margin-left: -8rem;
.-space-x-36
margin-left: -9rem;
.-space-x-40
margin-left: -10rem;
.-space-x-44
margin-left: -11rem;
.-space-x-48
margin-left: -12rem;
.-space-x-52
margin-left: -13rem;
.-space-x-56
margin-left: -14rem;
.-space-x-60
margin-left: -15rem;
.-space-x-64
margin-left: -16rem;
.-space-x-72
margin-left: -18rem;
.-space-x-80
margin-left: -20rem;
.-space-x-96
margin-left: -24rem;
.-space-x-px
margin-left: -1px;
.space-y-0
margin-top: 0;
.space-y-0.5
margin-top: 0.125rem;
.space-y-1
margin-top: 0.25rem;
.space-y-1.5
margin-top: 0.375rem;
.space-y-2
margin-top: 0.5rem;
.space-y-2.5
margin-top: 0.625rem;
.space-y-3
margin-top: 0.75rem;
.space-y-3.5
margin-top: 0.875rem;
.space-y-4
margin-top: 1rem;
.space-y-5
margin-top: 1.25rem;
.space-y-6
margin-top: 1.5rem;
.space-y-7
margin-top: 1.75rem;
.space-y-8
margin-top: 2rem;
.space-y-9
margin-top: 2.25rem;
.space-y-10
margin-top: 2.5rem;
.space-y-11
margin-top: 2.75rem;
.space-y-12
margin-top: 3rem;
.space-y-14
margin-top: 3.5rem;
.space-y-16
margin-top: 4rem;
.space-y-20
margin-top: 5rem;
.space-y-24
margin-top: 6rem;
.space-y-28
margin-top: 7rem;
.space-y-32
margin-top: 8rem;
.space-y-36
margin-top: 9rem;
.space-y-40
margin-top: 10rem;
.space-y-44
margin-top: 11rem;
.space-y-48
margin-top: 12rem;
.space-y-52
margin-top: 13rem;
.space-y-56
margin-top: 14rem;
.space-y-60
margin-top: 15rem;
.space-y-64
margin-top: 16rem;
.space-y-72
margin-top: 18rem;
.space-y-80
margin-top: 20rem;
.space-y-96
margin-top: 24rem;
.space-y-px
margin-top: 1px;
.-space-y-0
margin-top: -0;
.-space-y-0.5
margin-top: -0.125rem;
.-space-y-1
margin-top: -0.25rem;
.-space-y-1.5
margin-top: -0.375rem;
.-space-y-2
margin-top: -0.5rem;
.-space-y-2.5
margin-top: -0.625rem;
.-space-y-3
margin-top: -0.75rem;
.-space-y-3.5
margin-top: -0.875rem;
.-space-y-4
margin-top: -1rem;
.-space-y-5
margin-top: -1.25rem;
.-space-y-6
margin-top: -1.5rem;
.-space-y-7
margin-top: -1.75rem;
.-space-y-8
margin-top: -2rem;
.-space-y-9
margin-top: -2.25rem;
.-space-y-10
margin-top: -2.5rem;
.-space-y-11
margin-top: -2.75rem;
.-space-y-12
margin-top: -3rem;
.-space-y-14
margin-top: -3.5rem;
.-space-y-16
margin-top: -4rem;
.-space-y-20
margin-top: -5rem;
.-space-y-24
margin-top: -6rem;
.-space-y-28
margin-top: -7rem;
.-space-y-32
margin-top: -8rem;
.-space-y-36
margin-top: -9rem;
.-space-y-40
margin-top: -10rem;
.-space-y-44
margin-top: -11rem;
.-space-y-48
margin-top: -12rem;
.-space-y-52
margin-top: -13rem;
.-space-y-56
margin-top: -14rem;
.-space-y-60
margin-top: -15rem;
.-space-y-64
margin-top: -16rem;
.-space-y-72
margin-top: -18rem;
.-space-y-80
margin-top: -20rem;
.-space-y-96
margin-top: -24rem;
.-space-y-px
margin-top: -1px;
.space-x-reverse
--space-x-reverse: 1
.space-y-reverse
--space-y-reverse: 1
Backgrounds
Background Attachment
Set whether a background image's position is fixed within the viewport, or scrolls with its containing block.
.bg-fixed
background-attachment: fixed;
.bg-local
background-attachment: local;
.bg-scroll
background-attachment: scroll;
Background Clip
Set whether an element's background extends underneath its border box, padding box, or content box.
.bg-clip-border
background-clip: border-box;
.bg-clip-padding
background-clip: padding-box;
.bg-clip-content
background-clip: content-box;
.bg-clip-text
background-clip: text;
Background Color
Set the background color of an element.
.bg-transparent
background-color: transparent;
.bg-current
background-color: currentColor;
.bg-black
background-color: #000000;
.bg-white
background-color: #ffffff;
.bg-gray-50
background-color: #F9FAFB;
.bg-gray-100
background-color: #F3F4F6;
.bg-gray-200
background-color: #E5E7EB;
.bg-gray-300
background-color: #D1D5DB;
.bg-gray-400
background-color: #9CA3AF;
.bg-gray-500
background-color: #6B7280;
.bg-gray-600
background-color: #6B7280;
.bg-gray-700
background-color: #374151;
.bg-gray-800
background-color: #1F2937;
.bg-gray-900
background-color: #111827;
.bg-red-50
background-color: #FEF2F2;
.bg-red-100
background-color: #FEE2E2;
.bg-red-200
background-color: #FECACA;
.bg-red-300
background-color: #FCA5A5;
.bg-red-400
background-color: #F87171;
.bg-red-500
background-color: #EF4444;
.bg-red-600
background-color: #DC2626;
.bg-red-700
background-color: #B91C1C;
.bg-red-800
background-color: #991B1B;
.bg-red-900
background-color: #7F1D1D;
.bg-yellow-50
background-color: #FFFBEB;
.bg-yellow-100
background-color: #FEF3C7;
.bg-yellow-200
background-color: #FDE68A;
.bg-yellow-300
background-color: #FCD34D;
.bg-yellow-400
background-color: #FBBF24;
.bg-yellow-500
background-color: #F59E0B;
.bg-yellow-600
background-color: #D97706;
.bg-yellow-700
background-color: #B45309;
.bg-yellow-800
background-color: #92400E;
.bg-yellow-900
background-color: #78350F;
.bg-green-50
background-color: #ECFDF5;
.bg-green-100
background-color: #D1FAE5;
.bg-green-200
background-color: #A7F3D0;
.bg-green-300
background-color: #6EE7B7;
.bg-green-400
background-color: #34D399;
.bg-green-500
background-color: #10B981;
.bg-green-600
background-color: #059669;
.bg-green-700
background-color: #047857;
.bg-green-800
background-color: #065F46;
.bg-green-900
background-color: #064E3B;
.bg-blue-50
background-color: #EFF6FF;
.bg-blue-100
background-color: #DBEAFE;
.bg-blue-200
background-color: #BFDBFE;
.bg-blue-300
background-color: #93C5FD;
.bg-blue-400
background-color: #60A5FA;
.bg-blue-500
background-color: #3B82F6;
.bg-blue-600
background-color: #2563EB;
.bg-blue-700
background-color: #1D4ED8;
.bg-blue-800
background-color: #1E40AF;
.bg-blue-900
background-color: #1E3A8A;
.bg-indigo-50
background-color: #EEF2FF;
.bg-indigo-100
background-color: #E0E7FF;
.bg-indigo-200
background-color: #C7D2FE;
.bg-indigo-300
background-color: #A5B4FC;
.bg-indigo-400
background-color: #818CF8;
.bg-indigo-500
background-color: #6366F1;
.bg-indigo-600
background-color: #4F46E5;
.bg-indigo-700
background-color: #4338CA;
.bg-indigo-800
background-color: #3730A3;
.bg-indigo-900
background-color: #312E81;
.bg-purple-50
background-color: #F5F3FF;
.bg-purple-100
background-color: #EDE9FE;
.bg-purple-200
background-color: #DDD6FE;
.bg-purple-300
background-color: #C4B5FD;
.bg-purple-400
background-color: #A78BFA;
.bg-purple-500
background-color: #8B5CF6;
.bg-purple-600
background-color: #7C3AED;
.bg-purple-700
background-color: #6D28D9;
.bg-purple-800
background-color: #5B21B6;
.bg-purple-900
background-color: #4C1D95;
.bg-pink-50
background-color: #FDF2F8;
.bg-pink-100
background-color: #FCE7F3;
.bg-pink-200
background-color: #FBCFE8;
.bg-pink-300
background-color: #F9A8D4;
.bg-pink-400
background-color: #F472B6;
.bg-pink-500
background-color: #EC4899;
.bg-pink-600
background-color: #DB2777;
.bg-pink-700
background-color: #BE185D;
.bg-pink-800
background-color: #9D174D;
.bg-pink-900
background-color: #831843;
Background Opacity
Set the opacity of the background of an element.
.bg-opacity-0
--bg-opacity: 0;
.bg-opacity-5
--bg-opacity: 0.5;
.bg-opacity-10
--bg-opacity: 0.1;
.bg-opacity-20
--bg-opacity: 0.2;
.bg-opacity-25
--bg-opacity: 0.25;
.bg-opacity-30
--bg-opacity: 0.3;
.bg-opacity-40
--bg-opacity: 0.4;
.bg-opacity-50
--bg-opacity: 0.5;
.bg-opacity-60
--bg-opacity: 0.6;
.bg-opacity-70
--bg-opacity: 0.7;
.bg-opacity-75
--bg-opacity: 0.75;
.bg-opacity-80
--bg-opacity: 0.8;
.bg-opacity-90
--bg-opacity: 0.9;
.bg-opacity-95
--bg-opacity: 0.95;
.bg-opacity-100
--bg-opacity: 1;
Background Origin
Set the background's origin: from the border start, inside the border, or inside the padding.
bg-origin-border
background-origin: border-box;
.bg-origin-padding
background-origin: padding-box;
.bg-origin-content
background-origin: content-box;
Background Position
Set the initial position for each background image.
.bg-bottom
background-position: bottom;
.bg-center
background-position: center;
.bg-left
background-position: left;
.bg-left-bottom
background-position: left bottom;
.bg-left-top
background-position: left top;
.bg-right
background-position: right;
.bg-right-bottom
background-position: right bottom;
.bg-right-top
background-position: right top;
.bg-top
background-position: top;
Background Repeat
Set how background images are repeated.
.bg-repeat
background-repeat: repeat;
.bg-no-repeat
background-repeat: no-repeat;
.bg-repeat-x
background-repeat: repeat-x;
.bg-repeat-y
background-repeat: repeat-y;
.bg-repeat-round
background-repeat: round;
.bg-repeat-space
background-repeat: space;
Background Size
Set the size of the element's background image.
.bg-auto
background-size: auto;
.bg-cover
background-size: cover;
.bg-contain
background-size: contain;
Background Image
Set one or more background images on an element.
.bg-none
background-image: none;
.bg-gradient-to-t
background-image:background-image: background-image: linear-gradient(to top, var(--tw-gradient-stops));
.bg-gradient-to-tr
background-image: background-image: linear-gradient(to top right, var(--tw-gradient-stops));
.bg-gradient-to-r
background-image: background-image: linear-gradient(to right, var(--tw-gradient-stops));
.bg-gradient-to-br
background-image: background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
.bg-gradient-to-b
background-image: background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
.bg-gradient-to-bl
background-image: background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
.bg-gradient-to-l
background-image: background-image: linear-gradient(to left, var(--tw-gradient-stops));
.bg-gradient-to-tl
background-image: background-image: linear-gradient(to top left, var(--tw-gradient-stops));
Gradient Color Stops
Control the color stops in background gradients.
.from-transparent
background-color: transparent;
.from-current
background-color: currentColor;
.from-black
background-color: #000000;
.from-white
background-color: #ffffff;
.from-gray-50
background-color: #F9FAFB;
.from-gray-100
background-color: #F3F4F6;
.from-gray-200
background-color: #E5E7EB;
.from-gray-300
background-color: #D1D5DB;
.from-gray-400
background-color: #9CA3AF;
.from-gray-500
background-color: #6B7280;
.from-gray-600
background-color: #6B7280;
.from-gray-700
background-color: #374151;
.from-gray-800
background-color: #1F2937;
.from-gray-900
background-color: #111827;
.from-red-50
background-color: #FEF2F2;
.from-red-100
background-color: #FEE2E2;
.from-red-200
background-color: #FECACA;
.from-red-300
background-color: #FCA5A5;
.from-red-400
background-color: #F87171;
.from-red-500
background-color: #EF4444;
.from-red-600
background-color: #DC2626;
.from-red-700
background-color: #B91C1C;
.from-red-800
background-color: #991B1B;
.from-red-900
background-color: #7F1D1D;
.from-yellow-50
background-color: #FFFBEB;
.from-yellow-100
background-color: #FEF3C7;
.from-yellow-200
background-color: #FDE68A;
.from-yellow-300
background-color: #FCD34D;
.from-yellow-400
background-color: #FBBF24;
.from-yellow-500
background-color: #F59E0B;
.from-yellow-600
background-color: #D97706;
.from-yellow-700
background-color: #B45309;
.from-yellow-800
background-color: #92400E;
.from-yellow-900
background-color: #78350F;
.from-green-50
background-color: #ECFDF5;
.from-green-100
background-color: #D1FAE5;
.from-green-200
background-color: #A7F3D0;
.from-green-300
background-color: #6EE7B7;
.from-green-400
background-color: #34D399;
.from-green-500
background-color: #10B981;
.from-green-600
background-color: #059669;
.from-green-700
background-color: #047857;
.from-green-800
background-color: #065F46;
.from-green-900
background-color: #064E3B;
.from-blue-50
background-color: #EFF6FF;
.from-blue-100
background-color: #DBEAFE;
.from-blue-200
background-color: #BFDBFE;
.from-blue-300
background-color: #93C5FD;
.from-blue-400
background-color: #60A5FA;
.from-blue-500
background-color: #3B82F6;
.from-blue-600
background-color: #2563EB;
.from-blue-700
background-color: #1D4ED8;
.from-blue-800
background-color: #1E40AF;
.from-blue-900
background-color: #1E3A8A;
.from-indigo-50
background-color: #EEF2FF;
.from-indigo-100
background-color: #E0E7FF;
.from-indigo-200
background-color: #C7D2FE;
.from-indigo-300
background-color: #A5B4FC;
.from-indigo-400
background-color: #818CF8;
.from-indigo-500
background-color: #6366F1;
.from-indigo-600
background-color: #4F46E5;
.from-indigo-700
background-color: #4338CA;
.from-indigo-800
background-color: #3730A3;
.from-indigo-900
background-color: #312E81;
.from-purple-50
background-color: #F5F3FF;
.from-purple-100
background-color: #EDE9FE;
.from-purple-200
background-color: #DDD6FE;
.from-purple-300
background-color: #C4B5FD;
.from-purple-400
background-color: #A78BFA;
.from-purple-500
background-color: #8B5CF6;
.from-purple-600
background-color: #7C3AED;
.from-purple-700
background-color: #6D28D9;
.from-purple-800
background-color: #5B21B6;
.from-purple-900
background-color: #4C1D95;
.from-pink-50
background-color: #FDF2F8;
.from-pink-100
background-color: #FCE7F3;
.from-pink-200
background-color: #FBCFE8;
.from-pink-300
background-color: #F9A8D4;
.from-pink-400
background-color: #F472B6;
.from-pink-500
background-color: #EC4899;
.from-pink-600
background-color: #DB2777;
.from-pink-700
background-color: #BE185D;
.from-pink-800
background-color: #9D174D;
.from-pink-900
background-color: #831843;
.via-transparent
background-color: transparent;
.via-current
background-color: currentColor;
.via-black
background-color: #000000;
.via-white
background-color: #ffffff;
.via-gray-50
background-color: #F9FAFB;
.via-gray-100
background-color: #F3F4F6;
.via-gray-200
background-color: #E5E7EB;
.via-gray-300
background-color: #D1D5DB;
.via-gray-400
background-color: #9CA3AF;
.via-gray-500
background-color: #6B7280;
.via-gray-600
background-color: #6B7280;
.via-gray-700
background-color: #374151;
.via-gray-800
background-color: #1F2937;
.via-gray-900
background-color: #111827;
.via-red-50
background-color: #FEF2F2;
.via-red-100
background-color: #FEE2E2;
.via-red-200
background-color: #FECACA;
.via-red-300
background-color: #FCA5A5;
.via-red-400
background-color: #F87171;
.via-red-500
background-color: #EF4444;
.via-red-600
background-color: #DC2626;
.via-red-700
background-color: #B91C1C;
.via-red-800
background-color: #991B1B;
.via-red-900
background-color: #7F1D1D;
.via-yellow-50
background-color: #FFFBEB;
.via-yellow-100
background-color: #FEF3C7;
.via-yellow-200
background-color: #FDE68A;
.via-yellow-300
background-color: #FCD34D;
.via-yellow-400
background-color: #FBBF24;
.via-yellow-500
background-color: #F59E0B;
.via-yellow-600
background-color: #D97706;
.via-yellow-700
background-color: #B45309;
.via-yellow-800
background-color: #92400E;
.via-yellow-900
background-color: #78350F;
.via-green-50
background-color: #ECFDF5;
.via-green-100
background-color: #D1FAE5;
.via-green-200
background-color: #A7F3D0;
.via-green-300
background-color: #6EE7B7;
.via-green-400
background-color: #34D399;
.via-green-500
background-color: #10B981;
.via-green-600
background-color: #059669;
.via-green-700
background-color: #047857;
.via-green-800
background-color: #065F46;
.via-green-900
background-color: #064E3B;
.via-blue-50
background-color: #EFF6FF;
.via-blue-100
background-color: #DBEAFE;
.via-blue-200
background-color: #BFDBFE;
.via-blue-300
background-color: #93C5FD;
.via-blue-400
background-color: #60A5FA;
.via-blue-500
background-color: #3B82F6;
.via-blue-600
background-color: #2563EB;
.via-blue-700
background-color: #1D4ED8;
.via-blue-800
background-color: #1E40AF;
.via-blue-900
background-color: #1E3A8A;
.via-indigo-50
background-color: #EEF2FF;
.via-indigo-100
background-color: #E0E7FF;
.via-indigo-200
background-color: #C7D2FE;
.via-indigo-300
background-color: #A5B4FC;
.via-indigo-400
background-color: #818CF8;
.via-indigo-500
background-color: #6366F1;
.via-indigo-600
background-color: #4F46E5;
.via-indigo-700
background-color: #4338CA;
.via-indigo-800
background-color: #3730A3;
.via-indigo-900
background-color: #312E81;
.via-purple-50
background-color: #F5F3FF;
.via-purple-100
background-color: #EDE9FE;
.via-purple-200
background-color: #DDD6FE;
.via-purple-300
background-color: #C4B5FD;
.via-purple-400
background-color: #A78BFA;
.via-purple-500
background-color: #8B5CF6;
.via-purple-600
background-color: #7C3AED;
.via-purple-700
background-color: #6D28D9;
.via-purple-800
background-color: #5B21B6;
.via-purple-900
background-color: #4C1D95;
.via-pink-50
background-color: #FDF2F8;
.via-pink-100
background-color: #FCE7F3;
.via-pink-200
background-color: #FBCFE8;
.via-pink-300
background-color: #F9A8D4;
.via-pink-400
background-color: #F472B6;
.via-pink-500
background-color: #EC4899;
.via-pink-600
background-color: #DB2777;
.via-pink-700
background-color: #BE185D;
.via-pink-800
background-color: #9D174D;
.via-pink-900
background-color: #831843;
.to-transparent
background-color: transparent;
.to-current
background-color: currentColor;
.to-black
background-color: #000000;
.to-white
background-color: #ffffff;
.to-gray-50
background-color: #F9FAFB;
.to-gray-100
background-color: #F3F4F6;
.to-gray-200
background-color: #E5E7EB;
.to-gray-300
background-color: #D1D5DB;
.to-gray-400
background-color: #9CA3AF;
.to-gray-500
background-color: #6B7280;
.to-gray-600
background-color: #6B7280;
.to-gray-700
background-color: #374151;
.to-gray-800
background-color: #1F2937;
.to-gray-900
background-color: #111827;
.to-red-50
background-color: #FEF2F2;
.to-red-100
background-color: #FEE2E2;
.to-red-200
background-color: #FECACA;
.to-red-300
background-color: #FCA5A5;
.to-red-400
background-color: #F87171;
.to-red-500
background-color: #EF4444;
.to-red-600
background-color: #DC2626;
.to-red-700
background-color: #B91C1C;
.to-red-800
background-color: #991B1B;
.to-red-900
background-color: #7F1D1D;
.to-yellow-50
background-color: #FFFBEB;
.to-yellow-100
background-color: #FEF3C7;
.to-yellow-200
background-color: #FDE68A;
.to-yellow-300
background-color: #FCD34D;
.to-yellow-400
background-color: #FBBF24;
.to-yellow-500
background-color: #F59E0B;
.to-yellow-600
background-color: #D97706;
.to-yellow-700
background-color: #B45309;
.to-yellow-800
background-color: #92400E;
.to-yellow-900
background-color: #78350F;
.to-green-50
background-color: #ECFDF5;
.to-green-100
background-color: #D1FAE5;
.to-green-200
background-color: #A7F3D0;
.to-green-300
background-color: #6EE7B7;
.to-green-400
background-color: #34D399;
.to-green-500
background-color: #10B981;
.to-green-600
background-color: #059669;
.to-green-700
background-color: #047857;
.to-green-800
background-color: #065F46;
.to-green-900
background-color: #064E3B;
.to-blue-50
background-color: #EFF6FF;
.to-blue-100
background-color: #DBEAFE;
.to-blue-200
background-color: #BFDBFE;
.to-blue-300
background-color: #93C5FD;
.to-blue-400
background-color: #60A5FA;
.to-blue-500
background-color: #3B82F6;
.to-blue-600
background-color: #2563EB;
.to-blue-700
background-color: #1D4ED8;
.to-blue-800
background-color: #1E40AF;
.to-blue-900
background-color: #1E3A8A;
.to-indigo-50
background-color: #EEF2FF;
.to-indigo-100
background-color: #E0E7FF;
.to-indigo-200
background-color: #C7D2FE;
.to-indigo-300
background-color: #A5B4FC;
.to-indigo-400
background-color: #818CF8;
.to-indigo-500
background-color: #6366F1;
.to-indigo-600
background-color: #4F46E5;
.to-indigo-700
background-color: #4338CA;
.to-indigo-800
background-color: #3730A3;
.to-indigo-900
background-color: #312E81;
.to-purple-50
background-color: #F5F3FF;
.to-purple-100
background-color: #EDE9FE;
.to-purple-200
background-color: #DDD6FE;
.to-purple-300
background-color: #C4B5FD;
.to-purple-400
background-color: #A78BFA;
.to-purple-500
background-color: #8B5CF6;
.to-purple-600
background-color: #7C3AED;
.to-purple-700
background-color: #6D28D9;
.to-purple-800
background-color: #5B21B6;
.to-purple-900
background-color: #4C1D95;
.to-pink-50
background-color: #FDF2F8;
.to-pink-100
background-color: #FCE7F3;
.to-pink-200
background-color: #FBCFE8;
.to-pink-300
background-color: #F9A8D4;
.to-pink-400
background-color: #F472B6;
.to-pink-500
background-color: #EC4899;
.to-pink-600
background-color: #DB2777;
.to-pink-700
background-color: #BE185D;
.to-pink-800
background-color: #9D174D;
.to-pink-900
background-color: #831843;
Filters
Filter
Apply graphical effects like blur or color shift to an element.
.filter
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
.filter-none
filter: none;
Blur
Apply Gaussian blur to an element.
.blur-none
--tw-blur: blur(0);
.blur-sm
--tw-blur: blur(4px);
.blur
--tw-blur: blur(8px);
.blur-md
--tw-blur: blur(12px);
.blur-lg
--tw-blur: blur(12px);
.blur-xl
--tw-blur: blur(24px);
.blur-2xl
--tw-blur: blur(40px);
.blur-3xl
--tw-blur: blur(64px);
Brightness
Apply a linear multiplier to an element, making it appear brighter or darker.
.brightness-0
brightness: brightness(0);
.brightness-50
brightness: brightness(.5);
.brightness-75
brightness: brightness(.75);
.brightness-90
brightness: brightness(.9);
.brightness-95
brightness: brightness(.95);
.brightness-100
brightness: brightness(1);
.brightness-105
brightness: brightness(1.05);
.brightness-110
brightness: brightness(1.1);
.brightness-125
brightness: brightness(1.25);
.brightness-150
brightness: brightness(1.5);
.brightness-200
brightness: brightness(2);
Contrast
Adjust the contrast of an element.
.contrast-0
contrast: contrast(0);
.contrast-50
contrast: contrast(.5);
.contrast-75
contrast: contrast(.75);
.contrast-100
contrast: contrast(1);
.contrast-125
contrast: contrast(1.25);
.contrast-150
contrast: contrast(1.5);
.contrast-200
contrast: contrast(2);
Drop Shadow
Apply a drop shadow effect to an element.
.drop-shadow-sm
filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
.drop-shadow
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
drop-shadow-md
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
.drop-shadow-lg
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
.drop-shadow-xl
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
.drop-shadow-2xl
filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
.drop-shadow-none
filter: drop-shadow(0 0 #0000);
Grayscale
Apply the grayscale styles to an element.
.grayscale-0
grayscale: grayscale(0);
.grayscale
grayscale: grayscale(1);
Hue Rotate
Rotate the hue of an element and its contents.
.-hue-rotate-180
hue-rotate: hue-rotate(-180deg);
.-hue-rotate-90
hue-rotate: hue-rotate(-90deg);
.-hue-rotate-60
hue-rotate: hue-rotate(-60deg);
.-hue-rotate-30
hue-rotate: hue-rotate(-30deg);
.-hue-rotate-15
hue-rotate: hue-rotate(-15deg);
.hue-rotate-0
hue-rotate: hue-rotate(0deg);
.hue-rotate-15
hue-rotate: hue-rotate(15deg);
.hue-rotate-30
hue-rotate: hue-rotate(30deg);
.hue-rotate-60
hue-rotate: hue-rotate(60deg);
.hue-rotate-90
hue-rotate: hue-rotate(90deg);
.hue-rotate-180
hue-rotate: hue-rotate(180deg);
Invert
Invert the color samples for an element.
.invert-0
invert: invert(0);
.invert
invert: invert(1);
Saturate
Super-saturate or desaturate an element.
.saturate-0
saturate: saturate(0);
.saturate-50
saturate: saturate(.5);
.saturate-100
saturate: saturate(1);
.saturate-150
saturate: saturate(1.50);
.saturate-200
saturate: saturate(2);
Sepia
Convert an element to sepia, giving it a warmer, more yellow/brown appearance.
.sepia-0
sepia: sepia(0);
.sepia
sepia: sepia(1);
Backdrop Filter
Apply graphical effects such as blurring or color shifting to the area behind an element.
.backdrop-filter
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
.backdrop-filter-none
backdrop-filter: none;
Backdrop Blur
Apply the backdrop blur filter to an element.
.backdrop-blur-0
backdrop-blur: blur(0);
.backdrop-blur-sm
backdrop-blur: blur(4px);
.backdrop-blur
backdrop-blur: blur(8px);
.backdrop-blur-md
backdrop-blur: blur(12px);
.backdrop-blur-lg
backdrop-blur: blur(16px);
.backdrop-blur-xl
backdrop-blur: blur(24px);
.backdrop-blur-2xl
backdrop-blur: blur(40px);
.backdrop-blur-3xl
backdrop-blur: blur(64px);
Backdrop Brightness
Apply the backdrop brightness to an element.
.backdrop-brightness-0
backdrop-brightness: brightness(0);
.backdrop-brightness-sm
backdrop-blur: blur(4px);backdrop-brightness: brightness(4px);
.backdrop-brightness
backdrop-brightness: brightness(8px);
.backdrop-brightness-md
backdrop-brightness: brightness(12px);
.backdrop-brightness-lg
backdrop-brightness: brightness(16px);
.backdrop-brightness-xl
backdrop-brightness: brightness(24px);
.backdrop-brightness-2xl
backdrop-brightness: brightness(40px);
.backdrop-brightness-3xl
backdrop-brightness: brightness(64px);
Backdrop Contrast
Apply the backdrop contrast to an element.
.backdrop-contrast-0
backdrop-contrast: contrast(0);
.backdrop-contrast-50
backdrop-contrast: contrast(.5);
.backdrop-contrast-75
backdrop-contrast: contrast(.75);
.backdrop-contrast-100
backdrop-contrast: contrast(1);
.backdrop-contrast-125
backdrop-contrast: contrast(1.25);
.backdrop-contrast-150
backdrop-contrast: contrast(1.5);
.backdrop-contrast-200
backdrop-contrast: contrast(2);
Backdrop Grayscale
Apply the backdrop grayscale to an element.
.backdrop-grayscale-0
backdrop-grayscale: grayscale(0);
.backdrop-grayscale
backdrop-grayscale: grayscale(1);
Backdrop Hue Rotate
Apply the backdrop hue rotate to an element.
.-backdrop-hue-rotate-180
backdrop-hue-rotate: hue-rotate(-180deg);
.-backdrop-hue-rotate-90
backdrop-hue-rotate: hue-rotate(-90deg);
.-backdrop-hue-rotate-60
backdrop-hue-rotate: hue-rotate(-60deg);
.-backdrop-hue-rotate-30
backdrop-hue-rotate: hue-rotate(-30deg);
.-backdrop-hue-rotate-15
backdrop-hue-rotate: hue-rotate(-15deg);
.backdrop-hue-rotate-0
backdrop-hue-rotate: hue-rotate(0deg);
.backdrop-hue-rotate-15
backdrop-hue-rotate: hue-rotate(15deg);
.backdrop-hue-rotate-30
backdrop-hue-rotate: hue-rotate(30deg);
.backdrop-hue-rotate-60
backdrop-hue-rotate: hue-rotate(60deg);
.backdrop-hue-rotate-90
backdrop-hue-rotate: hue-rotate(90deg);
.backdrop-hue-rotate-180
backdrop-hue-rotate: hue-rotate(180deg);
Backdrop Invert
Apply the backdrop invert to an element.
.backdrop-invert-0
backdrop-invert: invert(0);
.backdrop-invert
backdrop-invert: invert(1);
Backdrop Opacity
Apply the backdrop opacity to an element.
.backdrop-opacity-0
backdrop-opacity: opacity(0);
.backdrop-opacity-5
backdrop-opacity: opacity(0.05);
.backdrop-opacity-10
backdrop-opacity: opacity(0.1);
.backdrop-opacity-20
backdrop-opacity: opacity(0.2);
.backdrop-opacity-25
backdrop-opacity: opacity(0.25);
.backdrop-opacity-30
backdrop-opacity: opacity(0.3);
.backdrop-opacity-40
backdrop-opacity: opacity(0.4);
.backdrop-opacity-50
backdrop-opacity: opacity(0.5);
.backdrop-opacity-60
backdrop-opacity: opacity(0.6);
.backdrop-opacity-70
backdrop-opacity: opacity(0.7);
.backdrop-opacity-75
backdrop-opacity: opacity(0.75);
.backdrop-opacity-80
backdrop-opacity: opacity(0.8);
.backdrop-opacity-90
backdrop-opacity: opacity(0.9);
.backdrop-opacity-95
backdrop-opacity: opacity(0.95);
.backdrop-opacity-100
backdrop-opacity: opacity(1);
Backdrop Saturate
Apply the backdrop saturate to an element.
.backdrop-saturate-0
backdrop-saturate: saturate(0);
.backdrop-saturate-50
backdrop-saturate: saturate(.5);
.backdrop-saturate-100
backdrop-saturate: saturate(1);
.backdrop-saturate-150
backdrop-saturate: saturate(1.50);
.backdrop-saturate-200
backdrop-saturate: saturate(2);
Backdrop Sepia
Apply the backdrop sepia to an element.
.backdrop-sepia-0
backdrop-sepia: sepia(0);
.backdrop-sepia
backdrop-sepia: sepia(1);
Flexbox
Display
Set how a flex item will grow or shrink to fit the space available in its flex container.
.flex
display: flex;
.inline-flex
display: inline-flex;
Flex Direction
Set how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
.flex-row
flex-direction: row;
.flex-row-reverse
flex-direction: row-reverse;
.flex-col
flex-direction: column;
.flex-col-reverse
flex-direction: column-reverse;
Flex Wrap
Set whether flex items are forced onto one line or can wrap onto multiple lines.
.flex-nowrap
flex-wrap: nowrap;
.flex-wrap
flex-wrap: wrap;
.flex-wrap-reverse
flex-wrap: wrap-reverse;
Flex
Set how a flex item will grow or shrink to fit the space available in its flex container.
.flex-1
flex: 1 1 0%;
.flex-auto
flex: 1 1 auto;
.flex-initial
flex: 0 1 auto;
.flex-none
flex: none;
Flex Grow
Set the flex grow factor of a flex item's main size.
.flex-grow
flex-grow: 1;
.flex-grow-0
flex-grow: 0;
Flex Shrink
Set the flex shrink factor of a flex item.
.flex-shrink
flex-shrink: 1;
.flex-shrink-0
flex-shrink: 0;
Order
Set the order to lay out an item in a flex or grid container.
.order-first
order: -9999;
.order-last
order: 9999;
.order-none
order: 0;
.order-1
order: 1;
.order-2
order: 2;
.order-3
order: 3;
.order-4
order: 4;
.order-5
order: 5;
.order-6
order: 6;
.order-7
order: 7;
.order-8
order: 8;
.order-9
order: 9;
.order-10
order: 10;
.order-11
order: 11;
.order-12
order: 12;
Sizing
Width
Set the width of an element.
.w-0
width: 0;
.w-0.5
width: 0.125rem;
.w-1
width: 0.25rem;
.w-1.5
width: 0.375rem;
.w-2
width: 0.5rem;
.w-2.5
width: 0.625rem;
.w-3
width: 0.75rem;
.w-3.5
width: 0.875rem;
.w-4
width: 1rem;
.w-5
width: 1.25rem;
.w-6
width: 1.5rem;
.w-8
width: 2rem;
.w-10
width: 2.5rem;
.w-11
width: 2.75rem;
.w-12
width: 3rem;
.w-14
width: 3.5rem;
.w-16
width: 4rem;
.w-20
width: 5rem;
.w-24
width: 6rem;
.w-28
width: 7rem;
.w-32
width: 8rem;
.w-36
width: 9rem;
.w-40
width: 10rem;
.w-44
width: 11rem;
.w-48
width: 12rem;
.w-52
width: 13rem;
.w-56
width: 14rem;
.w-64
width: 16rem;
.w-72
width: 18rem;
.w-80
width: 20rem;
.w-96
width: 26rem;
.w-px
width: 1px;
.w-auto
width: auto;
.w-1/2
width: 50%
.w-1/3
width: 33.333333%;
.w-2/3
width: 66.666667%;
.w-1/4
width: 25%;
.w-2/4
width: 50%;
.w-3/4
width: 75%;
.w-1/5
width: 20%;
.w-2/5
width: 40%;
.w-3/5
width: 60%;
.w-4/5
width: 80%;
.w-1/6
width: 16.666667%;
.w-2/6
width: 33.333333%;
.w-3/6
width: 50%;
.w-4/6
width: 66.666667%;
.w-5/6
width: 83.333333%;
.w-1/12
width: 8.333333%;
.w-2/12
width: 16.666667%;
.w-3/12
width: 25%;
.w-4/12
width: 33.333333%;
.w-5/12
width: 41.666667%;
.w-6/12
width: 50%;
.w-7/12
width: 58.333333%;
.w-8/12
width: 66.666667%;
.w-9/12
width: 75%;
.w-10/12
width: 83.333333%;
.w-11/12
width: 91.666667%;
.w-full
width: 100%;
.w-screen
width: 100vw;
.w-min
width: min-content;
.w-max
width: max-content;
Min Width
Set the minimum width of an element.
.min-w-0
min-width: 0;
.min-w-full
min-width: 100%;
.min-w-min
min-width: min-content;
.min-w-max
min-width: max-content;
Max Width
Set the maximum width of an element.
.max-w-0
max-width: 0;
.max-w-none
max-width: none;
.max-w-xs
max-width: 20rem;
.max-w-sm
max-width: 24rem;
.max-w-md
max-width: 28rem;
.max-w-lg
max-width: 32rem;
.max-w-xl
max-width: 36rem;
.max-w-2xl
max-width: 42rem;
.max-w-3xl
max-width: 48rem;
.max-w-4xl
max-width: 56rem;
.max-w-5xl
max-width: 64rem;
.max-w-6xl
max-width: 72rem;
.max-w-7xl
max-width: 80rem;
.max-w-full
max-width: 100%;
.max-w-min
max-width: min-content;
.max-w-max
max-width: max-content;
.max-w-prose
max-width: 65ch;
.max-w-screen-sm
max-width: 640px;
.max-w-screen-md
max-width: 768px;
.max-w-screen-lg
max-width: 1024px;
.max-w-screen-xl
max-width: 1280px;
.max-w-screen-2xl
max-width: 1536px;
Height
Set the height of an element.
.h-0
height: 0;
.h-0.5
height: 0.125rem;
.h-1
height: 0.25rem;
.h-1.5
height: 0.375rem;
.h-2
height: 0.5rem;
.h-2.5
height: 0.625rem;
.h-3
height: 0.75rem;
.h-3.5
height: 0.875rem;
.h-4
height: 1rem;
.h-5
height: 1.25rem;
.h-6
height: 1.5rem;
.h-8
height: 2rem;
.h-10
height: 2.5rem;
.h-11
height: 2.75rem;
.h-12
height: 3rem;
.h-14
height: 3.5rem;
.h-16
height: 4rem;
.h-20
height: 5rem;
.h-24
height: 6rem;
.h-28
height: 7rem;
.h-32
height: 8rem;
.h-36
height: 9rem;
.h-40
height: 10rem;
.h-44
height: 11rem;
.h-48
height: 12rem;
.h-52
height: 13rem;
.h-56
height: 14rem;
.h-64
height: 16rem;
.h-72
height: 18rem;
.h-80
height: 20rem;
.h-96
height: 26rem;
.h-px
height: 1px;
.h-auto
height: auto;
.h-1/2
height: 50%
.h-1/3
height: 33.333333%;
.h-2/3
height: 66.666667%;
.h-1/4
height: 25%;
.h-2/4
height: 50%;
.h-3/4
height: 75%;
.h-1/5
height: 20%;
.h-2/5
height: 40%;
.h-3/5
height: 60%;
.h-4/5
height: 80%;
.h-1/6
height: 16.666667%;
.h-2/6
height: 33.333333%;
.h-3/6
height: 50%;
.h-4/6
height: 66.666667%;
.h-5/6
height: 83.333333%;
.h-full
height: 100%;
.h-screen
height: 100vh;
Min Height
Set the minimum height of an element.
.min-h-0
min-height: 0;
.min-h-full
min-height: 100%;
.min-h-screen
min-height: 100vh;
Max Height
Set the maximum height of an element.
.max-h-0
max-height: 0;
.max-h-0.5
max-height: 0.125rem;
.max-h-1
max-height: 0.25rem;
.max-h-1.5
max-height: 0.375rem;
.max-h-2
max-height: 0.5rem;
.max-h-2.5
max-height: 0.625rem;
.max-h-3
max-height: 0.75rem;
.max-h-3.5
max-height: 0.875rem;
.max-h-4
max-height: 1rem;
.max-h-5
max-height: 1.25rem;
.max-h-6
max-height: 1.5rem;
.max-h-8
max-height: 2rem;
.max-h-10
max-height: 2.5rem;
.max-h-11
max-height: 2.75rem;
.max-h-12
max-height: 3rem;
.max-h-14
max-height: 3.5rem;
.max-h-16
max-height: 4rem;
.max-h-20
max-height: 5rem;
.max-h-24
max-height: 6rem;
.max-h-28
max-height: 7rem;
.max-h-32
max-height: 8rem;
.max-h-36
max-height: 9rem;
.max-h-40
max-height: 10rem;
.max-h-44
max-height: 11rem;
.max-h-48
max-height: 12rem;
.max-h-52
max-height: 13rem;
.max-h-56
max-height: 14rem;
.max-h-64
max-height: 16rem;
.max-h-72
max-height: 18rem;
.max-h-80
max-height: 20rem;
.max-h-96
max-height: 26rem;
.max-h-px
max-height: 1px;
.max-h-full
max-height: 100%;
.max-h-screen
max-height: 100vh
Borders
Border Radius
Round the corners of an element's outer border edge.
.rounded-none
border-radius: 0;
.rounded-sm
border-radius: 0.125rem;
.rounded
border-radius: 0.25rem;
.rounded-md
border-radius: 0.375rem;
.rounded-lg
border-radius: 0.5rem;
.rounded-xl
border-radius: 0.75rem;
.rounded-2xl
border-radius: 1rem;
.rounded-3xl
border-radius: 1.5rem;
.rounded-full
border-radius: 9999px;
.rounded-t-none
border-top-left-radius: 0; border-top-right-radius: 0;
.rounded-r-none
border-top-right-radius: 0; border-bottom-right-radius: 0;
.rounded-b-none
border-bottom-right-radius: 0; border-bottom-left-radius: 0;
.rounded-l-none
border-top-left-radius: 0; border-bottom-left-radius: 0;
.rounded-t-sm
border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;
.rounded-r-sm
border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem0;
.rounded-b-sm
border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
.rounded-l-sm
border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
.rounded-t
border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
.rounded-r
border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
.rounded-b
border-bottom-right-radius: 0.25rem0; border-bottom-left-radius: 0.25rem;
.rounded-l
border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
.rounded-t-md
border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;
.rounded-r-md
border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
.rounded-b-md
border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
.rounded-l-md
border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
.rounded-t-lg
border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
.rounded-r-lg
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
.rounded-b-lg
border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
.rounded-l-lg
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
.rounded-t-xl
border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
.rounded-r-xl
border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
.rounded-b-xl
border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
.rounded-l-xl
border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
.rounded-t-2xl
border-top-left-radius: 1rem; border-top-right-radius: 1rem;
.rounded-r-2xl
border-top-right-radius: 1rem; border-bottom-right-radius: 1rem;
.rounded-b-2xl
border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem;
.rounded-l-2xl
border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;
.rounded-t-3xl
border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
.rounded-r-3xl
border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
.rounded-b-3xl
border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
.rounded-l-3xl
border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem0;
.rounded-t-full
border-top-left-radius: 9999px; border-top-right-radius: 9999px;
.rounded-r-full
border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
.rounded-b-full
border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
.rounded-l-full
border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
.rounded-tl-none
border-top-left-radius: 0;
.rounded-tr-none
border-top-right-radius: 0;
.rounded-br-none
border-bottom-right-radius: 0;
.rounded-bl-none
border-bottom-left-radius: 0;
.rounded-tl-sm
border-top-left-radius: 0.125rem;
.rounded-tr-sm
border-top-right-radius: 0.125rem;
.rounded-br-sm
border-bottom-right-radius: 0.125rem;
.rounded-bl-sm
border-bottom-left-radius: 0.125rem;
.rounded-tl
border-top-left-radius: 0.25rem;
.rounded-tr
border-top-right-radius: 0.25rem;
.rounded-br
border-bottom-right-radius: 0.25rem;
.rounded-bl
border-bottom-left-radius: 0.25rem;
.rounded-tl-md
border-top-left-radius: 0.375rem;
.rounded-tr-md
border-top-right-radius: 0.375rem;
.rounded-br-md
border-bottom-right-radius: 0.375rem;
.rounded-bl-md
border-bottom-left-radius: 0.375rem;
.rounded-tl-lg
border-top-left-radius: 0.5rem;
.rounded-tr-lg
border-top-right-radius: 0.5rem;
.rounded-br-lg
border-bottom-right-radius: 0.5rem0;
.rounded-bl-lg
border-bottom-left-radius: 0.5rem;
.rounded-tl-xl
border-top-left-radius: 0.75rem;
.rounded-tr-xl
border-top-right-radius: 0.75rem;
.rounded-br-xl
border-bottom-right-radius: 0.75rem;
.rounded-bl-xl
border-bottom-left-radius: 0.75rem;
.rounded-tl-2xl
border-top-left-radius: 1rem;
.rounded-tr-2xl
border-top-right-radius: 1rem;
.rounded-br-2xl
border-bottom-right-radius: 1rem;
.rounded-bl-2xl
border-bottom-left-radius: 1rem;
.rounded-tl-3xl
border-top-left-radius: 1.5rem;
.rounded-tr-3xl
border-top-right-radius: 1.5rem;
.rounded-br-3xl
border-bottom-right-radius: 1.5rem;
.rounded-bl-3xl
border-bottom-left-radius: 1.5rem;
.rounded-tl-full
border-top-left-radius: 9999px;
.rounded-tr-full
border-top-right-radius: 9999px;
.rounded-br-full
border-bottom-right-radius: 9999px;
.rounded-bl-full
border-bottom-left-radius: 9999px;
Border Width
Set the width of an element's border.
.border
border-width: 1px;
.border-0
border-width: 0;
.border-2
border-width: 2px;
.border-4
border-width: 4px;
.border-8
border-width: 8px;
.border-t
border-top-width: 1px;
.border-t-0
border-top-width: 0;
.border-t-2
border-top-width: 2px;
.border-t-4
border-top-width: 4px;
.border-t-8
border-top-width: 8px;
.border-r
border-right-width: 1px;
.border-r-0
border-right-width: 0;
.border-r-2
border-right-width: 2px;
.border-r-4
border-right-width: 4px;
.border-r-8
border-right-width: 8px;
.border-b
border-bottom-width: 1px;
.border-b-0
border-bottom-width: 0;
.border-b-2
border-bottom-width: 2px;
.border-b-4
border-bottom-width: 4px;
.border-b-8
border-bottom-width: 8px;
.border-l
border-left-width: 1px;
.border-l-0
border-left-width: 0;
.border-l-2
border-left-width: 2px;
.border-l-4
border-left-width: 4px;
.border-l-8
border-left-width: 8px;
Border Color
Set the color of an element's border.
.border-transparent
border-color: transparent;
.border-current
border-color: currentColor;
.border-black
border-color: #000000;
.border-white
border-color: #ffffff;
.border-gray-50
border-color: #F9FAFB;
.border-gray-100
border-color: #F3F4F6;
.border-gray-200
border-color: #E5E7EB;
.border-gray-300
border-color: #D1D5DB;
.border-gray-400
border-color: #9CA3AF;
.border-gray-500
border-color: #6B7280;
.border-gray-600
border-color: #6B7280;
.border-gray-700
border-color: #374151;
.border-gray-800
border-color: #1F2937;
.border-gray-900
border-color: #111827;
.border-red-50
border-color: #FEF2F2;
.border-red-100
border-color: #FEE2E2;
.border-red-200
border-color: #FECACA;
.border-red-300
border-color: #FCA5A5;
.border-red-400
border-color: #F87171;
.border-red-500
border-color: #EF4444;
.border-red-600
border-color: #DC2626;
.border-red-700
border-color: #B91C1C;
.border-red-800
border-color: #991B1B;
.border-red-900
border-color: #7F1D1D;
.border-yellow-50
border-color: #FFFBEB;
.border-yellow-100
border-color: #FEF3C7;
.border-yellow-200
border-color: #FDE68A;
.border-yellow-300
border-color: #FCD34D;
.border-yellow-400
border-color: #FBBF24;
.border-yellow-500
border-color: #F59E0B;
.border-yellow-600
border-color: #D97706;
.border-yellow-700
border-color: #B45309;
.border-yellow-800
border-color: #92400E;
.border-yellow-900
border-color: #78350F;
.border-green-50
border-color: #ECFDF5;
.border-green-100
border-color: #D1FAE5;
.border-green-200
border-color: #A7F3D0;
.border-green-300
border-color: #6EE7B7;
.border-green-400
border-color: #34D399;
.border-green-500
border-color: #10B981;
.border-green-600
border-color: #059669;
.border-green-700
border-color: #047857;
.border-green-800
border-color: #065F46;
.border-green-900
border-color: #064E3B;
.border-blue-50
border-color: #EFF6FF;
.border-blue-100
border-color: #DBEAFE;
.border-blue-200
border-color: #BFDBFE;
.border-blue-300
border-color: #93C5FD;
.border-blue-400
border-color: #60A5FA;
.border-blue-500
border-color: #3B82F6;
.border-blue-600
border-color: #2563EB;
.border-blue-700
border-color: #1D4ED8;
.border-blue-800
border-color: #1E40AF;
.border-blue-900
border-color: #1E3A8A;
.border-indigo-50
border-color: #EEF2FF;
.border-indigo-100
border-color: #E0E7FF;
.border-indigo-200
border-color: #C7D2FE;
.border-indigo-300
border-color: #A5B4FC;
.border-indigo-400
border-color: #818CF8;
.border-indigo-500
border-color: #6366F1;
.border-indigo-600
border-color: #4F46E5;
.border-indigo-700
border-color: #4338CA;
.border-indigo-800
border-color: #3730A3;
.border-indigo-900
border-color: #312E81;
.border-purple-50
border-color: #F5F3FF;
.border-purple-100
border-color: #EDE9FE;
.border-purple-200
border-color: #DDD6FE;
.border-purple-300
border-color: #C4B5FD;
.border-purple-400
border-color: #A78BFA;
.border-purple-500
border-color: #8B5CF6;
.border-purple-600
border-color: #7C3AED;
.border-purple-700
border-color: #6D28D9;
.border-purple-800
border-color: #5B21B6;
.border-purple-900
border-color: #4C1D95;
.border-pink-50
border-color: #FDF2F8;
.border-pink-100
border-color: #FCE7F3;
.border-pink-200
border-color: #FBCFE8;
.border-pink-300
border-color: #F9A8D4;
.border-pink-400
border-color: #F472B6;
.border-pink-500
border-color: #EC4899;
.border-pink-600
border-color: #DB2777;
.border-pink-700
border-color: #BE185D;
.border-pink-800
border-color: #9D174D;
.border-pink-900
border-color: #831843;
Border Opacity
Set the opacity of an element's border.
.border-opacity-0
border-opacity: 0;
.border-opacity-5
border-opacity: 0.05;
.border-opacity-10
border-opacity: 0.1;
.border-opacity-20
border-opacity: 0.2;
.border-opacity-25
border-opacity: 0.25;
.border-opacity-30
border-opacity: 0.3;
.border-opacity-40
border-opacity: 0.4;
.border-opacity-50
border-opacity: 0.5;
.border-opacity-60
border-opacity: 0.6;
.border-opacity-70
border-opacity: 0.7;
.border-opacity-75
border-opacity: 0.75;
.border-opacity-80
border-opacity: 0.8;
.border-opacity-90
border-opacity: 0.9;
.border-opacity-95
border-opacity: 0.95;
.border-opacity-100
border-opacity: 1;
Border Style
Set the style of an element's border.
.border-solid
border-style: solid;
.border-dashed
border-style: dashed;
.border-dotted
border-style: dotted;
.border-double
border-style: double;
.border-none
border-style: none;
Divide Width
Set the border width between elements.
.divide-x
border-left-width: 1px;
.divide-x-0
border-left-width: 0;
.divide-x-2
border-left-width: 2px;
.divide-x-4
border-left-width: 4px;
.divide-x-8
border-left-width: 8px;
.divide-y
border-top-width: 1px;
.divide-y-0
border-top-width: 0;
.divide-y-2
border-top-width: 2px;
.divide-y-4
border-top-width: 4px;
.divide-y-8
border-top-width: 8px;
.divide-x-reverse
--divide-x-reverse: 1
.divide-y-reverse
--divide-y-reverse: 1
Divide Color
Set the border color between elements.
.divide-transparent
border-color: transparent;
.divide-current
border-color: currentColor;
.divide-black
border-color: #000000;
.divide-white
border-color: #ffffff;
.divide-gray-50
border-color: #F9FAFB;
.divide-gray-100
border-color: #F3F4F6;
.divide-gray-200
border-color: #E5E7EB;
.divide-gray-300
border-color: #D1D5DB;
.divide-gray-400
border-color: #9CA3AF;
.divide-gray-500
border-color: #6B7280;
.divide-gray-600
border-color: #6B7280;
.divide-gray-700
border-color: #374151;
.divide-gray-800
border-color: #1F2937;
.divide-gray-900
border-color: #111827;
.divide-red-50
border-color: #FEF2F2;
.divide-red-100
border-color: #FEE2E2;
.divide-red-200
border-color: #FECACA;
.divide-red-300
border-color: #FCA5A5;
.divide-red-400
border-color: #F87171;
.divide-red-500
border-color: #EF4444;
.divide-red-600
border-color: #DC2626;
.divide-red-700
border-color: #B91C1C;
.divide-red-800
border-color: #991B1B;
.divide-red-900
border-color: #7F1D1D;
.divide-yellow-50
border-color: #FFFBEB;
.divide-yellow-100
border-color: #FEF3C7;
.divide-yellow-200
border-color: #FDE68A;
.divide-yellow-300
border-color: #FCD34D;
.divide-yellow-400
border-color: #FBBF24;
.divide-yellow-500
border-color: #F59E0B;
.divide-yellow-600
border-color: #D97706;
.divide-yellow-700
border-color: #B45309;
.divide-yellow-800
border-color: #92400E;
.divide-yellow-900
border-color: #78350F;
.divide-green-50
border-color: #ECFDF5;
.divide-green-100
border-color: #D1FAE5;
.divide-green-200
border-color: #A7F3D0;
.divide-green-300
border-color: #6EE7B7;
.divide-green-400
border-color: #34D399;
.divide-green-500
border-color: #10B981;
.divide-green-600
border-color: #059669;
.divide-green-700
border-color: #047857;
.divide-green-800
border-color: #065F46;
.divide-green-900
border-color: #064E3B;
.divide-blue-50
border-color: #EFF6FF;
.divide-blue-100
border-color: #DBEAFE;
.divide-blue-200
border-color: #BFDBFE;
.divide-blue-300
border-color: #93C5FD;
.divide-blue-400
border-color: #60A5FA;
.divide-blue-500
border-color: #3B82F6;
.divide-blue-600
border-color: #2563EB;
.divide-blue-700
border-color: #1D4ED8;
.divide-blue-800
border-color: #1E40AF;
.divide-blue-900
border-color: #1E3A8A;
.divide-indigo-50
border-color: #EEF2FF;
.divide-indigo-100
border-color: #E0E7FF;
.divide-indigo-200
border-color: #C7D2FE;
.divide-indigo-300
border-color: #A5B4FC;
.divide-indigo-400
border-color: #818CF8;
.divide-indigo-500
border-color: #6366F1;
.divide-indigo-600
border-color: #4F46E5;
.divide-indigo-700
border-color: #4338CA;
.divide-indigo-800
border-color: #3730A3;
.divide-indigo-900
border-color: #312E81;
.divide-purple-50
border-color: #F5F3FF;
.divide-purple-100
border-color: #EDE9FE;
.divide-purple-200
border-color: #DDD6FE;
.divide-purple-300
border-color: #C4B5FD;
.divide-purple-400
border-color: #A78BFA;
.divide-purple-500
border-color: #8B5CF6;
.divide-purple-600
border-color: #7C3AED;
.divide-purple-700
border-color: #6D28D9;
.divide-purple-800
border-color: #5B21B6;
.divide-purple-900
border-color: #4C1D95;
.divide-pink-50
border-color: #FDF2F8;
.divide-pink-100
border-color: #FCE7F3;
.divide-pink-200
border-color: #FBCFE8;
.divide-pink-300
border-color: #F9A8D4;
.divide-pink-400
border-color: #F472B6;
.divide-pink-500
border-color: #EC4899;
.divide-pink-600
border-color: #DB2777;
.divide-pink-700
border-color: #BE185D;
.divide-pink-800
border-color: #9D174D;
.divide-pink-900
border-color: #831843;
Divide Opacity
Set the border opacity between elements.
.divide-opacity-0
--divide-opacity: 0;
.divide-opacity-5
--divide-opacity: 0.5;
.divide-opacity-10
--divide-opacity: 0.1;
.divide-opacity-20
--divide-opacity: 0.2;
.divide-opacity-25
--divide-opacity: 0.25;
.divide-opacity-30
--divide-opacity: 0.3;
.divide-opacity-40
--divide-opacity: 0.4;
.divide-opacity-50
--divide-opacity: 0.5;
.divide-opacity-60
--divide-opacity: 0.6;
.divide-opacity-70
--divide-opacity: 0.7;
.divide-opacity-75
--divide-opacity: 0.75;
.divide-opacity-80
--divide-opacity: 0.8;
.divide-opacity-90
--divide-opacity: 0.9;
.divide-opacity-95
--divide-opacity: 0.95;
.divide-opacity-100
--divide-opacity: 1;
Divide Style
Set the style of an element's border.
.divide-solid
border-style: solid;
.divide-dashed
border-style: dashed;
.divide-dotted
border-style: dotted;
.divide-double
border-style: double;
.divide-none
border-style: none;
Ring Width
Set the outline style for an element using box shadows.
*
box-shadow: 0 0 #000000;
.ring-0
box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
.ring-1
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
.ring-2
box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
.ring-4
box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
.ring-8
box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
.ring
box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
.ring-inset
--tw-ring-inset: inset;
Ring Color
Set the color of the outline styles.
.ring-transparent
--ring-color: transparent;
.ring-current
--ring-color: currentColor;
.ring-black
--ring-color: #000000;
.ring-white
--ring-color: #ffffff;
.ring-gray-50
--ring-color: #F9FAFB;
.ring-gray-100
--ring-color: #F3F4F6;
.ring-gray-200
--ring-color: #E5E7EB;
.ring-gray-300
--ring-color: #D1D5DB;
.ring-gray-400
--ring-color: #9CA3AF;
.ring-gray-500
--ring-color: #6B7280;
.ring-gray-600
--ring-color: #6B7280;
.ring-gray-700
--ring-color: #374151;
.ring-gray-800
--ring-color: #1F2937;
.ring-gray-900
--ring-color: #111827;
.ring-red-50
--ring-color: #FEF2F2;
.ring-red-100
--ring-color: #FEE2E2;
.ring-red-200
--ring-color: #FECACA;
.ring-red-300
--ring-color: #FCA5A5;
.ring-red-400
--ring-color: #F87171;
.ring-red-500
--ring-color: #EF4444;
.ring-red-600
--ring-color: #DC2626;
.ring-red-700
--ring-color: #B91C1C;
.ring-red-800
--ring-color: #991B1B;
.ring-red-900
--ring-color: #7F1D1D;
.ring-yellow-50
--ring-color: #FFFBEB;
.ring-yellow-100
--ring-color: #FEF3C7;
.ring-yellow-200
--ring-color: #FDE68A;
.ring-yellow-300
--ring-color: #FCD34D;
.ring-yellow-400
--ring-color: #FBBF24;
.ring-yellow-500
--ring-color: #F59E0B;
.ring-yellow-600
--ring-color: #D97706;
.ring-yellow-700
--ring-color: #B45309;
.ring-yellow-800
--ring-color: #92400E;
.ring-yellow-900
--ring-color: #78350F;
.ring-green-50
--ring-color: #ECFDF5;
.ring-green-100
--ring-color: #D1FAE5;
.ring-green-200
--ring-color: #A7F3D0;
.ring-green-300
--ring-color: #6EE7B7;
.ring-green-400
--ring-color: #34D399;
.ring-green-500
--ring-color: #10B981;
.ring-green-600
--ring-color: #059669;
.ring-green-700
--ring-color: #047857;
.ring-green-800
--ring-color: #065F46;
.ring-green-900
--ring-color: #064E3B;
.ring-blue-50
--ring-color: #EFF6FF;
.ring-blue-100
--ring-color: #DBEAFE;
.ring-blue-200
--ring-color: #BFDBFE;
.ring-blue-300
--ring-color: #93C5FD;
.ring-blue-400
--ring-color: #60A5FA;
.ring-blue-500
--ring-color: #3B82F6;
.ring-blue-600
--ring-color: #2563EB;
.ring-blue-700
--ring-color: #1D4ED8;
.ring-blue-800
--ring-color: #1E40AF;
.ring-blue-900
--ring-color: #1E3A8A;
.ring-indigo-50
--ring-color: #EEF2FF;
.ring-indigo-100
--ring-color: #E0E7FF;
.ring-indigo-200
--ring-color: #C7D2FE;
.ring-indigo-300
--ring-color: #A5B4FC;
.ring-indigo-400
--ring-color: #818CF8;
.ring-indigo-500
--ring-color: #6366F1;
.ring-indigo-600
--ring-color: #4F46E5;
.ring-indigo-700
--ring-color: #4338CA;
.ring-indigo-800
--ring-color: #3730A3;
.ring-indigo-900
--ring-color: #312E81;
.ring-purple-50
--ring-color: #F5F3FF;
.ring-purple-100
--ring-color: #EDE9FE;
.ring-purple-200
--ring-color: #DDD6FE;
.ring-purple-300
--ring-color: #C4B5FD;
.ring-purple-400
--ring-color: #A78BFA;
.ring-purple-500
--ring-color: #8B5CF6;
.ring-purple-600
--ring-color: #7C3AED;
.ring-purple-700
--ring-color: #6D28D9;
.ring-purple-800
--ring-color: #5B21B6;
.ring-purple-900
--ring-color: #4C1D95;
.ring-pink-50
--ring-color: #FDF2F8;
.ring-pink-100
--ring-color: #FCE7F3;
.ring-pink-200
--ring-color: #FBCFE8;
.ring-pink-300
--ring-color: #F9A8D4;
.ring-pink-400
--ring-color: #F472B6;
.ring-pink-500
--ring-color: #EC4899;
.ring-pink-600
--ring-color: #DB2777;
.ring-pink-700
--ring-color: #BE185D;
.ring-pink-800
--ring-color: #9D174D;
.ring-pink-900
--ring-color: #831843;
Ring Opacity
Set the opacity of the outline style.
.ring-opacity-0
--ring-opacity: 0;
.ring-opacity-5
--ring-opacity: 0.5;
.ring-opacity-10
--ring-opacity: 0.1;
.ring-opacity-20
--ring-opacity: 0.2;
.ring-opacity-25
--ring-opacity: 0.25;
.ring-opacity-30
--ring-opacity: 0.3;
.ring-opacity-40
--ring-opacity: 0.4;
.ring-opacity-50
--ring-opacity: 0.5;
.ring-opacity-60
--ring-opacity: 0.6;
.ring-opacity-70
--ring-opacity: 0.7;
.ring-opacity-75
--ring-opacity: 0.75;
.ring-opacity-80
--ring-opacity: 0.8;
.ring-opacity-90
--ring-opacity: 0.9;
.ring-opacity-95
--ring-opacity: 0.95;
.ring-opacity-100
--ring-opacity: 1;
Ring Offset Color
Set the offset for the outline style.
.ring-offset-transparent
--ring-offset-color: transparent;
.ring-offset-current
--ring-offset-color: currentColor;
.ring-offset-black
--ring-offset-color: #000000;
.ring-offset-white
--ring-offset-color: #ffffff;
.ring-offset-gray-50
--ring-offset-color: #F9FAFB;
.ring-offset-gray-100
--ring-offset-color: #F3F4F6;
.ring-offset-gray-200
--ring-offset-color: #E5E7EB;
.ring-offset-gray-300
--ring-offset-color: #D1D5DB;
.ring-offset-gray-400
--ring-offset-color: #9CA3AF;
.ring-offset-gray-500
--ring-offset-color: #6B7280;
.ring-offset-gray-600
--ring-offset-color: #6B7280;
.ring-offset-gray-700
--ring-offset-color: #374151;
.ring-offset-gray-800
--ring-offset-color: #1F2937;
.ring-offset-gray-900
--ring-offset-color: #111827;
.ring-offset-red-50
--ring-offset-color: #FEF2F2;
.ring-offset-red-100
--ring-offset-color: #FEE2E2;
.ring-offset-red-200
--ring-offset-color: #FECACA;
.ring-offset-red-300
--ring-offset-color: #FCA5A5;
.ring-offset-red-400
--ring-offset-color: #F87171;
.ring-offset-red-500
--ring-offset-color: #EF4444;
.ring-offset-red-600
--ring-offset-color: #DC2626;
.ring-offset-red-700
--ring-offset-color: #B91C1C;
.ring-offset-red-800
--ring-offset-color: #991B1B;
.ring-offset-red-900
--ring-offset-color: #7F1D1D;
.ring-offset-yellow-50
--ring-offset-color: #FFFBEB;
.ring-offset-yellow-100
--ring-offset-color: #FEF3C7;
.ring-offset-yellow-200
--ring-offset-color: #FDE68A;
.ring-offset-yellow-300
--ring-offset-color: #FCD34D;
.ring-offset-yellow-400
--ring-offset-color: #FBBF24;
.ring-offset-yellow-500
--ring-offset-color: #F59E0B;
.ring-offset-yellow-600
--ring-offset-color: #D97706;
.ring-offset-yellow-700
--ring-offset-color: #B45309;
.ring-offset-yellow-800
--ring-offset-color: #92400E;
.ring-offset-yellow-900
--ring-offset-color: #78350F;
.ring-offset-green-50
--ring-offset-color: #ECFDF5;
.ring-offset-green-100
--ring-offset-color: #D1FAE5;
.ring-offset-green-200
--ring-offset-color: #A7F3D0;
.ring-offset-green-300
--ring-offset-color: #6EE7B7;
.ring-offset-green-400
--ring-offset-color: #34D399;
.ring-offset-green-500
--ring-offset-color: #10B981;
.ring-offset-green-600
--ring-offset-color: #059669;
.ring-offset-green-700
--ring-offset-color: #047857;
.ring-offset-green-800
--ring-offset-color: #065F46;
.ring-offset-green-900
--ring-offset-color: #064E3B;
.ring-offset-blue-50
--ring-offset-color: #EFF6FF;
.ring-offset-blue-100
--ring-offset-color: #DBEAFE;
.ring-offset-blue-200
--ring-offset-color: #BFDBFE;
.ring-offset-blue-300
--ring-offset-color: #93C5FD;
.ring-offset-blue-400
--ring-offset-color: #60A5FA;
.ring-offset-blue-500
--ring-offset-color: #3B82F6;
.ring-offset-blue-600
--ring-offset-color: #2563EB;
.ring-offset-blue-700
--ring-offset-color: #1D4ED8;
.ring-offset-blue-800
--ring-offset-color: #1E40AF;
.ring-offset-blue-900
--ring-offset-color: #1E3A8A;
.ring-offset-indigo-50
--ring-offset-color: #EEF2FF;
.ring-offset-indigo-100
--ring-offset-color: #E0E7FF;
.ring-offset-indigo-200
--ring-offset-color: #C7D2FE;
.ring-offset-indigo-300
--ring-offset-color: #A5B4FC;
.ring-offset-indigo-400
--ring-offset-color: #818CF8;
.ring-offset-indigo-500
--ring-offset-color: #6366F1;
.ring-offset-indigo-600
--ring-offset-color: #4F46E5;
.ring-offset-indigo-700
--ring-offset-color: #4338CA;
.ring-offset-indigo-800
--ring-offset-color: #3730A3;
.ring-offset-indigo-900
--ring-offset-color: #312E81;
.ring-offset-purple-50
--ring-offset-color: #F5F3FF;
.ring-offset-purple-100
--ring-offset-color: #EDE9FE;
.ring-offset-purple-200
--ring-offset-color: #DDD6FE;
.ring-offset-purple-300
--ring-offset-color: #C4B5FD;
.ring-offset-purple-400
--ring-offset-color: #A78BFA;
.ring-offset-purple-500
--ring-offset-color: #8B5CF6;
.ring-offset-purple-600
--ring-offset-color: #7C3AED;
.ring-offset-purple-700
--ring-offset-color: #6D28D9;
.ring-offset-purple-800
--ring-offset-color: #5B21B6;
.ring-offset-purple-900
--ring-offset-color: #4C1D95;
.ring-offset-pink-50
--ring-offset-color: #FDF2F8;
.ring-offset-pink-100
--ring-offset-color: #FCE7F3;
.ring-offset-pink-200
--ring-offset-color: #FBCFE8;
.ring-offset-pink-300
--ring-offset-color: #F9A8D4;
.ring-offset-pink-400
--ring-offset-color: #F472B6;
.ring-offset-pink-500
--ring-offset-color: #EC4899;
.ring-offset-pink-600
--ring-offset-color: #DB2777;
.ring-offset-pink-700
--ring-offset-color: #BE185D;
.ring-offset-pink-800
--ring-offset-color: #9D174D;
.ring-offset-pink-900
--ring-offset-color: #831843;
Tables
Border Collapse
Set whether cells inside a table have shared or separate borders.
.border-collapse
border-collapse: collapse;
.border-separate
border-collapse: separate;
Table Layout
Set the algorithm used to lay out table cells, rows, and columns
.table-auto
table-layout: auto;
.table-fixed
table-layout: fixed;
Interactivity
Appearance
Display an element using platform-native styling, based on the operating system's theme.
.appearance-none
appearance: none;
Cursor
Set the cursor style when hovering over an element.
.cursor-auto
cursor: auto;
.cursor-default
cursor: default;
.cursor-pointer
cursor: pointer;
.cursor-wait
cursor: wait;
.cursor-text
cursor: text;
.cursor-move
cursor: move;
.cursor-help
cursor: help;
.cursor-not-allowed
cursor: not-allowed;
Outline
Set the outline style of an element.
.outline-none
outline: 0;
.outline-white
outline: 2px dotted white; outline-offset: 2px;
.outline-black
outline: 2px dotted black; outline-offset: 2px;
Pointer Events
Set under what circumstances a particular graphic element can become the target of pointer events.
.pointer-events-none
pointer-events: none;
.pointer-events-auto
pointer-events: auto;
Resize
Set whether an element is resizable, and if so, in which directions.
.resize-none
resize: none;
.resize
resize: both;
.resize-y
resize: vertical;
.resize-x
resize: horizontal;
User Select
Control whether the user can select text.
.select-none
user-select: none;
.select-text
user-select: text;
.select-all
user-select: all;
.select-auto
user-select: auto;
Accessibility
Controls whether an element is visually hidden but still accessible to screen readers.
.sr-only
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); whiteSpace: nowrap; borderWidth: 0;
.not-sr-only
position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; whiteSpace: normal;
Box Alignment
Justify Content
Define how the browser distributes space between and around content items along the main-axis of a flex container.
.justify-start
justify-content: flex-start;
.justify-center
justify-content: center;
.justify-end
justify-content: flex-end;
.justify-between
justify-content: space-between;
.justify-around
justify-content: space-around;
.justify-evenly
justify-content: space-evenly;
Justify Items
Define the default justify-self for all items of the box.
.justify-items-stretch
justify-items: stretch;
.justify-items-start
justify-items: start;
.justify-items-center
justify-items: center;
.justify-items-end
justify-items: end;
.justify-items-auto
justify-items: auto;
Justify Self
Set the way a box is justified inside its alignment container along the appropriate axis.
.justify-self-stretch
justify-self: stretch;
.justify-self-start
justify-self: start;
.justify-self-center
justify-self: center;
.justify-self-end
justify-self: end;
.justify-self-auto
justify-self: auto;
Align Content
Set the distribution of space between and around content items.
.content-start
align-content: flex-start;
.content-center
align-content: center;
.content-end
align-content: flex-end;
.content-between
align-content: space-between;
.content-around
align-content: space-around;
.content-evenly
align-content: space-evenly;
Align Items
Set the align-self value on all direct children as a group.
.items-stretch
align-items: stretch;
.items-start
align-items: flex-start;
.items-center
align-items: center;
.items-end
align-items: flex-end;
.items-baseline
align-items: baseline;
Align Self
Override a grid or flex item's align-items value.
.self-auto
align-self: auto;
.self-start
align-self: flex-start;
.self-center
align-self: center;
.self-end
align-self: flex-end;
.self-stretch
align-self: stretch;
.self-baseline
align-self: baseline;
Place Content
Align content along both the block and inline directions at once.
.place-content-start
place-content: start;
.place-content-center
place-content: center;
.place-content-end
place-content: end;
.place-content-between
place-content: space-between;
.place-content-around
place-content: space-around;
.place-content-evenly
place-content: space-evenly;
Place Items
Align items along both the block and inline directions.
.place-items-stretch
place-items: stretch;
.place-items-start
place-items: start;
.place-items-center
place-items: center;
.place-items-end
place-items: end;
Place Self
Align an individual item in both the block and inline directions.
.place-self-stretch
place-self: stretch;
.place-self-start
place-self: start;
.place-self-center
place-self: center;
.place-self-end
place-self: end;
.place-self-auto
place-self: auto;
Grid
Grid Template Columns
Define the line names and track sizing functions.
.grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));
.grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
.grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
.grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
.grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
.grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));
.grid-cols-7
grid-template-columns: repeat(7, minmax(0, 1fr));
.grid-cols-8
grid-template-columns: repeat(8, minmax(0, 1fr));
.grid-cols-9
grid-template-columns: repeat(9, minmax(0, 1fr));
.grid-cols-10
grid-template-columns: repeat(10, minmax(0, 1fr));
.grid-cols-11
grid-template-columns: repeat(11, minmax(0, 1fr));
.grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr));
.grid-cols-none
grid-template-columns: none;
Grid Column, start/end
Specify a grid item's size and location within a grid column.
.col-auto
grid-column: auto;
.col-span-1
grid-column: span 1 / span 1;
.col-span-2
grid-column: span 2 / span 2;
.col-span-3
grid-column: span 3 / span 3;
.col-span-4
grid-column: span 4 / span 4;
.col-span-5
grid-column: span 5 / span 5;
.col-span-6
grid-column: span 6 / span 6;
.col-span-7
grid-column: span 7 / span 7;
.col-span-8
grid-column: span 8 / span 8;
.col-span-9
grid-column: span 9 / span 9;
.col-span-10
grid-column: span 10 / span 10;
.col-span-11
grid-column: span 11 / span 11;
.col-span-12
grid-column: span 12 / span 12;
.col-start-1
grid-column-start: 1;
.col-start-2
grid-column-start: 2;
.col-start-3
grid-column-start: 3;
.col-start-4
grid-column-start: 4;
.col-start-5
grid-column-start: 5;
.col-start-6
grid-column-start: 6;
.col-start-7
grid-column-start: 7;
.col-start-8
grid-column-start: 8;
.col-start-9
grid-column-start: 9;
.col-start-10
grid-column-start: 10;
.col-start-11
grid-column-start: 11;
.col-start-12
grid-column-start: 12;
.col-start-13
grid-column-start: 13;
.col-start-auto
grid-column-start: auto;
.col-end-1
grid-column-end: 1;
.col-end-2
grid-column-end: 2;
.col-end-3
grid-column-end: 3;
.col-end-4
grid-column-end: 4;
.col-end-5
grid-column-end: 5;
.col-end-6
grid-column-end: 6;
.col-end-7
grid-column-end: 7;
.col-end-8
grid-column-end: 8;
.col-end-9
grid-column-end: 9;
.col-end-10
grid-column-end: 10;
.col-end-11
grid-column-end: 11;
.col-end-12
grid-column-end: 12;
.col-end-13
grid-column-end: 13;
.col-end-auto
grid-column-end: auto;
Grid Template Rows
Define the line names and track sizing functions.
.grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr));
.grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr));
.grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr));
.grid-rows-4
grid-template-rows: repeat(4, minmax(0, 1fr));
.grid-rows-5
grid-template-rows: repeat(5, minmax(0, 1fr));
.grid-rows-6
grid-template-rows: repeat(6, minmax(0, 1fr));
.grid-rows-none
grid-template-rows: none;
Grid Row, start/end
Specify a grid item’s size and location within the grid row.
.row-auto
grid-row: auto;
.row-span-1
grid-row: span 1 / span 1;
.row-span-2
grid-row: span 2 / span 2;
.row-span-3
grid-row: span 3 / span 3;
.row-span-4
grid-row: span 4 / span 4;
.row-span-5
grid-row: span 5 / span 5;
.row-span-6
grid-row: span 6 / span 6;
.row-start-1
grid-row-start: 1;
.row-start-2
grid-row-start: 2;
.row-start-3
grid-row-start: 3;
.row-start-4
grid-row-start: 4;
.row-start-5
grid-row-start: 5;
.row-start-6
grid-row-start: 6;
.row-start-7
grid-row-start: 7;
.row-start-auto
grid-row-start: auto;
.row-end-1
grid-row-end: 1;
.row-end-2
grid-row-end: 2;
.row-end-3
grid-row-end: 3;
.row-end-4
grid-row-end: 4;
.row-end-5
grid-row-end: 5;
.row-end-6
grid-row-end: 6;
.row-end-7
grid-row-end: 7;
.row-end-auto
grid-row-end: auto;
Gap
Set the gaps (gutters) between rows and columns.
.gap-0
gap: 0;
.gap-0.5
gap: 0.125rem;
.gap-1
gap: 0.25rem;
.gap-1.5
gap: 0.375rem;
.gap-2
gap: 0.5rem;
.gap-2.5
gap: 0.625rem;
.gap-3
gap: 0.75rem;
.gap-3.5
gap: 0.875rem;
.gap-4
gap: 1rem;
.gap-5
gap: 1.25rem;
.gap-6
gap: 1.5rem;
.gap-8
gap: 2rem;
.gap-10
gap: 2.5rem;
.gap-11
gap: 2.75rem;
.gap-12
gap: 3rem;
.gap-14
gap: 3.5rem;
.gap-16
gap: 4rem;
.gap-20
gap: 5rem;
.gap-24
gap: 6rem;
.gap-28
gap: 7rem;
.gap-32
gap: 8rem;
.gap-36
gap: 9rem;
.gap-40
gap: 10rem;
.gap-44
gap: 11rem;
.gap-48
gap: 12rem;
.gap-52
gap: 13rem;
.gap-56
gap: 14rem;
.gap-64
gap: 16rem;
.gap-72
gap: 18rem;
.gap-80
gap: 20rem;
.gap-96
gap: 24rem;
.gap-px
gap: 1px;
.gap-x-0
column-gap: 0;
.gap-x-0.5
column-gap: 0.125rem;
.gap-x-1
column-gap: 0.25rem;
.gap-x-1.5
column-gap: 0.375rem;
.gap-x-2
column-gap: 0.5rem;
.gap-x-2.5
column-gap: 0.625rem;
.gap-x-3
column-gap: 0.75rem;
.gap-x-3.5
column-gap: 0.875rem;
.gap-x-4
column-gap: 1rem;
.gap-x-5
column-gap: 1.25rem;
.gap-x-6
column-gap: 1.5rem;
.gap-x-8
column-gap: 2rem;
.gap-x-10
column-gap: 2.5rem;
.gap-x-11
column-gap: 2.75rem;
.gap-x-12
column-gap: 3rem;
.gap-x-14
column-gap: 3.5rem;
.gap-x-16
column-gap: 4rem;
.gap-x-20
column-gap: 5rem;
.gap-x-24
column-gap: 6rem;
.gap-x-28
column-gap: 7rem;
.gap-x-32
column-gap: 8rem;
.gap-x-36
column-gap: 9rem;
.gap-x-40
column-gap: 10rem;
.gap-x-44
column-gap: 11rem;
.gap-x-48
column-gap: 12rem;
.gap-x-52
column-gap: 13rem;
.gap-x-56
column-gap: 14rem;
.gap-x-64
column-gap: 16rem;
.gap-x-72
column-gap: 18rem;
.gap-x-80
column-gap: 20rem;
.gap-x-96
column-gap: 24rem;
.gap-x-px
column-gap: 1px;
.gap-y-0
row-gap: 0;
.gap-y-0.5
row-gap: 0.125rem;
.gap-y-1
row-gap: 0.25rem;
.gap-y-1.5
row-gap: 0.375rem;
.gap-y-2
row-gap: 0.5rem;
.gap-y-2.5
row-gap: 0.625rem;
.gap-y-3
row-gap: 0.75rem;
.gap-y-3.5
row-gap: 0.875rem;
.gap-y-4
row-gap: 1rem;
.gap-y-5
row-gap: 1.25rem;
.gap-y-6
row-gap: 1.5rem;
.gap-y-8
row-gap: 2rem;
.gap-y-10
row-gap: 2.5rem;
.gap-y-11
row-gap: 2.75rem;
.gap-y-12
row-gap: 3rem;
.gap-y-14
row-gap: 3.5rem;
.gap-y-16
row-gap: 4rem;
.gap-y-20
row-gap: 5rem;
.gap-y-24
row-gap: 6rem;
.gap-y-28
row-gap: 7rem;
.gap-y-32
row-gap: 8rem;
.gap-y-36
row-gap: 9rem;
.gap-y-40
row-gap: 10rem;
.gap-y-44
row-gap: 11rem;
.gap-y-48
row-gap: 12rem;
.gap-y-52
row-gap: 13rem;
.gap-y-56
row-gap: 14rem;
.gap-y-64
row-gap: 16rem;
.gap-y-72
row-gap: 18rem;
.gap-y-80
row-gap: 20rem;
.gap-y-96
row-gap: 24rem;
.gap-y-px
row-gap: 1px;
Grid Auto Flow
Control how the auto-placement algorithm works.
.grid-flow-row
grid-auto-flow: row;
.grid-flow-col
grid-auto-flow: column;
.grid-flow-row-dense
grid-auto-flow: row dense;
.grid-flow-col-dense
grid-auto-flow: column dense;
Grid Auto Columns
Specify the size of an implicitly-created grid column.
.auto-cols-auto
grid-auto-columns: auto;
.auto-cols-min
grid-auto-columns: min;
.auto-cols-max
grid-auto-columns: max;
.auto-cols-fr
grid-auto-columns: minmax(0, 1fr);
Grid Auto Rows
Specify the size of an implicitly-created grid row.
.auto-rows-auto
grid-auto-rows: auto;
.auto-rows-min
grid-auto-rows: min;
.auto-rows-max
grid-auto-rows: max;
.auto-rows-fr
grid-auto-rows: minmax(0, 1fr);
Typography
Text Color
Set the foreground color value of an element's text and text decorations.
.text-transparent
color: transparent;
.text-current
color: currentColor;
.text-black
color: #000000;
.text-white
color: #ffffff;
.text-gray-50
color: #F9FAFB;
.text-gray-100
color: #F3F4F6;
.text-gray-200
color: #E5E7EB;
.text-gray-300
color: #D1D5DB;
.text-gray-400
color: #9CA3AF;
.text-gray-500
color: #6B7280;
.text-gray-600
color: #6B7280;
.text-gray-700
color: #374151;
.text-gray-800
color: #1F2937;
.text-gray-900
color: #111827;
.text-red-50
color: #FEF2F2;
.text-red-100
color: #FEE2E2;
.text-red-200
color: #FECACA;
.text-red-300
color: #FCA5A5;
.text-red-400
color: #F87171;
.text-red-500
color: #EF4444;
.text-red-600
color: #DC2626;
.text-red-700
color: #B91C1C;
.text-red-800
color: #991B1B;
.text-red-900
color: #7F1D1D;
.text-yellow-50
color: #FFFBEB;
.text-yellow-100
color: #FEF3C7;
.text-yellow-200
color: #FDE68A;
.text-yellow-300
color: #FCD34D;
.text-yellow-400
color: #FBBF24;
.text-yellow-500
color: #F59E0B;
.text-yellow-600
color: #D97706;
.text-yellow-700
color: #B45309;
.text-yellow-800
color: #92400E;
.text-yellow-900
color: #78350F;
.text-green-50
color: #ECFDF5;
.text-green-100
color: #D1FAE5;
.text-green-200
color: #A7F3D0;
.text-green-300
color: #6EE7B7;
.text-green-400
color: #34D399;
.text-green-500
color: #10B981;
.text-green-600
color: #059669;
.text-green-700
color: #047857;
.text-green-800
color: #065F46;
.text-green-900
color: #064E3B;
.text-blue-50
color: #EFF6FF;
.text-blue-100
color: #DBEAFE;
.text-blue-200
color: #BFDBFE;
.text-blue-300
color: #93C5FD;
.text-blue-400
color: #60A5FA;
.text-blue-500
color: #3B82F6;
.text-blue-600
color: #2563EB;
.text-blue-700
color: #1D4ED8;
.text-blue-800
color: #1E40AF;
.text-blue-900
color: #1E3A8A;
.text-indigo-50
color: #EEF2FF;
.text-indigo-100
color: #E0E7FF;
.text-indigo-200
color: #C7D2FE;
.text-indigo-300
color: #A5B4FC;
.text-indigo-400
color: #818CF8;
.text-indigo-500
color: #6366F1;
.text-indigo-600
color: #4F46E5;
.text-indigo-700
color: #4338CA;
.text-indigo-800
color: #3730A3;
.text-indigo-900
color: #312E81;
.text-purple-50
color: #F5F3FF;
.text-purple-100
color: #EDE9FE;
.text-purple-200
color: #DDD6FE;
.text-purple-300
color: #C4B5FD;
.text-purple-400
color: #A78BFA;
.text-purple-500
color: #8B5CF6;
.text-purple-600
color: #7C3AED;
.text-purple-700
color: #6D28D9;
.text-purple-800
color: #5B21B6;
.text-purple-900
color: #4C1D95;
.text-pink-50
color: #FDF2F8;
.text-pink-100
color: #FCE7F3;
.text-pink-200
color: #FBCFE8;
.text-pink-300
color: #F9A8D4;
.text-pink-400
color: #F472B6;
.text-pink-500
color: #EC4899;
.text-pink-600
color: #DB2777;
.text-pink-700
color: #BE185D;
.text-pink-800
color: #9D174D;
.text-pink-900
color: #831843;
Text Opacity
Set the opacity of a text element.
.text-opacity-0
text-opacity: 0;
.text-opacity-5
text-opacity: 0.05;
.text-opacity-10
text-opacity: 0.1;
.text-opacity-20
text-opacity: 0.2;
.text-opacity-25
text-opacity: 0.25;
.text-opacity-30
text-opacity: 0.3;
.text-opacity-40
text-opacity: 0.4;
.text-opacity-50
text-opacity: 0.5;
.text-opacity-60
text-opacity: 0.6;
.text-opacity-70
text-opacity: 0.7;
.text-opacity-75
text-opacity: 0.75;
.text-opacity-80
text-opacity: 0.8;
.text-opacity-90
text-opacity: 0.9;
.text-opacity-95
text-opacity: 0.95;
.text-opacity-100
text-opacity: 1;
Font Family
Specify a prioritized list of one or more font family names and/or generic family names for the selected element.
.font-sans
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
.font-serif
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
.font-mono
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
Font Size
Set the size of the font.
.text-xs
font-size:
0.75rem;
line-height: 1rem;
.text-sm
font-size:
0.875rem;
line-height: 1.25rem;
.text-base
font-size:
1rem;
line-height: 1.5rem;
.text-lg
font-size:
1.125rem;
line-height: 1.75rem;
.text-xl
font-size:
1.25rem;
line-height: 1.75rem;
.text-2xl
font-size:
1.5rem;
line-height: 2rem;
.text-3xl
font-size:
1.875rem;
line-height: 2.25rem;
.text-4xl
font-size:
2.25rem;
line-height: 2.5rem;
.text-5xl
font-size:
3rem;
line-height: 1;
.text-6xl
font-size:
3.75rem;
line-height: 1;
.text-7xl
font-size:
4.5rem;
line-height: 1;
.text-8xl
font-size:
6rem;
line-height: 1;
.text-9xl
font-size:
8rem;
line-height: 1;
Font Smoothing
Control the application of anti-aliasing when fonts are rendered.
.antialiased
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
.subpixel-antialiased
-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
Font Style
Set whether a font should be styled with a normal, italic, or oblique face from its font-family.
.italic
font-style: italic;
.not-italic
font-style: normal;
Font Weight
Set the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
.font-thin
font-weight: 100;
.font-extralight
font-weight: 200;
.font-light
font-weight: 300;
.font-normal
font-weight: 400;
.font-medium
font-weight: 500;
.font-semibold
font-weight: 600;
.font-bold
font-weight: 700;
.font-extrabold
font-weight: 800;
.font-black
font-weight: 900;
Font Variant Numeric
Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
.normal-nums
font-variant-numeric: normal;
.ordinal
font-variant-numeric: ordinal;
.slashed-zero
font-variant-numeric: slashed-zero;
.lining-nums
font-variant-numeric: lining-nums;
.oldstyle-nums
font-variant-numeric: oldstyle-nums;
.proportional-nums
font-variant-numeric: proportional-nums;
.tabular-nums
font-variant-numeric: tabular-nums;
.diagonal-fractions
font-variant-numeric: diagonal-fractions;
.stacked-fractions
font-variant-numeric: stacked-fractions;
Letter Spacing
Set the horizontal spacing behavior between text characters.
.tracking-tighter
letter-spacing: -0.05em;
.tracking-tight
letter-spacing: -0.025em;
.tracking-normal
letter-spacing: 0;
.tracking-wide
letter-spacing: 0.025em;
.tracking-wider
letter-spacing: 0.05em;
.tracking-widest
letter-spacing: 0.1em;
Line Height
Set the height of a line box.
.leading-none
line-height: 1;
.leading-tight
line-height: 1.25;
.leading-snug
line-height: 1.375;
.leading-normal
line-height: 1.5;
.leading-relaxed
line-height: 1.625;
.leading-loose
line-height: 2;
.leading-3
line-height: .75rem;
.leading-4
line-height: 1rem;
.leading-5
line-height: 1.25rem;
.leading-6
line-height: 1.5rem;
.leading-7
line-height: 1.75rem;
.leading-8
line-height: 2rem;
.leading-9
line-height: 2.25rem;
.leading-10
line-height: 2.5rem;
List Style Type
Set the marker (such as a disc, character, or custom counter style) of a list item element.
.list-none
list-style-type: none;
.list-disc
list-style-type: disc;
.list-decimal
list-style-type: decimal;
List Style Position
Set the position of the marker relative to a list item.
.list-inside
list-style-position: inside;
.list-outside
list-style-position: outside;
Placeholder Color
Set the color of the placeholder using the ::placeholder pseudo element.
.placeholder-transparent
color: transparent;
.placeholder-current
color: currentColor;
.placeholder-black
color: #000000;
.placeholder-white
color: #ffffff;
.placeholder-gray-50
color: #F9FAFB;
.placeholder-gray-100
color: #F3F4F6;
.placeholder-gray-200
color: #E5E7EB;
.placeholder-gray-300
color: #D1D5DB;
.placeholder-gray-400
color: #9CA3AF;
.placeholder-gray-500
color: #6B7280;
.placeholder-gray-600
color: #6B7280;
.placeholder-gray-700
color: #374151;
.placeholder-gray-800
color: #1F2937;
.placeholder-gray-900
color: #111827;
.placeholder-red-50
color: #FEF2F2;
.placeholder-red-100
color: #FEE2E2;
.placeholder-red-200
color: #FECACA;
.placeholder-red-300
color: #FCA5A5;
.placeholder-red-400
color: #F87171;
.placeholder-red-500
color: #EF4444;
.placeholder-red-600
color: #DC2626;
.placeholder-red-700
color: #B91C1C;
.placeholder-red-800
color: #991B1B;
.placeholder-red-900
color: #7F1D1D;
.placeholder-yellow-50
color: #FFFBEB;
.placeholder-yellow-100
color: #FEF3C7;
.placeholder-yellow-200
color: #FDE68A;
.placeholder-yellow-300
color: #FCD34D;
.placeholder-yellow-400
color: #FBBF24;
.placeholder-yellow-500
color: #F59E0B;
.placeholder-yellow-600
color: #D97706;
.placeholder-yellow-700
color: #B45309;
.placeholder-yellow-800
color: #92400E;
.placeholder-yellow-900
color: #78350F;
.placeholder-green-50
color: #ECFDF5;
.placeholder-green-100
color: #D1FAE5;
.placeholder-green-200
color: #A7F3D0;
.placeholder-green-300
color: #6EE7B7;
.placeholder-green-400
color: #34D399;
.placeholder-green-500
color: #10B981;
.placeholder-green-600
color: #059669;
.placeholder-green-700
color: #047857;
.placeholder-green-800
color: #065F46;
.placeholder-green-900
color: #064E3B;
.placeholder-blue-50
color: #EFF6FF;
.placeholder-blue-100
color: #DBEAFE;
.placeholder-blue-200
color: #BFDBFE;
.placeholder-blue-300
color: #93C5FD;
.placeholder-blue-400
color: #60A5FA;
.placeholder-blue-500
color: #3B82F6;
.placeholder-blue-600
color: #2563EB;
.placeholder-blue-700
color: #1D4ED8;
.placeholder-blue-800
color: #1E40AF;
.placeholder-blue-900
color: #1E3A8A;
.placeholder-indigo-50
color: #EEF2FF;
.placeholder-indigo-100
color: #E0E7FF;
.placeholder-indigo-200
color: #C7D2FE;
.placeholder-indigo-300
color: #A5B4FC;
.placeholder-indigo-400
color: #818CF8;
.placeholder-indigo-500
color: #6366F1;
.placeholder-indigo-600
color: #4F46E5;
.placeholder-indigo-700
color: #4338CA;
.placeholder-indigo-800
color: #3730A3;
.placeholder-indigo-900
color: #312E81;
.placeholder-purple-50
color: #F5F3FF;
.placeholder-purple-100
color: #EDE9FE;
.placeholder-purple-200
color: #DDD6FE;
.placeholder-purple-300
color: #C4B5FD;
.placeholder-purple-400
color: #A78BFA;
.placeholder-purple-500
color: #8B5CF6;
.placeholder-purple-600
color: #7C3AED;
.placeholder-purple-700
color: #6D28D9;
.placeholder-purple-800
color: #5B21B6;
.placeholder-purple-900
color: #4C1D95;
.placeholder-pink-50
color: #FDF2F8;
.placeholder-pink-100
color: #FCE7F3;
.placeholder-pink-200
color: #FBCFE8;
.placeholder-pink-300
color: #F9A8D4;
.placeholder-pink-400
color: #F472B6;
.placeholder-pink-500
color: #EC4899;
.placeholder-pink-600
color: #DB2777;
.placeholder-pink-700
color: #BE185D;
.placeholder-pink-800
color: #9D174D;
.placeholder-pink-900
color: #831843;
Placeholder Opacity
Set the opacity of the placeholder using the ::placeholder pseudo element.
.placeholder-opacity-0
placeholder-opacity: 0;
.placeholder-opacity-5
placeholder-opacity: 0.05;
.placeholder-opacity-10
placeholder-opacity: 0.1;
.placeholder-opacity-20
placeholder-opacity: 0.2;
.placeholder-opacity-25
placeholder-opacity: 0.25;
.placeholder-opacity-30
placeholder-opacity: 0.3;
.placeholder-opacity-40
placeholder-opacity: 0.4;
.placeholder-opacity-50
placeholder-opacity: 0.5;
.placeholder-opacity-60
placeholder-opacity: 0.6;
.placeholder-opacity-70
placeholder-opacity: 0.7;
.placeholder-opacity-75
placeholder-opacity: 0.75;
.placeholder-opacity-80
placeholder-opacity: 0.8;
.placeholder-opacity-90
placeholder-opacity: 0.9;
.placeholder-opacity-95
placeholder-opacity: 0.95;
.placeholder-opacity-100
placeholder-opacity: 1;
Text Align
Set the horizontal alignment of the content inside a block element or table-cell box.
.text-left
text-align: left;
.text-center
text-align: center;
.text-right
text-align: right;
.text-justify
text-align: justify;
Text Decoration
Set the appearance of decorative lines on text.
.underline
text-decoration: underline;
.line-through
text-decoration: line-through;
.no-underline
text-decoration: none;
Text Transform
Specify how to capitalize an element's text.
.uppercase
text-transform: uppercase;
.lowercase
text-transform: lowercase;
.capitalize
text-transform: capitalize;
.normal-case
text-transform: none;
Text Overflow
Set how hidden overflow content is signaled to users.
.truncate
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
.overflow-ellipsis
text-overflow: ellipsis;
.overflow-clip
text-overflow: clip;
Vertical Align
Set the vertical alignment of an inline, inline-block or table-cell box.
.align-baseline
vertical-align: baseline;
.align-top
vertical-align: top;
.align-middle
vertical-align: middle;
.align-bottom
vertical-align: bottom;
.align-text-top
vertical-align: text-top;
.align-text-bottom
vertical-align: text-bottom;
White Space
Set how white space inside an element is handled.
.whitespace-normal
white-space: normal;
.whitespace-nowrap
white-space: nowrap;
.whitespace-pre
white-space: pre;
.whitespace-pre-line
white-space: pre-line;
.whitespace-pre-wrap
white-space: pre-wrap;
Word Break
Set whether line breaks appear wherever the text would otherwise overflow its content box.
.break-normal
overflow-wrap: normal; word-break: normal;
.break-words
overflow-wrap: break-word;
.break-all
word-break: break-all;
Effects
Box Shadow
Add shadow effects around an element's frame.
.shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
.shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
.shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
.shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
.shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
.shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
.shadow-none
box-shadow: 0 0 #0000;
Opacity
Set the opacity of an element.
.opacity-0
opacity: 0;
.opacity-5
opacity: 0.05;
.opacity-10
opacity: 0.1;
.opacity-20
opacity: 0.2;
.opacity-30
opacity: 0.3;
.opacity-40
opacity: 0.4;
.opacity-50
opacity: 0.5;
.opacity-60
opacity: 0.6;
.opacity-70
opacity: 0.7;
.opacity-80
opacity: 0.8;
.opacity-90
opacity: 0.9;
.opacity-100
opacity: 1;
Mix Blend Mode
Set how an element's content should blend with the content of the element's parent and the element's background.
.mix-blend-normal
mix-blend-mode: normal;
.mix-blend-multiply
mix-blend-mode: multiply;
.mix-blend-screen
mix-blend-mode: screen;
.mix-blend-overlay
mix-blend-mode: overlay;
.mix-blend-darken
mix-blend-mode: darken;
.mix-blend-lighten
mix-blend-mode: lighten;
.mix-blend-color-dodge
mix-blend-mode: color-dodge;
.mix-blend-color-burn
mix-blend-mode: color-burn;
.mix-blend-hard-light
mix-blend-mode: hard-light;
.mix-blend-soft-light
mix-blend-mode: soft-light;
.mix-blend-difference
mix-blend-mode: difference;
.mix-blend-exclusion
mix-blend-mode: exclusion;
.mix-blend-hue
mix-blend-mode: hue;
.mix-blend-saturation
mix-blend-mode: saturation;
.mix-blend-color
mix-blend-mode: color;
.mix-blend-luminosity
mix-blend-mode: luminosity;
Background Blend Mode
Set how an element's background images should blend with each other and with the element's background color.
.bg-blend-normal
background-blend-mode: normal;
.bg-blend-multiply
background-blend-mode: multiply;
.bg-blend-screen
background-blend-mode: screen;
.bg-blend-overlay
background-blend-mode: overlay;
.bg-blend-darken
background-blend-mode: darken;
.bg-blend-lighten
background-blend-mode: lighten;
.bg-blend-color-dodge
background-blend-mode: color-dodge;
.bg-blend-color-burn
background-blend-mode: color-burn;
.bg-blend-hard-light
background-blend-mode: hard-light;
.bg-blend-soft-light
background-blend-mode: soft-light;
.bg-blend-difference
background-blend-mode: difference;
.bg-blend-exclusion
background-blend-mode: exclusion;
.bg-blend-hue
background-blend-mode: hue;
.bg-blend-saturation
background-blend-mode: saturation;
.bg-blend-color
background-blend-mode: color;
.bg-blend-luminosity
background-blend-mode: luminosity;
Transforms
Transform Origin
Set the origin for an element's transformations.
.origin-center
transform-origin: center;
.origin-top
transform-origin: top;
.origin-top-right
transform-origin: top right;
.origin-right
transform-origin: right;
.origin-bottom-right
transform-origin: bottom right;
.origin-bottom
transform-origin: bottom;
.origin-bottom-left
transform-origin: bottom left;
.origin-left
transform-origin: left;
.origin-top-left
transform-origin: top left;
Scale
Define a transformation that resizes an element on the 2D plane.
.scale-0
--transform-scale-x: 0; --transform-scale-y: 0;
.scale-50
--transform-scale-x: .5; --transform-scale-y: .5;
.scale-75
--transform-scale-x: .75; --transform-scale-y: .75;
.scale-90
--transform-scale-x: .9; --transform-scale-y: .9;
.scale-95
--transform-scale-x: .95; --transform-scale-y: .95;
.scale-100
--transform-scale-x: 1; --transform-scale-y: 1;
.scale-105
--transform-scale-x: 1.05; --transform-scale-y: 1.05;
.scale-110
--transform-scale-x: 1.1; --transform-scale-y: 1.1;
.scale-125
--transform-scale-x: 1.25; --transform-scale-y: 1.25;
.scale-150
--transform-scale-x: 1.5; --transform-scale-y: 1.5;
.scale-x-0
--transform-scale-x: 0;
.scale-x-50
--transform-scale-x: .5;
.scale-x-75
--transform-scale-x: .75;
.scale-x-90
--transform-scale-x: .9;
.scale-x-95
--transform-scale-x: .95;
.scale-x-100
--transform-scale-x: 1;
.scale-x-105
--transform-scale-x: 1.05;
.scale-x-110
--transform-scale-x: 1.1;
.scale-x-125
--transform-scale-x: 1.25;
.scale-x-150
--transform-scale-x: 1.5;
.scale-y-0
--transform-scale-y: 0;
.scale-y-50
--transform-scale-y: .5;
.scale-y-75
--transform-scale-y: .75;
.scale-y-90
--transform-scale-y: .9;
.scale-y-95
--transform-scale-y: .95;
.scale-y-100
--transform-scale-y: 1;
.scale-y-105
--transform-scale-y: 1.05;
.scale-y-110
--transform-scale-y: 1.1;
.scale-y-125
--transform-scale-y: 1.25;
.scale-y-150
--transform-scale-y: 1.5;
Rotate
Define a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.
.rotate-0
--transform-rotate: 0;
.rotate-1
--transform-rotate: 1deg;
.rotate-2
--transform-rotate: 2deg;
.rotate-3
--transform-rotate: 3deg;
rotate-6
--transform-rotate: 6deg;
.rotate-12
--transform-rotate: 12deg;
.rotate-45
--transform-rotate: 45deg;
.rotate-90
--transform-rotate: 90deg;
.rotate-180
--transform-rotate: 180deg;
.-rotate-0
--transform-rotate: -0;
.-rotate-1
--transform-rotate: -1deg;
.-rotate-2
--transform-rotate: -2deg;
.-rotate-3
--transform-rotate: -3deg;
.-rotate-6
--transform-rotate: -6deg;
.-rotate-12
--transform-rotate: -12deg;
.-rotate-45
--transform-rotate: -45deg;
.-rotate-90
--transform-rotate: -90deg;
.-rotate-180
--transform-rotate: -180deg;
Translate
Reposition an element in the horizontal and/or vertical directions.
.translate-x-0
--transform-translate-x: 0;
.translate-x-0.5
--transform-translate-x: 0.125rem;
.translate-x-1
--transform-translate-x: 0.25rem;
.translate-x-1.5
--transform-translate-x: 0.375rem;
.translate-x-2
--transform-translate-x: 0.5rem;
.translate-x-2.5
--transform-translate-x: 0.625rem;
.translate-x-3
--transform-translate-x: 0.75rem;
.translate-x-3.5
--transform-translate-x: 0.875rem;
.translate-x-4
--transform-translate-x: 1rem;
.translate-x-5
--transform-translate-x: 1.25rem;
.translate-x-6
--transform-translate-x: 1.5rem;
.translate-x-7
--transform-translate-x: 1.75rem;
.translate-x-8
--transform-translate-x: 2rem;
.translate-x-9
--transform-translate-x: 2.25rem;
.translate-x-10
--transform-translate-x: 2.5rem;
.translate-x-11
--transform-translate-x: 2.75rem;
.translate-x-12
--transform-translate-x: 3rem;
.translate-x-14
--transform-translate-x: 3.5rem;
.translate-x-16
--transform-translate-x: 4rem;
.translate-x-20
--transform-translate-x: 5rem;
.translate-x-24
--transform-translate-x: 6rem;
.translate-x-28
--transform-translate-x: 7rem;
.translate-x-32
--transform-translate-x: 8rem;
.translate-x-36
--transform-translate-x: 9rem;
.translate-x-40
--transform-translate-x: 10rem;
.translate-x-44
--transform-translate-x: 11rem;
.translate-x-48
--transform-translate-x: 12rem;
.translate-x-52
--transform-translate-x: 13rem;
.translate-x-56
--transform-translate-x: 14rem;
.translate-x-60
--transform-translate-x: 15rem;
.translate-x-64
--transform-translate-x: 16rem;
.translate-x-72
--transform-translate-x: 18rem;
.translate-x-80
--transform-translate-x: 20rem;
.translate-x-96
--transform-translate-x: 24rem;
.translate-x-px
--transform-translate-x: 1px;
.translate-x-1/2
--transform-translate-x: 50%;
.translate-x-1/3
--transform-translate-x: 33.333333%;
.translate-x-2/3
--transform-translate-x: 66.6666666%;
.translate-x-1/4
--transform-translate-x: 25%;
.translate-x-2/4
--transform-translate-x: 50%;
.translate-x-3/4
--transform-translate-x: 75%;
.translate-x-full
--transform-translate-x: 100%;
.-translate-x-0
--transform-translate-x: 0;
.-translate-x-0.5
--transform-translate-x: -0.125rem;
.-translate-x-1
--transform-translate-x: -0.25rem;
.-translate-x-1.5
--transform-translate-x: -0.375rem;
.-translate-x-2
--transform-translate-x: -0.5rem;
.-translate-x-2.5
--transform-translate-x: -0.625rem;
.-translate-x-3
--transform-translate-x: -0.75rem;
.-translate-x-3.5
--transform-translate-x: -0.875rem;
.-translate-x-4
--transform-translate-x: -1rem;
.-translate-x-5
--transform-translate-x: -1.25rem;
.-translate-x-6
--transform-translate-x: -1.5rem;
.-translate-x-7
--transform-translate-x: -1.75rem;
.-translate-x-8
--transform-translate-x: -2rem;
.-translate-x-9
--transform-translate-x: -2.25rem;
.-translate-x-10
--transform-translate-x: -2.5rem;
.-translate-x-11
--transform-translate-x: -2.75rem;
.-translate-x-12
--transform-translate-x: -3rem;
.-translate-x-14
--transform-translate-x: -3.5rem;
.-translate-x-16
--transform-translate-x: -4rem;
.-translate-x-20
--transform-translate-x: -5rem;
.-translate-x-24
--transform-translate-x: -6rem;
.-translate-x-28
--transform-translate-x: -7rem;
.-translate-x-32
--transform-translate-x: -8rem;
.-translate-x-36
--transform-translate-x: -9rem;
.-translate-x-40
--transform-translate-x: -10rem;
.-translate-x-44
--transform-translate-x: -11rem;
.-translate-x-48
--transform-translate-x: -12rem;
.-translate-x-52
--transform-translate-x: -13rem;
.-translate-x-56
--transform-translate-x: -14rem;
.-translate-x-60
--transform-translate-x: -15rem;
.-translate-x-64
--transform-translate-x: -16rem;
.-translate-x-72
--transform-translate-x: -18rem;
.-translate-x-80
--transform-translate-x: -20rem;
.-translate-x-96
--transform-translate-x: -24rem;
.-translate-x-px
--transform-translate-x: -1px;
.-translate-x-1/2
--transform-translate-x: -50%;
.-translate-x-1/3
--transform-translate-x: -33.333333%;
.-translate-x-2/3
--transform-translate-x: -66.6666666%;
.-translate-x-1/4
--transform-translate-x: -25%;
.-translate-x-2/4
--transform-translate-x: -50%;
.-translate-x-3/4
--transform-translate-x: -75%;
.-translate-x-full
--transform-translate-x: -100%;
.translate-y-0
--transform-translate-y: 0;
.translate-y-0.5
--transform-translate-y: 0.125rem;
.translate-y-1
--transform-translate-y: 0.25rem;
.translate-y-1.5
--transform-translate-y: 0.375rem;
.translate-y-2
--transform-translate-y: 0.5rem;
.translate-y-2.5
--transform-translate-y: 0.625rem;
.translate-y-3
--transform-translate-y: 0.75rem;
.translate-y-3.5
--transform-translate-y: 0.875rem;
.translate-y-4
--transform-translate-y: 1rem;
.translate-y-5
--transform-translate-y: 1.25rem;
.translate-y-6
--transform-translate-y: 1.5rem;
.translate-y-7
--transform-translate-y: 1.75rem;
.translate-y-8
--transform-translate-y: 2rem;
.translate-y-9
--transform-translate-y: 2.25rem;
.translate-y-10
--transform-translate-y: 2.5rem;
.translate-y-11
--transform-translate-y: 2.75rem;
.translate-y-12
--transform-translate-y: 3rem;
.translate-y-14
--transform-translate-y: 3.5rem;
.translate-y-16
--transform-translate-y: 4rem;
.translate-y-20
--transform-translate-y: 5rem;
.translate-y-24
--transform-translate-y: 6rem;
.translate-y-28
--transform-translate-y: 7rem;
.translate-y-32
--transform-translate-y: 8rem;
.translate-y-36
--transform-translate-y: 9rem;
.translate-y-40
--transform-translate-y: 10rem;
.translate-y-44
--transform-translate-y: 11rem;
.translate-y-48
--transform-translate-y: 12rem;
.translate-y-52
--transform-translate-y: 13rem;
.translate-y-56
--transform-translate-y: 14rem;
.translate-y-60
--transform-translate-y: 15rem;
.translate-y-64
--transform-translate-y: 16rem;
.translate-y-72
--transform-translate-y: 18rem;
.translate-y-80
--transform-translate-y: 20rem;
.translate-y-96
--transform-translate-y: 24rem;
.translate-y-px
--transform-translate-y: 1px;
.translate-y-1/2
--transform-translate-y: 50%;
.translate-y-1/3
--transform-translate-y: 33.333333%;
.translate-y-2/3
--transform-translate-y: 66.6666666%;
.translate-y-1/4
--transform-translate-y: 25%;
.translate-y-2/4
--transform-translate-y: 50%;
.translate-y-3/4
--transform-translate-y: 75%;
.translate-y-full
--transform-translate-y: 100%;
.-translate-y-0
--transform-translate-y: 0;
.-translate-y-0.5
--transform-translate-y: -0.125rem;
.-translate-y-1
--transform-translate-y: -0.25rem;
.-translate-y-1.5
--transform-translate-y: -0.375rem;
.-translate-y-2
--transform-translate-y: -0.5rem;
.-translate-y-2.5
--transform-translate-y: -0.625rem;
.-translate-y-3
--transform-translate-y: -0.75rem;
.-translate-y-3.5
--transform-translate-y: -0.875rem;
.-translate-y-4
--transform-translate-y: -1rem;
.-translate-y-5
--transform-translate-y: -1.25rem;
.-translate-y-6
--transform-translate-y: -1.5rem;
.-translate-y-7
--transform-translate-y: -1.75rem;
.-translate-y-8
--transform-translate-y: -2rem;
.-translate-y-9
--transform-translate-y: -2.25rem;
.-translate-y-10
--transform-translate-y: -2.5rem;
.-translate-y-11
--transform-translate-y: -2.75rem;
.-translate-y-12
--transform-translate-y: -3rem;
.-translate-y-14
--transform-translate-y: -3.5rem;
.-translate-y-16
--transform-translate-y: -4rem;
.-translate-y-20
--transform-translate-y: -5rem;
.-translate-y-24
--transform-translate-y: -6rem;
.-translate-y-28
--transform-translate-y: -7rem;
.-translate-y-32
--transform-translate-y: -8rem;
.-translate-y-36
--transform-translate-y: -9rem;
.-translate-y-40
--transform-translate-y: -10rem;
.-translate-y-44
--transform-translate-y: -11rem;
.-translate-y-48
--transform-translate-y: -12rem;
.-translate-y-52
--transform-translate-y: -13rem;
.-translate-y-56
--transform-translate-y: -14rem;
.-translate-y-60
--transform-translate-y: -15rem;
.-translate-y-64
--transform-translate-y: -16rem;
.-translate-y-72
--transform-translate-y: -18rem;
.-translate-y-80
--transform-translate-y: -20rem;
.-translate-y-96
--transform-translate-y: -24rem;
.-translate-y-px
--transform-translate-y: -1px;
.-translate-y-1/2
--transform-translate-y: -50%;
.-translate-y-1/3
--transform-translate-y: -33.333333%;
.-translate-y-2/3
--transform-translate-y: -66.6666666%;
.-translate-y-1/4
--transform-translate-y: -25%;
.-translate-y-2/4
--transform-translate-y: -50%;
.-translate-y-3/4
--transform-translate-y: -75%;
.-translate-y-full
--transform-translate-y: -100%;
Skew
Define a transformation that skews an element on the 2D plane.
.skew-x-0
--transform-skew-x: 0;
.skew-x-1
--transform-skew-x: 1deg;
.skew-x-2
--transform-skew-x: 2deg;
.skew-x-3
--transform-skew-x: 3deg;
.skew-x-6
--transform-skew-x: 6deg;
.skew-x-12
--transform-skew-x: 12deg;
.-skew-x-1
--transform-skew-x: -1deg;
.-skew-x-2
--transform-skew-x: -2deg;
.-skew-x-3
--transform-skew-x: -3deg;
.-skew-x-6
--transform-skew-x: -6deg;
.-skew-x-12
--transform-skew-x: -12deg;
.skew-y-0
--transform-skew-y: 0;
.skew-y-1
--transform-skew-y: 1deg;
.skew-y-2
--transform-skew-y: 2deg;
.skew-y-3
--transform-skew-y: 3deg;
.skew-y-6
--transform-skew-y: 6deg;
.skew-y-12
--transform-skew-y: 12deg;
.-skew-y-1
--transform-skew-y: -1deg;
.-skew-y-2
--transform-skew-y: -2deg;
.-skew-y-3
--transform-skew-y: -3deg;
.-skew-y-6
--transform-skew-y: -6deg;
.-skew-y-12
--transform-skew-y: -12deg;
Transitions and Animation
Transition Delay
Specify the duration to wait before starting a property's transition effect when its value changes.
.delay-75
transition-delay: 75ms;
.delay-100
transition-delay: 100ms;
.delay-150
transition-delay: 150ms;
.delay-200
transition-delay: 200ms;
.delay-300
transition-delay: 300ms;
.delay-500
transition-delay: 500ms;
.delay-700
transition-delay: 700ms;
.delay-1000
transition-delay: 1000ms;
Transition Property
Set the CSS properties to which a transition effect should be applied.
.transition
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
.transition-none
transition-property: none;
.transition-all
transition-property: all;
.transition-colors
transition-property: background-color, border-color, color, fill, stroke;
.transition-opacity
transition-property: opacity;
.transition-shadow
transition-property: box-shadow;
.transition-transform
transition-property: transform;
Transition Duration
Set the length of time a transition animation should take to complete.
.duration-75
transition-duration: 75ms;
.duration-100
transition-duration: 100ms;
.duration-150
transition-duration: 150ms;
.duration-200
transition-duration: 200ms;
.duration-300
transition-duration: 300ms;
.duration-500
transition-duration: 500ms;
.duration-700
transition-duration: 700ms;
.duration-1000
transition-duration: 1000ms;
Transition Timing Function
Set how intermediate values are calculated for CSS properties being affected by a transition effect.
.ease-linear
transition-timing-function: linear;
.ease-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
.ease-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
.ease-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
Animation
Apply an animation between styles.
.animate-none
animation: none;
.animate-spin
animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-ping
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-pulse
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-bounce
animation: animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); } }
SVG
Fill
Define the color of an SVG object.
.fill-current
fill: currentColor;
Stroke
Define the stroke color of an SVG object.
.stroke-current
stroke: currentColor;
Stroke Width
Set the stroke width of an SVG object.
.stroke-0
stroke-width: 0;
.stroke-1
stroke-width: 1;
.stroke-2
stroke-width: 2;