Skip to main content

Tailwind Classes

Below is a complete list of the customized Tailwind utility classes we use as a central part of the SF design system.

Layout


Overflow

Docs

Position

Docs

Visibility

Docs

Top / Right / Bottom / Left

Docs

Z Index

Docs

Display

Docs

Flexbox & Grid


Grid Column

Docs

Grid Row

Docs

Flex

Docs

Flex Shrink

Docs

Grid Template Columns

Docs

Grid Template Rows

Docs

Flex Direction

Docs

Flex Wrap

Docs

Align Content

Docs

Align Items

Docs

Justify Content

Docs

Justify Items

Docs

Gap

Docs

Sizing


Height

Docs

Width

Docs

Max Width

Docs

Backgrounds


Background Color

Docs

Spacing


Margin

Docs

Padding

Docs

Borders


Border Width

Docs

Border Radius

Docs

Border Style

Docs

Border Color

Docs

Typography


White Space

Docs

List Style Type

Docs

Text Align

Docs

Vertical Align

Docs

Font Family

Docs

Font Size

Docs

Letter Spacing

Docs

Line Height

Docs

Font Weight

Docs

Text Color

Docs

Text Decoration

Docs

Font Smoothing

Docs

Effects


Opacity

Docs

Interactivity


Pointer Events

Docs

Cursor

Docs

Webkit Appearance

Docs

Appearance

Docs