Skip to content

Latest commit

 

History

History
723 lines (478 loc) · 14.8 KB

README.md

File metadata and controls

723 lines (478 loc) · 14.8 KB
Raw

TailwindCSS Cheatsheet (ARCHIVED)

Update 04/29/2022:

I've made the decision to archive this repo for the following reasons:

  • This cheatsheet is behind by two major versions of Tailwind
  • The Tailwind V3 API has grown to a size that can no longer be confined to a single page
  • The Tailwind website is likely just as fast to search for what you are looking for
  • The API changes pretty frequently, and I don't want to have to maintain this cheatsheet

Last updated on November 9th, 2020 for TailwindCSS v1.9.6

This README contains a complete list of the TailwindCSS class names for a quick reference.

There is also a more condensed, printable one-page jpg version:

Printable TailwindCSS Cheatsheet

Default Config

View the TailwindCSS default configuration

Breakpoints: sm:640px | md:768px | lg:1024px | xl:1280px

Colors: transparent, current, black, white, grays, reds, oranges, yellows, greens, teals, blues, indigos, purples, pinks

Spacing: 0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px

Supported Variants: responsive|group-hover|focus-within|first|last|odd|even|hover|focus|active|visited|disabled|motion-safe|motion-reduce

Utility Classes

LAYOUT

Container

  • .container

Box Sizing

  • .box-[border|content]

Display

  • .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
  • .grid
  • .inline-grid
  • .contents
  • .hidden

Floats

  • .float-[right|left|none]
  • .clearfix

Clear

  • .clear-[left|right|both|none]

Object Fit

  • .object-[contain|cover|fill|none|scale-down]

Object Position

  • .object-bottom
  • .object-center
  • .object-left
  • .object-left-bottom
  • .object-left-top
  • .object-right
  • .object-right-bottom
  • .object-right-top
  • .object-top

Overflow

  • .overflow-[auto|hidden|visible|scroll]
  • .overflow-x-[auto|hidden|visible|scroll]
  • .overflow-y-[auto|hidden|visible|scroll]
  • .scrolling-[touch|auto]

Overscroll Behavior

  • .overscroll-[auto|contain|none]
  • .overscroll-y-[auto|contain|none]
  • .overscroll-x-[auto|contain|none]

Position

  • .static
  • .fixed
  • .absolute
  • .relative
  • .sticky

Top / Right / Bottom / Left

  • .inset-[0|auto]
  • .inset-y-[0|auto]
  • .inset-x-[0|auto]
  • .top-[0|auto]
  • .right-[0|auto]
  • .bottom-[0|auto]
  • .left-[0|auto]

Visibility

  • .visible
  • .invisible

Z-index

  • .z-[0|10|20|30|40|50|auto]

FLEXBOX

Make sure to use the .flex class with the classes below!

Flex Direction

  • .flex-row
  • .flex-row-reverse
  • .flex-col
  • .flex-col-reverse

Flex Wrap

  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-no-wrap

Flex

  • .flex-1
  • .flex-auto
  • .flex-initial
  • .flex-none

Flex Grow

  • .flex-grow-0
  • .flex-grow

Flex Shrink

  • .flex-shrink-0
  • .flex-shrink

Order

  • .order-[1|2|3|4|5|6|7|8|9|10|11|12]
  • .order-[first|last|none]

GRID

Grid Template Columns

  • .grid-cols-[1|2|3|4|5|6|7|8|9|10|11|12|none]

Grid Column Start / End

  • .col-auto
  • .col-span-[1|2|3|4|5|6|7|8|9|10|11|12|full]
  • .col-start-[1|2|3|4|5|6|7|8|9|10|11|12|13|auto]
  • .col-end-[1|2|3|4|5|6|7|8|9|10|11|12|13|auto]

Grid Template Rows

  • .grid-rows-[1|2|3|4|5|6|none]

Grid Row Start / End

  • .row-auto
  • .row-span-[1|2|3|4|5|6|full]
  • .row-start-[1|2|3|4|5|6|7|auto]
  • .row-end-[1|2|3|4|5|6|7|auto]

Grid Auto Flow

  • .grid-flow-row
  • .grid-flow-col
  • .grid-flow-row-dense
  • .grid-flow-col-dense

Grid Auto Columns

  • .auto-cols-auto
  • .auto-cols-min
  • .auto-cols-max
  • .auto-cols-fr

Grid Auto Rows

  • .auto-rows-auto
  • .auto-rows-min
  • .auto-rows-max
  • .auto-rows-fr

Gap

  • .gap-[0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px]
  • .gap-x-[0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px]
  • .gap-y-[0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|px]

BOX ALIGNMENT

Justify Content

  • .justify-[start|end|center|between|around|evenly]

Justify Items

  • .justify-items-[auto|start|end|center|stretch]

Justify Self

  • .justify-self-[auto|start|end|center|stretch]

Align Content

  • .content-[center|start|end|between|around|evenly]

Align Items

  • .items-[start|end|center|baseline|stretch]

Align Self

  • .self-[auto|start|end|center|stretch]

Place Content

  • .place-content-[center|start|end|between|around|evenly|stretch]

Place Items

  • .place-items-[auto|start|end|center|stretch]

Place Self

  • .place-self-[auto|start|end|center|stretch]

SPACING

Padding

  • .[p|py|px|pt|pr|pb|pl]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px]

Margin

  • .[m|my|mx|mt|mr|mb|ml]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|auto|px]
  • .-[m|my|mx|mt|mr|mb|ml]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px]

Space Between

  • .space-[x|y]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px|reverse]
  • .-space-[x|y]-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|px]

SIZING

Width

  • .w-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|auto|px]
  • .w-[1/2|1/3|2/3|1/4|2/4|3/4]
  • .w-[1/5|2/5|3/5|4/5]
  • .w-[1/6|2/6|3/6|4/6|5/6]
  • .w-[1/12|2/12|3/12|4/12|5/12|6/12|7/12|8/12|9/12|10/12|11/12]
  • .w-[full|screen]

Min-Width

  • .min-w-[0|full]

Max-Width

  • .max-w-[none|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|full]
  • .max-w-screen-[sm|md|lg|xl]

Height

  • .h-[0|1|2|3|4|5|6|10|12|16|20|24|32|40|48|56|64|auto|px|full|screen]

Min-Height

  • .min-h-[0,full,screen]

Max-Height

  • .max-h-[full,screen]

TYPOGRAPHY

Font Family

  • .font[sans|serif|mono]

Font Size

  • .text-[xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl]

Font Smoothing

  • .antialiased
  • .subpixel-antialiased

Font Style

  • .italic
  • .not-italic

Font Weight

  • .font-[hairline|thin|light|normal|medium|semibold|bold|extrabold|black]

Font Variant Numeric

  • .normal-nums
  • .ordinal
  • .slashed-zero
  • .lining-nums
  • .oldstyle-nums
  • .proportional-nums
  • .tabular-nums
  • .diagonal-fractions
  • .stacked-fractions

Letter Spacing

  • .tracking-[tighter|tight|normal|wide|wider|widest]

Line Height

  • .leading-[3|4|5|6|7|8|9|10|none|tight|snug|normal|relaxed|loose]

List Style Type

  • .list-[none|disc|decimal]

List Style Position

  • .list-[inside|outside]

Placeholder Color

  • .placeholder-[transparent|current|black|white]
  • .placeholder-gray-[100|200|300|400|500|600|700|800|900]
  • .placeholder-red-[100|200|300|400|500|600|700|800|900]
  • .placeholder-orange-[100|200|300|400|500|600|700|800|900]
  • .placeholder-yellow-[100|200|300|400|500|600|700|800|900]
  • .placeholder-green-[100|200|300|400|500|600|700|800|900]
  • .placeholder-teal-[100|200|300|400|500|600|700|800|900]
  • .placeholder-blue-[100|200|300|400|500|600|700|800|900]
  • .placeholder-indigo-[100|200|300|400|500|600|700|800|900]
  • .placeholder-purple-[100|200|300|400|500|600|700|800|900]
  • .placeholder-pink-[100|200|300|400|500|600|700|800|900]

Placeholder Opacity

  • .placeholder-opacity-[0|25|50|75|100]

Text Align

  • .text-[left|center|right|justify]

Text Color

  • .text-[transparent|current|black|white]
  • .text-gray-[100|200|300|400|500|600|700|800|900]
  • .text-red-[100|200|300|400|500|600|700|800|900]
  • .text-orange-[100|200|300|400|500|600|700|800|900]
  • .text-yellow-[100|200|300|400|500|600|700|800|900]
  • .text-green-[100|200|300|400|500|600|700|800|900]
  • .text-teal-[100|200|300|400|500|600|700|800|900]
  • .text-blue-[100|200|300|400|500|600|700|800|900]
  • .text-indigo-[100|200|300|400|500|600|700|800|900]
  • .text-purple-[100|200|300|400|500|600|700|800|900]
  • .text-pink-[100|200|300|400|500|600|700|800|900]

Text Opacity

  • .text-opacity-[0|25|50|75|100]

Text Decoration

  • .underline
  • .line-through
  • .no-underline

Text Transform

  • .uppercase
  • .lowercase
  • .capitalize
  • .normal-case

Vertical Align

  • .align-[baseline|top|middle|bottom|text-top|text-bottom]

Whitespace

  • .whitespace-[normal|no-wrap|pre|pre-line|pre-wrap]

Word Break

  • .break-[normal|words|all]
  • .truncate

BACKGROUNDS

Background Attachment

  • .bg-[fixed|local|scroll]

Background Clip

  • .bg-clip-[border|padding|content|text]

Background Color

  • .bg-[transparent|current|black|white]
  • .bg-gray-[100|200|300|400|500|600|700|800|900]
  • .bg-red-[100|200|300|400|500|600|700|800|900]
  • .bg-orange-[100|200|300|400|500|600|700|800|900]
  • .bg-yellow-[100|200|300|400|500|600|700|800|900]
  • .bg-green-[100|200|300|400|500|600|700|800|900]
  • .bg-teal-[100|200|300|400|500|600|700|800|900]
  • .bg-blue-[100|200|300|400|500|600|700|800|900]
  • .bg-indigo-[100|200|300|400|500|600|700|800|900]
  • .bg-purple-[100|200|300|400|500|600|700|800|900]
  • .bg-pink-[100|200|300|400|500|600|700|800|900]

Background Opacity

  • .bg-opacity-[0|25|50|75|100]

Background Position

  • .bg-bottom
  • .bg-center
  • .bg-left
  • .bg-left-bottom
  • .bg-left-top
  • .bg-right
  • .bg-right-bottom
  • .bg-right-top
  • .bg-top

Background Repeat

  • .bg-repeat
  • .bg-no-repeat
  • .bg-repeat-x
  • .bg-repeat-y
  • .bg-repeat-round
  • .bg-repeat-space

Background Size

  • .bg-[auto|cover|contain]

Background Image

  • .bg-none
  • .bg-gradient-to-[t|tr|r|br|b|bl|l|tl]

Gradient Color Stops

  • .from-[transparent|current|black|white]
  • .from-gray-[100|200|300|400|500|600|700|800|900]
  • .from-red-[100|200|300|400|500|600|700|800|900]
  • .from-orange-[100|200|300|400|500|600|700|800|900]
  • .from-yellow-[100|200|300|400|500|600|700|800|900]
  • .from-green-[100|200|300|400|500|600|700|800|900]
  • .from-teal-[100|200|300|400|500|600|700|800|900]
  • .from-blue-[100|200|300|400|500|600|700|800|900]
  • .from-indigo-[100|200|300|400|500|600|700|800|900]
  • .from-purple-[100|200|300|400|500|600|700|800|900]
  • .from-pink-[100|200|300|400|500|600|700|800|900]
  • .via-[transparent|current|black|white]
  • .via-gray-[100|200|300|400|500|600|700|800|900]
  • .via-red-[100|200|300|400|500|600|700|800|900]
  • .via-orange-[100|200|300|400|500|600|700|800|900]
  • .via-yellow-[100|200|300|400|500|600|700|800|900]
  • .via-green-[100|200|300|400|500|600|700|800|900]
  • .via-teal-[100|200|300|400|500|600|700|800|900]
  • .via-blue-[100|200|300|400|500|600|700|800|900]
  • .via-indigo-[100|200|300|400|500|600|700|800|900]
  • .via-purple-[100|200|300|400|500|600|700|800|900]
  • .via-pink-[100|200|300|400|500|600|700|800|900]
  • .to-[transparent|current|black|white]
  • .to-gray-[100|200|300|400|500|600|700|800|900]
  • .to-red-[100|200|300|400|500|600|700|800|900]
  • .to-orange-[100|200|300|400|500|600|700|800|900]
  • .to-yellow-[100|200|300|400|500|600|700|800|900]
  • .to-green-[100|200|300|400|500|600|700|800|900]
  • .to-teal-[100|200|300|400|500|600|700|800|900]
  • .to-blue-[100|200|300|400|500|600|700|800|900]
  • .to-indigo-[100|200|300|400|500|600|700|800|900]
  • .to-purple-[100|200|300|400|500|600|700|800|900]
  • .to-pink-[100|200|300|400|500|600|700|800|900]

BORDERS

Border Radius

  • .rounded
  • .rounded-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-t-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-r-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-b-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-l-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-tl-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-tr-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-bl-[none|sm|md|lg|xl|2xl|3xl|full]
  • .rounded-br-[none|sm|md|lg|xl|2xl|3xl|full]

Border Width

  • .border
  • .border-[0|2|4|8]
  • .border-[t|r|b|l]
  • .border-t-[0|2|4|8]
  • .border-r-[0|2|4|8]
  • .border-b-[0|2|4|8]
  • .border-l-[0|2|4|8]

Border Color

  • .border-[transparent|current|black|white]
  • .border-gray-[100|200|300|400|500|600|700|800|900]
  • .border-red-[100|200|300|400|500|600|700|800|900]
  • .border-orange-[100|200|300|400|500|600|700|800|900]
  • .border-yellow-[100|200|300|400|500|600|700|800|900]
  • .border-green-[100|200|300|400|500|600|700|800|900]
  • .border-teal-[100|200|300|400|500|600|700|800|900]
  • .border-blue-[100|200|300|400|500|600|700|800|900]
  • .border-indigo-[100|200|300|400|500|600|700|800|900]
  • .border-purple-[100|200|300|400|500|600|700|800|900]
  • .border-pink-[100|200|300|400|500|600|700|800|900]

Border Opacity

  • .border-opacity-[0|25|50|75|100]

Border Style

  • .border-[solid|dashed|dotted|double|none]

Divide Width

  • .divide-[x|y]
  • .divide-x-[0|2|4|8|reverse]
  • .divide-y-[0|2|4|8|reverse]

Divide Color

  • .divide-[transparent|current|black|white]
  • .divide-gray-[100|200|300|400|500|600|700|800|900]
  • .divide-red-[100|200|300|400|500|600|700|800|900]
  • .divide-orange-[100|200|300|400|500|600|700|800|900]
  • .divide-yellow-[100|200|300|400|500|600|700|800|900]
  • .divide-green-[100|200|300|400|500|600|700|800|900]
  • .divide-teal-[100|200|300|400|500|600|700|800|900]
  • .divide-blue-[100|200|300|400|500|600|700|800|900]
  • .divide-indigo-[100|200|300|400|500|600|700|800|900]
  • .divide-purple-[100|200|300|400|500|600|700|800|900]
  • .divide-pink-[100|200|300|400|500|600|700|800|900]

Divide Opacity

  • .divide-opacity-[0|25|50|75|100]

Divide Style

  • .divide-[solid|dashed|dotted|double|none]

TABLES

Border Collapse

  • .border-[collapse|seperate]

Table Layout

  • .table-[auto|fixed]

EFFECTS

Box Shadow

  • .shadow
  • .shadow-[xs|sm|md|lg|xl|2xl|inner|outline|none]

Opacity

  • .opacity-[0|25|50|75|100]

TRANSITIONS AND ANIMATION

Transition Property

  • .transition
  • .transition-[none|all|colors|opacity|shadow|transform]

Transition Duration

  • .duration-[75|100|150|200|300|500|700|1000]

Transition Timing Function

  • .ease-[linear|in|out|in-out]

Transition Delay

  • .delay-[75|100|150|200|300|500|700|1000]

Animation

  • .animate-[none|spin|ping|pulse|bounce]

TRANSFORMS

Scale

  • .scale-[0|50|75|90|95|100|105|110|125|150]
  • .scale-x-[0|50|75|90|95|100|105|110|125|150]
  • .scale-y-[0|50|75|90|95|100|105|110|125|150]

Rotate

  • .rotate-[0|1|2|3|6|12|45|90|180]
  • .-rotate-[1|2|3|6|12|45|90|180]

Translate

  • .translate-x-[0|1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2]
  • .-translate-x-[1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2]
  • .translate-y-[0|1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2]
  • .-translate-y-[1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64|px|full|1/2]

Skew

  • .skew-x-[0|1|2|3|6|12]
  • .-skew-x-[1|2|3|6|12]
  • .skew-y-[0|1|2|3|6|12]
  • .-skew-x-[1|2|3|6|12]

Transform Origin

  • .origin-center
  • .origin-top
  • .origin-top-right
  • .origin-right
  • .origin-bottom-right
  • .origin-bottom
  • .origin-bottom-left
  • .origin-left
  • .origin-top-left

INTERACTIVITY

Appearance

  • .appearance-none

Cursor

  • .cursor-[auto|default|pointer|wait|text|move|not-allowed]

Outline

  • .outline-[none|white|black]

Pointer Events

  • .pointer-events-[none|auto]

Resize

  • .resize
  • .resize-[none|y|x]

User Select

  • .select-[none|text|all|auto]

SVG

Fill

  • .fill-current

Stroke

  • .stroke-current

Stroke Width

  • .stroke-[0|1|2]

ACCESSIBILITY

Screen Readers

  • .sr-only
  • .not-sr-only