Mapping CSS properties to equivalent tailwind classes

TailwindCSS-CheatSheet.md

Tailwind CSS (@v2.0.2)

Table of Contents

• Core
  • Responsive Design
  • Pseudo-classes
  • Visually Hidden
• Units
• Properties
  • Layout
  • Flexbox
  • Grid
  • Box Alignment
  • Spacing
  • Sizing
  • Typegraphy
  • Backgrounds
    • Linear Gradient
  • Borders
    • Divide
    • Ring
  • Effects
  • Tables
  • Transitions
  • Animations
  • Transforms
  • Interactivity
  • SVG

Core

Responsive Design

• @media (min-width: 640|768|1024|1280|1536px) → <viewport-breakpoint>:

Pseudo-classes

• :pseudo-class → <pseudo-class>:

Visually Hidden

• [not-]sr-only

---

Units

• <viewport-breakpoint>: sm | md | lg | xl | 2xl

• <shadow-size>: <viewport-breakpoint>

• <radius-size>: <shadow-size> | 3xl

• <max-width>: xs | <radius-size> | 4xl..7xl

• <font-size>: <max-widh> | 8xl | 9xl

  instead of md has base.

• <spacing>: px | 0 0.5..4 5 6..12 14 16 20 24..64 72 80..96

• <border-size>: 0 2 4 8

• <position-fractions>: 2..4 fractions

• <sizing-fractions>: <position-fractions> | 5, 6 and 12 fractions

• <color>: (transparent | current | black | white) | <color-name> - 50 100 200..900

• <color-name>: gray | red | yellow | green | blue | indigo | purple | pink

• <opacity>: 0 5 10 20 30..70 75 80 90 95 100

• <transition-duration>: 75 100 150 200 300 500 700 1000

• <scale>: 0 50 75 90 95..110 125 150

• <rotate-deg>: 0 1 3 6 12 45 90 180

• <skew>: 0 1 2 3 6 12

• <z-idex-value>: 0 10..50

• <order>: 1 2..12

• <line-height>: 3 4..10

• <position>: center | top| right[-top | bottom] | bottom | left[-top | bottom]

• <divide>: 0 2..8

• <border-style>: none | solid | dashed | dotted | double

---

Properties

Layout

• container

The container class sets the max-width of an element to match the min-width of the current breakpoint.

• box-sizing: box-(border | content)

• display: hidden |inline | block | flex | grid | (inline-block | flex | grid) ...

• float: float-(none | left | right)

• clear: clear-(none | left | right | both)

• object-fit: object-(none | contain | cover | fill | scale-down)

• object-position: object-<position>

• overflow: overflow[-x | y]-(auto |hidden | visible | scroll)

• overscroll-behavior: overscoll[-x | y]-(none | auto | contain)

• position: static | relative | absolute | fixed | sticky

• top|right|left|bottom: [-](inset[-x | y] | TRBL)-(auto | full | <spacing> | <potision-fractions>)

auto doesn't support [-] prefix.

• z-index: z-auto|<z-index-value>

• visibility: visible | invisible

Flexbox

• flex-direction: flex-(row[-reverse] | col[-reverse])
• flex-wrap: flex-(nowrap | wrap[-reverse])
• flex-grow: flex-grow[-0]
• flex-shrink: flex-shrink[-0]
• flex: flex-(none | auto | initial | 1)
• order: order-(none | first | last-<order-value>)

Grid

• grid-template-columns: grid-cols-(none | 1..12)
• grid-template-rows: grid-cols-(none | 1..6)
• grid-column: col-auto | col-span-(full | 1..12)
• grid-column-(start | end): col-(start | end)-(auto | 1..13)
• grid-row: row-auto | row-span-(full | 1..6)
• grid-row-( | end): row-(start | end)-(auto | 1..7)
• grid-auto-(rows | columns): auto-(rows | cols)-(auto | min | max | fr)
• [row | column-]gap: gap[-x | y]-<spacing>

Box Alignment

• (justify | align)-items: [justify-]items-(start | end | center | stretch)

justify has auto and align has baseline .

• (justify | align)-content: (justify | align)-(start | end | center | between | around | evenly)

• justify-self: justify-self-<justify-items-value>

• align-self: self-<justify-items-value>

• place-content: place-content-(stretch | <content-value>)

• place-items: place-items-<justify-items-value>

• place-self: place-self-<justify-items-value>

Spacing

• padding[-TRBL]: p[-y | x | t | r | b | l]-<spacing>
• margin[-TRBL]: [-]m[-y | x | t | r | b | l]-<spacing>

Child Elemets: [-]space-[x | y]-(reverse | <spacing>)

Sizing

• width | height: (w | h)-(auto | full | screen | min | max | <spacing> | <size-fractions>)

Height doesn't have min/max.

• min-width: min-w-(full | min | max | 0)
• max-width: max-w-(none | 0 | full | min | max | prose | screen-<viewport-breakpoint> | <max-width>)
• min-height: min-h-(0 | full | screen)
• max-height: max-h-(full | screen | <spacing>)

Typegraphy

• font-family: font-(sans | serif | mono)
• font-size: text-<font-size>
• font-style: [not-]italic
• font-weight: font-(thin | exralight | light | normal | medium | semibold | bold | extrabold | black)
• font-variant-numeric: ordinal | slashed-zero |(normal | lining | oldstyle | proportional | tabular)-nums | (diagonal | stacked)-fractions
• letter-spacing: tracking-(normal | tight | tigher | wide | wider | widest)
• line-height: leading-(none | normal | tight | snug | relaxed | loose | <line-height>)
• list-style-type: list-(none | disc | decimal)
• list-style-position: list-(inside | outside)
• color: text-<color>

::placeholder { color: placeholder-<color> }

• Text Opacity: text-opacity-<opacity>

Placeholder opacity: placeholder-opacity-<opacity>

• text-align: text-(left | center | right | justify)
• text-decration: underline | line-through | no-underline
• text-transform: uppercase | lowercase | capitalize | normal-case
• text-overflow: truncate | overflow-(ellipsis | clip)
• vertical-align: align-(baseline | top | middle | bottom | text-(top | bottom))
• white-space: whitespace-(normal | nowrap | pre[-line | wrap])
• word-break | overflow-wrap: break-(normal | words | all)

Backgrounds

• background-atachment: bg-(fixed | local | scroll)
• background-clip: bg-clip-(border | padding | content | text)
• background-color: bg-<color>
• Opacity: bg-opacity-<opacity>
• background-position: bg-<position>
• background-repeat: bg-([no-]repeat | repeat-(x | y | round | space))
• background-size: bg-(auto | cover | contain)

Linear Gradient

• Direction: bg-(none | gradient-to-(t[-r | l] | r | b[-r | l] | l))
• Color Stops: (from | via | to)-<color>

Borders

• border-radius: rounded[-t | r | b | l | tl | tr | br | bl][-none | full | <radius-size>)
• border-width[-TRBL]: border[-t | r | b | l][-<border-size>]
• border-color[-TRBL]: border-<color>
• Opacity: border-opacity-<opacity>
• border-style: border-<border-style>

Divide

• Width: divide-(x | y)[-reverse | <divide>]
• Color: divide-<color>
• Opacity: divide-opacity-<opacity>
• Style: divide-<border-style>

Ring

• Width: * | ring[-inset | 1 | <border-size>]
• Color: ring-<color>
• Opacity: ring-opacity-<opacity>
• Offset: ring-offset-(1 | <border-size>)
• Offset Color: ring-offset-<color>

Effects

• box-shadow: shadow-(none | inner | <shadow-size>)
• opacity: opacity-<opacity-value>

Tables

• border-collapse: border-(seprate | collapse)
• table-layout: table-(auto | fixed)

Transitions

• transition-property: transition[-(none | all | colors | opacity | shadow | transform)]
• transition-duration: duration-<transition-duration>
• tansition-timing-function: ease-(linear | in | out | in-out)
• transition-delay; delay-<transition-duration>

Animations

Custom Animations: animate-(none | spin | ping | pulse | bounce)

Transforms

• transform: transform[-none | gpu)
• transform-origin: origin-(center | top[-right | left] | right | bottom[-right | left] | left)

Scale: scale[-x | y]-<scale> Translate: [-]transform-(x | y)-(full | <spacing> | <position-fraction>) Skew: [-]skew-(x | y)-<skew-deg> Rotate: [-]rotate-<rotate-deg>

Interactivity

• appearance: appearance-none
• cursor: cursor-(auto | default | pointer | wait | text | move | not-allowed)
• outline && outline-offset: outline-(none | white | blcock)
• pointer-events: pointer-events-(none | auto)
• resize: resize[-none | x | y]
• user-select: select-(none | auto | text | all)

SVG

• fill: fill-current
• stroke: stroke-current
• stroke-width: stroke-(0 1 2)