From 676e29a141a94a8b885d298f73e69fab35df0aab Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 6 Feb 2025 17:48:12 +0100 Subject: [PATCH 1/2] document `@theme static` --- src/docs/theme.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/docs/theme.mdx b/src/docs/theme.mdx index c1b123940..70dbf8b46 100644 --- a/src/docs/theme.mdx +++ b/src/docs/theme.mdx @@ -499,6 +499,23 @@ 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 the 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: From de1f2b1614af4f733713bc502f1dbb039dcd1595 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 21 Feb 2025 16:44:33 +0100 Subject: [PATCH 2/2] Update src/docs/theme.mdx Co-authored-by: Philipp Spiess --- src/docs/theme.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/docs/theme.mdx b/src/docs/theme.mdx index 70dbf8b46..be18f7597 100644 --- a/src/docs/theme.mdx +++ b/src/docs/theme.mdx @@ -501,9 +501,7 @@ This happens because `var(--font-sans)` is resolved where `--font-sans` is defin ### Generating all CSS variables -By default only the 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: +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] */