2024-09-20 · Soo-yeon Kim

Plain-CSS Dashboards Without Utility Frameworks

Utility-first CSS is not wrong—but our curriculum site uses custom properties so learners see how design tokens map to components they will maintain in employers' codebases.

We document spacing, glow, and panel gradients in a single main.css file. Dark mode toggles via data-theme attributes mirror what we teach in the React integration module.

Students cloning our patterns get semantic class names—hero, panel, pulse-ring—instead of memorizing abbreviated utilities. The trade-off is more explicit CSS files, which mentors argue mirrors legacy enterprise repos common in Busan SMEs.

The approach is opinionated. Teams standardized on Tailwind may still benefit from the token naming workshop in week one.