shahryarjb
commented
1 year ago Backgrounds
bg- from- via- to-
Borders
border- divide- rounded-
Colors
text- bg- from- via- to- border- divide-
Display
hidden block inline-block inline flex inline-flex table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row-group table-row flow-root
Flexbox
flex- items- justify- self- order- Grid grid-cols- col- gap- grid-rows- grid-flow- auto-cols- auto-rows- auto-flow- place-items- place-content- place-self- Interactivity cursor- pointer-events- Layout container box-border box-content
Sizing
w- min-w- max-w- h- min-h- max-h- resize-
Spacing
m- mt- mr- mb- ml- mx- my- p- pt- pr- pb- pl- px- py-
Typography
font- text- leading- tracking- w- whitespace- break- truncate align- line-through underline no-underline uppercase lowercase capitalize normal-case
Transitions and Animations
transition- duration- ease- delay- animate-
Transformations
transform origin- scale- rotate- translate- skew-
Responsive Design
sm: md: lg: xl: 2xl:
Pseudo-classes
hover: focus: active: visited: disabled: group-hover:
Background color: bg-{color} or bg-{hex code} Text color: text-{color} or text-{hex code} Border color: border-{color} or border-{hex code} Width: w-{number} or w-{fraction} Height: h-{number} or h-{fraction} Minimum width: min-w-{number} or min-w-{fraction} Minimum height: min-h-{number} or min-h-{fraction} Maximum width: max-w-{number} or max-w-{fraction} Maximum height: max-h-{number} or max-h-{fraction} Padding: p-{number} or p-{fraction} Margin: m-{number} or m-{fraction} Font size: text-{size} or text-{size}@{screen size} Font weight: font-{weight} Line height: leading-{size} Letter spacing: tracking-{size} Border width: border-{width} Border radius: rounded-{size} or rounded-{direction}-{size} Flexbox direction: flex-{direction} Flexbox justify content: justify-{content} Flexbox align items: items-{alignment} Flexbox wrap: flex-wrap Flexbox order: order-{number} Positioning: absolute, relative, fixed Top: top-{number} or top-{fraction} Bottom: bottom-{number} or bottom-{fraction} Left: left-{number} or left-{fraction} Right: right-{number} or right-{fraction} Z-index: z-{index} Overflow: overflow-{type} Display: hidden, block, inline-block, flex, grid, table, table-row, table-cell In addition to these, you can use Tailwind's custom calculation syntax, which allows you to use mathematical operations in your classes. For example:
top-[calc(100vh - 2rem)]: sets the top position to 100% of the viewport height minus 2rem width-[calc(50% - 1rem)]: sets the width to 50% minus 1rem left-[calc(50% - (var(--marker-width) / 2))]: sets the left position to 50% minus half of a custom CSS variable called --marker-width. Note that custom calculations require the use of calc() and support most standard mathematical operations.