Tailwind — Powerful, But With Pitfalls
Tailwind CSS has rapidly gained popularity, and at Franya we switched to it over a year ago. During this time, we have made plenty of mistakes and developed practices for large projects.
Modular Architecture Instead of One Big CSS
We use @apply to create component classes and @layer for organization. This gives the best of both worlds: the speed of utilities for layout and the cleanliness of component classes.
PurgeCSS: Do Not Forget to Configure It
Without PurgeCSS, your compiled CSS can weigh 3-5 MB. With proper PurgeCSS, the final CSS shrinks to 10-30 KB.
Dark Mode: Two Approaches
We recommend the class approach — it gives users control and allows saving the preference.
Custom Design Tokens
Set up your own palette through tailwind.config.js. This makes the design consistent and allows easy brand changes.
Responsive Design: Mobile First
Tailwind uses a mobile-first approach. Start building from the smallest screen, add breakpoints gradually.
Conclusion
Tailwind CSS is an excellent tool for rapid development, but production requires discipline. Modular architecture, proper PurgeCSS, dark mode control, and custom design tokens turn utility chaos into a maintainable system.