docs(contributing): switch the frontend CSS guidance to utilities-first (#775)

The "Vanilla CSS … no Tailwind" rule contradicted the (already-wired) Tailwind
v4 setup and the CSS→Tailwind migration plan (#772). Replace it with the
utilities-first standard: Tailwind utilities (bridged to the design tokens via
index.css @theme) for layout/spacing/typography; keep .css files only for the
hard parts (glass, keyframes, pseudo-elements, :has(), theme rules).

Required by the docs-sync rule as P0 of the migration.

Co-authored-by: mergetest <test@local>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Palash Debnath
2026-06-30 16:02:04 +05:30
committed by GitHub
co-authored by mergetest Claude Opus 4.8
parent 5c9b7ca313
commit 7cad4633dc
+1 -1
View File
@@ -159,7 +159,7 @@ class MyEngineBackend(TTSBackend):
- **Components**: Functional components with hooks
- **State**: Zustand stores in `src/stores/`, organized by slice
- **CSS**: Vanilla CSS in component-level files — no Tailwind
- **CSS**: **Utilities-first** — use Tailwind v4 utility classes (mapped to the design tokens in `src/ui/tokens.css` via the `@theme` block in `src/index.css`) for layout, spacing, and typography. Keep component-level `.css` files only for what utilities can't express cleanly: glassmorphism/`backdrop-filter`, `@keyframes`, pseudo-elements, `:has()`, and theme-specific rules. New components should not reflexively spawn a `.css` file. (Migration in progress — see `docs/css-to-tailwind-migration.md`.)
- **Naming**: `PascalCase` for components, `camelCase` for hooks and utils
### Rust (Tauri)