Skip to content

Instantly share code, notes, and snippets.

@ErfanMirzapour

ErfanMirzapour/TailwindCSS-CheatSheet.md

Last active September 9, 2024 17:01
Show Gist options
  • Save ErfanMirzapour/af8b91e2a5d675c153b7e7706d009a02 to your computer and use it in GitHub Desktop.
Save ErfanMirzapour/af8b91e2a5d675c153b7e7706d009a02 to your computer and use it in GitHub Desktop.
Download ZIP
Mapping CSS properties to equivalent tailwind classes
Raw
TailwindCSS-CheatSheet.md

Tailwind CSS (@v2.0.2)

Table of Contents

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment