The following are some personal notes I took when learning the tailwindcss framework. Their docs are comprehensive and easy to navigate, and really nice to read, so I recommend starting & ending with them as you learn the framework. These notes are high-level and do not include all of the Tailwind classes you can use (there are sooo many to learn), but do cover some of the most popular ones.
About Tailwind
Utility-First Fundamentals
Style elements by adding existing classes to your elements, e.g. p-5, mx-auto
Design your entire site w/o writing css styles
Want to reuse styles, e.g. text-xs text-slate-600 uppercase font-bold tracking-wider? Try putting these into a React component and reusing it.
If you are reusing styles on a page, try using a loop or map to avoid duplication
Tailwind Sizes
Most Tailwind sizes are in 0.25rem (where 1 rem = the pixel size of the root element's font size, often defaults to 16px).
E.g. size 2 == 0.5rem, size 4 == 1rem, size 8 == 2rem
Custom Styles
- Customize Tailwind's default styles (e.g. colors and fonts) by adding them to your
tailwind.config.js file. See the default configuration or read more at Adding Custom Styles.
Tailwind Modifiers (:)
Modify a class to target a condition with a pseudo hover:, focus:, first-child:, required:, before:, etc
Modify a class to target a condition with a tailwind tag visited:, focus-within:, dark:, etc.
Modify a class to require a min size sm:, md:, lg:, xl:, 2xl:. Or set a max size with max-xl
sm = element >= 640px
md = element >= 768px
lg = element >= 1024px
xl = element >= 1280px
2xl = element >= 1536px
Stack modifiers in sequence to combine them, e.g. dark:hover:bg-sky-700
Modifiers are great for first/last padding, zebra, forms, parent state, sibling state (floating labels!), placeholder formatting, buttons, etc. See the quick reference for all the modifiers
Layout Classes
Display
These classes are shortcuts for the css display: ??? classes, a core part of CSS layout which can magically transform ordinary elements (often div's) into other elements.
| Class | Description |
block | Sets a block element, starts on new line, takes up full width |
contents | Sets the element to be replaced by its children |
flex | Sets a flex container |
grid | Sets a grid container |
inline | Sets an inline element, height/width ignored |
inline-block | Sets an inline element, height/width observed |
inline-flex | Sets an inline flex container |
inline-grid | Sets an inline grid container |
inline-table | Sets an inline table |
list-item | Sets a li element |
none | Sets the element as essentially removed |
table | Sets a table |
table-??? | Sets a table element, eg caption, thead, tr, etc. |
Column and Page Break
| Prefix | Where | What |
break | after | all |
| before | auto |
| inside | avoid |
| | avoid-page |
| | column |
| | left |
| | page |
| | right |
All Other Layout Classes
| Class | Description |
aspect-[auto,square,video] | Set the aspect ratio |
container | Sets taking up full width, uncentered |
columns-# | Sets # of columns in element |
box-decoration-[clone,slice] | Sets how element fragments (eg gradient) are rendered across items |
box-[border,content] | Sets if borders & padding are included when height/width are specified |
[float,clear]-[right,left,none] | Controls wrapping content around an element |
object-[...] | Sets how items fit and are positioned in their containers |
overflow-[...] | Sets how items handle content that is too large |
overscroll-[...] | Sets what the browser does at the edge of a scrollable area |
[static,fixed,absolute,relative,sticky] | Sets how an item is positioned in the DOM |
[left,top,right,bottom]-# | Set placement of positioned element in QuarterRem's |
[inset-[x,y-]-# | Set the all/horiz/vert placement of positioned element in QuarterRem's |
[visible,invisible,collapse] | Set the visibility of an item |
z-# | Set the stack order (z-index) of an item |
Spacing Classes
| Prefix | Direction | Values |
p- (padding) | t- (top) | # QuarterRem's |
m- (margin) | r- (right) | px (1px) |
space- | b- (bottom) | auto |
| l- (left) | |
| x- (horizontal) | |
| y- (vertical) | |
| '' (all 4 sides) |
For example, p-px sets 1px spacing on all sides and space-x-2 sets 0.5rem spacing left and right.
Sizing Classes: Width & Height
| Prefix | Values |
w- (width) | # QuarterRem's |
h- (height) | px (1px) |
Sizing Classes: Min/Max Width & Height
| Prefix | Values |
min-[wh]- | 0 |
max-[wh]- | full (100%) |
| min |
| max |
| fit |
| xs,sm,md,lg... (max-w only) |
Flex & Grid Classes
Flex Containers
| Class | Description |
flex | Sets an element as a flex container |
flex-[col,row][-reverse] | Set the direction of a flex container |
flex-[nowrap,wrap][-reverse] | Set the flex container's wrap policy |
Flex Items
| Class | Description |
basis-# | Set the initial size of a flex item (QR's or fraction of total) |
flex-[col,row][-reverse] | Set the direction of a flex container |
flex-[nowrap,wrap][-reverse] | Set the flex container's wrap policy |
flex-[1,auto,initial,none] | Set the growth / shrink policy of a flex item |
grow[-0] | Set the growth policy of a flex item |
shrink[-0] | Set the shrink policy of a flex item |
order-x | Set the order of a flex item in its container |
Grid Containers
| Class | Description |
grid | Sets an element as a grid container |
grid-cols-# | Set the # of columns |
grid-rows-# | Set the # of rows |
grid-flow-[row,col,dense,row-dense,col-dense] | Set the auto placement strategy |
auto-cols-[auto,min,max,fr] | Set the size of implicit columns |
auto-rows-[auto,min,max,fr] | Set the size of implicit rows |
Grid Items
| Class | Description |
col-span-[#,full] | Set a grid item to span multiple columns |
col-[start,end]-# | Set a grid item to start or end at the 1-based column |
row-span-[#,full] | Set a grid item to span multiple rows |
row-[start,end]-# | Set a grid item to start or end at the 1-based row |
order-x | Set the order of a grid item in its container |
Flex & Grid Containers
| Class | Value |
gap-[x,y-]# | Gap between items # QuarterRem's |
justify-[around,between,center,evenly,end,start] | Justify items along main axis |
justify-items-[center,end,start,stretch] | Justify item children |
content-[around,baseline,between,center,evenly,end,start] | Align rows |
items-[baseline,center,end,start,stretch] | Align items along cross-axis |
pace-content-[around,baseline,between,center, end,evenly,start,stretch] | Justify and align |
Flex & Grid Items
| Prefix | Value |
justify-[self-auto-center,end,start,stretch] | Align an item along its inline axis |
self-[auto,baseline,center,end,start,stretch] | Align an item along its cross axis |
Typography Classes
Font
| Class | Value |
font-[serif,sans,mono] | Set the font family (configure in tailwind.config.js) |
text-[xs,sm,base,lg,xl,#xl] | Set the font size (up to 9xl ) |
[not-]italic | Italicize text |
font-[thin,extralight,light,normal,medium, semibold,bold,extrabold,black] | Set the font weight |
text-[inherit,current,transparent,black,white,(color)] | Set the text color (See the official color chart) |
[underline,overline,line-through,no-underline] | Set the text decoration |
decoration-[inherit,current,transparent,black,white,(color)] | Set the text decoration color |
[uppercase,lowercase,capitalize,normal-case] | Set the text case |
indent-[px,#] | Set the starting indent in QuarterRem's (or px for 1px) |
align-[baseline,top,middle,bottom,text-top,text-bottom,sub,super] | Set the vertical text alignment |
leading-# | Set the line height |
|
Text Layout
| Class | Value |
indent-[px,#] | Set the starting indent in QuarterRem's (or px for 1px) |
align-[baseline,top,middle,bottom,text-top,text-bottom,sub,super] | Set the vertical text alignment |
leading-# | Set the line height |
whitespace-[normal,nowrap,pre,pre-line,pre-wrap] | Set the text wrapping policy |
break-[normal,words,all,keep] | Set the word break policy |
Lists
| Class | Value |
list-[none,disc,decimal] | Set the type of list (bullet vs number) |
list-[inside,outside] | Set the indentation of a list |
