Learning Tailwind CSS

Jason Swartz — Wed, 07 Dec 2022 06:11:23 GMT

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
1. sm = element >= 640px
2. md = element >= 768px
3. lg = element >= 1024px
4. xl = element >= 1280px
5. 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

Jason's Blog