Tailwind Classes

Supabase uses Tailwind classes that in turn use CSS properties. This is to support the concept of theming, so that:

1. We can update themes from one place.
2. We can offer custom or additional themes in the future.

Primitives

We define primitive color values using these tokens:

• background
• foreground
• border
• brand
• warning
• destructive

These values are exported from Figma as a .json file and transformed into Tailwind utilities through some scripts under packages/ui/internals/tokens.

Any of these colors are available on any Tailwind utility that accepts color. For example:

// this uses the default foreground color for this theme
<span className="text-foreground"></span>
 
// this uses the 'light' foreground color for this theme (one notch 'softer' than the default)
<span className="text-foreground-light"></span>
 
// this uses the default warning color for this theme
<span className="text-warning"></span>
 
// this uses the '500' warning color
<span className="text-warning-500"></span>

Shorthands

We support shorthand classes for background, foreground and border. For example:

• text-muted is the same as text-foreground-muted
• bg-surface is the same as bg-background-surface-100
• border-strong is the same as border-border-strong

This will stop you from needing to 'double type' the same utility name.

You might notice we use foreground and background as prefixes, this is only because it is a Design Token standard, where as Tailwind uses bg and text.

Mixing colors

Even with shorthands, remember you can use any color. For example, foreground-light can also be applied on borders and backgrounds as border-foreground-light and bg-foreground-light, if needed. Similarly, background and border primitives can be used on other Tailwind utilities.

// use the text light color for some text
<span className="text-light"></span>
 
// we can use the same color for a background
<div className="bg-foreground-light">
    <span>I have the same background color as the above example</span>
</div>

Opacity support

All colors are generated using Tailwind opacity, like hsl(--background-default) / var(--tw-bg-opacity). This means all the color options in our themes can support opacity rules. For example:

<div className="flex gap-3">
  <div className="w-4 h-4 rounded-full bg-surface-300"></div>
  <div className="w-4 h-4 rounded-full bg-surface-300/90"></div>
  <div className="w-4 h-4 rounded-full bg-surface-300/80"></div>
  <div className="w-4 h-4 rounded-full bg-surface-300/75"></div>
  <div className="w-4 h-4 rounded-full bg-surface-300/50"></div>
</div>

Usage

The following Tailwind classes are a combination of Tailwind utilities and our primitives.

Note that the shade of the DEFAULT value on each scale pattern is variable. Sometimes it is fixed at a particular shade (such as 500 or 600), but only when contrast is sufficient.

Foreground (Text)

Examples:

<div className="text-foreground">/div>
<div className="text-foreground-light">/div>
<div className="text-foreground-lighter">/div>
<div className="text-foreground-muted">/div>
<div className="bg-foreground-light">/div>

Background

The background part can be omitted when used on the bg Tailwind utility.

Examples:

bg-surface-100
bg-overlay
bg-alternative
text-background-surface-100

Border

Examples:

border-overlay
border-alternative
text-border-control

Brand

Destructive

Warning