Tailwind CSS Framework

Tailwind CSS* is a Utility-first CSS framework used to build rapid custom UI.

Tailwind

Layout

  • Container
  • Box sizing
  • Display
  • Float
  • Clear
  • Object Fit
  • Object Position
  • Overflow
  • Overscroll
  • Position
  • Top/Right/Left/Bottom
  • Visibility
  • Z-index

Flexbox

  • Flex Direction
  • Flex Wrap
  • Flex
  • Flex Grow
  • Flex Shrink
  • Order

Grid

Alignment

  • Justify Content
  • Justify Items
  • Justify Self
  • Align Self
  • Place Content
  • Place Items
  • Place Self

Spacing

  • Padding
  • Margin
  • Space Between

Sizing

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

Typography

  • font-family
  • font-size
  • font-smoothing
  • font-style
  • font-weight
  • font-variant numberic
  • letter-spacing
  • line-height
  • list-style-type
  • placeholder color
  • text-alignment
  • text-color
  • text-decoration
  • text-transform
  • vertical alignment
  • whitespace
  • word-break

Backgrounds

  • image
  • clip
  • color
  • opacity
  • position
  • repeat
  • size

Borders

  • border-radius
  • border-width
  • border-color
  • border-opacity
  • border-style
  • divide width
  • devide color
  • devide opacity
  • divide style
  • ring width/color/opacity/offset width/ offset color

Effects

Filters

Transitions and Animation

Transform

Interactivity

Resources