Converted 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.

I updated the following tokens:

• 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

• Style
  • Refactored styling implementation across components (Header, Footer, ThemeToggle, About page, and Home page) to use standardized token-based class names instead of CSS-variable references.
  • Updated core stylesheet theme variable naming for improved consistency and maintainability.

[coderabbitai]

📝 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

Cohort / File(s)	Summary
Component Styling Updates 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	Replaced arbitrary Tailwind CSS variable references (e.g., border-[var(--line)], bg-[var(...)]) with direct token-based utility classes (border-line, bg-header-bg, text-sea-ink, hover:bg-link-bg-hover).
Page Styling Updates packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs, packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs	Replaced Tailwind color utilities from CSS-variable form to direct custom token utilities (text-[var(...)] to text-sea-ink, text-sea-ink-soft, text-lagoon-deep).
Theme CSS Refactor packages/create/src/frameworks/react/project/base/src/styles.css.ejs	Renamed all CSS custom properties from --<name> to --color-<name> pattern (e.g., --sea-ink → --color-sea-ink, --bg-base → --color-bg-base) across @theme, dark theme, and light theme blocks. Updated all stylesheet usages including gradients, borders, backgrounds, and component-level styling to reference new variable names.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 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 | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately summarizes the main change: converting CSS variables to Tailwind 4 theme variables, which is the central objective across all file modifications in this changeset.

_{✏️ 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.}