---
title: Tailwind Classes
description: Theming support for 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:

```jsx
// 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.

```jsx
// 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:

```jsx
<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)

| Value                  | Usage                                  |
| ---------------------- | -------------------------------------- |
| `foreground-{DEFAULT}` | Default text (**DEFAULT** is optional) |
| `foreground-light`     | Light text                             |
| `foreground-lighter`   | Lighter text                           |
| `foreground-muted`     | Muted text                             |

Examples:

```jsx
<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

| Value                         | Usage                                                        |
| ----------------------------- | ------------------------------------------------------------ |
| `background-{DEFAULT}`        | Main body background (**DEFAULT** is optional)               |
| `background-surface-100`      | Panels and surfaces on the same level of the main background |
| `background-surface-200`      | Surfaces that overlap the main content (ex. dropdowns)       |
| `background-surface-300`      | Surfaces that are stacked above background-surface-200       |
| `background-alternative`      | Alternative background (inverted)                            |
| `background-overlay`          | Overlays, Dropdowns, Popovers                                |
| `background-control`          | Inputs, Radios, Checkboxes                                   |
| `background-button-{DEFAULT}` | Button default                                               |

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

| Value                     | Usage                                    |
| ------------------------- | ---------------------------------------- |
| `border-{DEFAULT}`        | Default border (**DEFAULT** is optional) |
| `border-secondary`        | Secondary border                         |
| `border-alternative`      | Alternative border (inverted)            |
| `border-overlay`          | Overlays, Dropdowns, Popovers            |
| `border-control`          | Inputs, Radios, Checkboxes               |
| `border-strong`           | Hover, Focus                             |
| `border-stronger`         | Highlighted border                       |
| `border-button-{DEFAULT}` | Button default border                    |
| `border-button-hover`     | Button default border hover              |

Examples:

```
border-overlay
border-alternative
text-border-control
```

### Brand

| Value     |
| --------- |
| `200`     |
| `300`     |
| `400`     |
| `500`     |
| `DEFAULT` |
| `600`     |
| `button`  |

### Destructive

| Value     |
| --------- |
| `200`     |
| `300`     |
| `400`     |
| `500`     |
| `DEFAULT` |
| `600`     |

### Warning

| Value     |
| --------- |
| `200`     |
| `300`     |
| `400`     |
| `500`     |
| `DEFAULT` |
| `600`     |