Moving Away from Tailwind and Learning to Structure My CSS
Experiences and lessons learned from transitioning to semantic HTML and vanilla CSS.
1Starting with Tailwind
Eight years ago when I discovered Tailwind, I didn't know how to structure my CSS code. Tailwind offered order instead of chaos and helped me build many small sites. But over time, I sought a more semantic approach.
2Transition to Vanilla CSS
I've spent the last week migrating some sites from Tailwind to vanilla CSS. This process has been both fun and educational. I discovered how to apply the systems Tailwind taught me in my own CSS architecture.
3Fear of CSS Architecture
I was initially intimidated by CSS architecture. But after reading articles like 'A whole cascade of layers', I understood that every CSS codebase has different elements that need systematic management.
4What Tailwind Taught Me
I realized I could mimic Tailwind's systems like color palettes, font scales, and reset styles in my own projects. For example, using box-sizing: border-box has become an indispensable habit for me now.
5Component-Based Approach
I started organizing CSS by components. Each component has its own CSS file and unique class. This eliminates the risk of breaking other components when editing one, making code more manageable.
6Color Management
I created a central variables file for colors. All colors are defined here and components use these variables. This ensures consistency while making color changes easier to implement.
7Font Sizes
I missed Tailwind's practical classes like text-lg, but created a similar system with my own variables. Now I define font sizes in rem units using a consistent scale.
8Utility Classes
I created utility classes for styles used across multiple components. For example, I adopted Tailwind's .sr-only class for screen reader-only elements. I try to keep these classes to a minimum.
9Base Styles
I keep global base styles to a minimum. Currently only section and a tags have some base styles. I plan to move commonly used styles here over time.
10Spacing Management
I haven't yet established a definitive system for padding and margin management. I'm trying to develop a more principled approach rather than using random values like in Tailwind.
11Conclusions and Takeaways
Transitioning from Tailwind to vanilla CSS improved my CSS architecture skills. The component-based approach and creating central management systems make code more maintainable. This process helped me better understand CSS fundamentals.
Original article: Julia Evans — Tailwind'den Uzaklaşarak CSS Yapılandırmayı Öğrenmek