From b356e745f24fad201b339919ea3a036ad3e70b65 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 25 Feb 2025 11:29:35 +0100 Subject: [PATCH] Document `@theme static` (#2067) This PR adds documentation for the new `@theme static` option to always include all CSS variables from a theme block. Merge once https://github.com/tailwindlabs/tailwindcss/pull/16211 is released. --------- Co-authored-by: Philipp Spiess --- src/docs/theme.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/docs/theme.mdx b/src/docs/theme.mdx index c1b123940..be18f7597 100644 --- a/src/docs/theme.mdx +++ b/src/docs/theme.mdx @@ -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: