Convert CSS variables to Tailwind 4 theme variables

[maurer2]

Hello,
when scaffolding a router project, the generated React app uses JSX with the older arbitrary value syntax of Tailwind for CSS variables in the templates. Tailwind 4 provides a simpler approach via theme variables defined in @theme, which can also be used directly in JSX when correctly namespaced (e.g. color- for colours, spacing- for margin and padding etc.). This approach is more concise and looks arguable cleaner.

To enable this, the colour variables in styles.css.ejs were moved from :root into the @theme block and prefixed with --color- (e.g. --sea-ink → --color-sea-ink), so Tailwind 4 picks them up as utility classes. The dark-mode overrides (:root[data-theme="dark"] and @media (prefers-color-scheme: dark)) and all var(--…) references in the file were updated to match.

After the renaming, the following classes in the markup were updated:

• border-[var(--line)] → border-line
• text-[var(--sea-ink)] → text-sea-ink
• text-[var(--sea-ink-soft)] → text-sea-ink-soft
• bg-[var(--header-bg)] → bg-header-bg
• border-[var(--chip-line)] → border-chip-line
• bg-[var(--chip-bg)] → bg-chip-bg
• hover:bg-[var(--link-bg-hover)] → hover:bg-link-bg-hover
• text-[var(--lagoon-deep)] → text-lagoon-deep

Cheers

Summary by CodeRabbit

Summary by CodeRabbit

• Style
  • Updated the app template’s Header, Footer, Theme Toggle, and key pages to use standardized token-based styling classes instead of CSS-variable-based Tailwind values.
  • Revised the theme stylesheet to rename and consolidate color variables under a consistent --color-* scheme, improving consistency across light/dark styling and component visuals.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7080d69a-c7f3-4cf0-a6b5-dba730838510

📥 Commits

Reviewing files that changed from the base of the PR and between e3c19f1 and b590a29.

📒 Files selected for processing (6)

• packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/styles.css.ejs

✅ Files skipped from review due to trivial changes (3)

• packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs

🚧 Files skipped from review as they are similar to previous changes (3)

• packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs
• packages/create/src/frameworks/react/project/base/src/styles.css.ejs

---

📝 Walkthrough

Walkthrough

The changes implement a systematic refactor of CSS custom property naming conventions and Tailwind styling patterns. All CSS theme variables are renamed from --<name> to --color-<name> format in the stylesheet, and component templates are updated to use direct token-based Tailwind utility classes instead of arbitrary CSS variable references.

Changes

CSS Theme Variable and Tailwind Token Refactor

Layer / File(s)	Summary
CSS theme variable definitions packages/create/src/frameworks/react/project/base/src/styles.css.ejs	All CSS custom properties in @theme and dark theme blocks are renamed from --<name> to --color-<name> format (e.g., --sea-ink → --color-sea-ink, --bg-base → --color-bg-base). The standalone light-theme :root block is removed in favor of @theme defaults.
Stylesheet variable references packages/create/src/frameworks/react/project/base/src/styles.css.ejs	All usages throughout the stylesheet are updated to reference the new --color-* variables in body styling, gradients, borders, backgrounds, component rules, hover states, and interactive elements such as buttons, inputs, tables, and navigation.
Component and page template styling packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs, packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs, packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs, packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs, packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs	All component templates replace arbitrary Tailwind CSS variable references (e.g., border-[var(--line)], bg-[var(--header-bg)], text-[var(--sea-ink)]) with direct token-based utility classes (border-line, bg-header-bg, text-sea-ink, hover:bg-link-bg-hover, text-sea-ink-soft, text-lagoon-deep).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hop along, the colors dance anew,
From --sea-ink to --color-blue,
Each token named with clarity bright,
The stylesheet glows with organized might!
Tailwind utilities, now clean and true,
A refactor complete, a --color debut! 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: converting CSS variables to Tailwind 4 theme variables, which is the primary objective across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}