Skip to content

Commit

Permalink
Document @theme static (#2067)
Browse files Browse the repository at this point in the history
This PR adds documentation for the new `@theme static` option to always
include
all CSS variables from a theme block.

Merge once tailwindlabs/tailwindcss#16211 is
released.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
  • Loading branch information
RobinMalfait and philipp-spiess authored Feb 25, 2025
1 parent e8a38eb commit b356e74
Showing 1 changed file with 15 additions and 0 deletions.
15 changes: 15 additions & 0 deletions src/docs/theme.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -499,6 +499,21 @@ For example, this text will fall back to `sans-serif` instead of using `Inter` l

This happens because `var(--font-sans)` is resolved where `--font-sans` is defined _(on `#parent`)_, and `--font-inter` has no value there since it's not defined until deeper in the tree _(on `#child`)_.

### Generating all CSS variables

By default only used CSS variables will be generated in the final CSS output. If you want to always generate all CSS variables, you can use the `static` theme option:

```css
/* [!code filename:app.css] */
/* [!code word:static] */
@import "tailwindcss";

@theme static {
--color-primary: var(--color-red-500);
--color-secondary: var(--color-blue-500);
}
```

### Sharing across projects

Since theme variables are defined in CSS, sharing them across projects is just a matter of throwing them into their own CSS file that you can import in each project:
Expand Down

0 comments on commit b356e74

Please sign in to comment.