ServerKit/frontend/src/lib/utils.js at fd4795a376ce439b2ee3f977ee834fc156b2300d - ServerKit - earlgroup GitHub

admin/ServerKit

0 Fork 0

mirror of https://github.com/jhd3197/ServerKit.git synced 2026-11-09 05:24:49 +09:00

Files

T

Juan DenisandClaude Opus 4.8 e24f834ada refactor(frontend): Phase 2 — remove Tailwind, standardize on the SCSS design system

Per docs/plans/FRONTEND_UX_TAILWIND_CLEANUP_PLAN.md Phase 2. Removes the Tailwind
CSS v4 dependency entirely; the internal SCSS design system is now the single
styling source (aligns with AGENTS.md / project policy).

Build wiring:
- Remove @tailwindcss/vite plugin from vite.config.js.
- Drop tailwindcss, @tailwindcss/vite, tailwind-merge, tailwindcss-animate from
  package.json (+ lockfile).
- Delete src/globals.css and its import in main.jsx. --radius was already
  redefined in _theme-variables.scss (loaded after globals), so nothing breaks;
  repointed the 3 var(--color-primary) refs in _wordpress-pipeline.scss to
  var(--accent-primary). Font stack now resolves to IBM Plex (SCSS) — the
  Inter/JetBrains globals.css vars were unused.
- lib/utils.js: cn() now uses clsx only (no tailwind-merge).

Primitives (components/ui/*) converted to SCSS-only classes (.ui-*):
- dropdown-menu.jsx, command.jsx → new .ui-dropdown-* / .ui-command-* classes.
- skeleton.jsx → .ui-skeleton; popover.jsx → .ui-popover-panel.
- dialog/alert-dialog/select/sheet → dropped the tailwindcss-animate veneer;
  enter/exit animation now handled by SCSS [data-state] keyframes in _ui.scss.
- alert-dialog AlertDialogAction gained a `variant` prop so non-danger confirms
  keep their primary (not destructive) button.
- Modal.jsx → .sk-modal*; ConfirmDialog.jsx → .sk-confirm* (icon containers,
  colors via theme tokens, layout) — the two heaviest raw-Tailwind components.

SCSS:
- _utilities.scss: extended the existing shim with a "Tailwind-removal
  compatibility" layer covering every remaining utility class still referenced
  in pages/components (positioning, sizing, spacing, semantic colors mapped to
  theme tokens, sr-only, the handful of sm:/lg:/hover: variants actually used).
- _ui.scss: .ui-dropdown-*, .ui-command-*, .ui-skeleton, .ui-popover-panel,
  .sk-modal*, .sk-confirm*, and [data-state] enter/exit animations.

Verified:
- npm run build passes; CSS shrank ~16kB (Tailwind utility layer gone).
- Completeness audit (scratchpad script): 0 un-styled Tailwind tokens remain
  (only SCSS-nested BEM false positives).
- Visual smoke test (screenshots skill, mock data): dashboard / docker / servers
  render correctly with full theming.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-24 02:08:03 -04:00

9 lines

279 B

JavaScript

Raw Blame History

 import { clsx } from 'clsx';
 // Join class names. With Tailwind removed there are no conflicting utility
 // classes to dedupe, so plain clsx (truthy-aware join) is sufficient — we no
 // longer depend on tailwind-merge.
 export function cn(...inputs) {
   return clsx(inputs);
 }