Styling & CSS
Managing visual styles in next-enterprise
How is styling implemented in the boilerplate?
next-enterprise uses TailwindCSS v4 as its primary styling solution. It significantly accelerates development by allowing developers to use utility classes for common styles without writing custom CSS and jumping between loads of files or creating hundreds of wrapper components like in other CSS-in-JS libraries.
Files related to this page
This comes with various business benefits:
- Significantly reduced styling development time, facilitating efficient prototyping and iteration cycles.
- Minimized codebase footprint, resulting in lower long-term maintenance requirements.
- Enables development teams to focus on core functionality and customer value delivery without requiring extensive styling expertise.
Style and component variants
next-enterprise uses the CVA (Class Variance Authority) library to create component variants.
Other CSS-in-TS libraries like Stitches and Vanilla Extract offer type-safe UI components, but they aren't suitable for all projects. You might need more stylesheet control, want to use Tailwind CSS, or prefer writing custom CSS.
Traditional CSS variant creation is time-consuming, as it requires manual class-to-prop mapping and type definitions. CVA solves this problem by providing a type-safe method for creating component variants. This allows you to build effective design systems while maintaining the flexibility of CSS and focusing on core UI development.