Moving away from Tailwind, and learning to structure my CSS

8 hours ago

The author is migrating from Tailwind CSS to semantic HTML and vanilla CSS after using Tailwind for eight years, finding the transition fun and insightful.
Tailwind taught the author about structuring CSS with systems for resets, colors, fonts, and utilities, which they now apply in their custom CSS approach.
Key aspects of the new CSS structure include using a reset similar to Tailwind's preflight, organizing by components with unique classes, and defining color and font size variables.
Utilities and base styles are kept minimal, with a focus on consistency and avoiding interference between components.
The author is exploring new approaches for spacing, responsive design with CSS Grid (like auto-fit and grid-template-areas), and using esbuild for bundling.
Reasons for moving away from Tailwind include its increased reliance on build systems, file size issues, limitations for creative CSS, and a desire for more semantic HTML.
The author remains grateful for Tailwind's lessons and is curious about advanced CSS features like @layer, @scope, container queries, and subgrid.

Hasty Briefsbeta