Conquering the CSS Nightmare as a Backend Engineer

It's been a long time since I last wrote an article, and since this crazy time started, I hope all of you are doing well and coping with the pandemic situation.

My Journey into UI Development

I started my professional career as a full-stack engineer but mostly focused on backend development. While I used Bootstrap and some UI libraries to quickly build interfaces, I never had full control over the UI. Most people found my work impressive at the time, but deep down, I felt guilty relying on heavy libraries with limited flexibility.

If you have a good UI/UX sense, these libraries often feel restrictive. So, I attempted to learn CSS—but coming from a backend background, it was far from enjoyable. Writing CSS felt unintuitive, requiring too much effort just to name reusable classes, and yet, the results still felt unstructured.

The Struggle with CSS

Despite my love for well-designed UIs, writing CSS felt like a nightmare. Learning Vue.js or React was much easier compared to styling. Most backend engineers I knew shared the same fear—CSS seemed difficult because we rarely had to write it from scratch. Instead, we often copy-pasted components and moved on.

I spent countless hours browsing Dribbble and admiring beautiful UIs from companies like Netflix, Stripe, and Spotify, wondering if I would ever be able to create something similar. My frustration led me to tools like Adobe XD and Figma, where I enjoyed designing interfaces. But I still had one major problem: I couldn't translate those designs into code.

The Turning Point: Discovering Tailwind CSS

Fast forward a few years, and Adam Wathan introduced Tailwind CSS. As a long-time Laravel community follower, I decided to give it a shot. At first, using Tailwind felt difficult due to my limited CSS knowledge. However, its utility-first approach made styling more intuitive and enjoyable. For the first time, writing CSS felt fun!

I started implementing different designs using Tailwind, and it was a game-changer. With its content-agnostic classes, I could build UI components much faster without losing control over styling. I finally had the power of raw CSS without the usual struggles.

Cloning Websites and Mastering UI

To practice, I began cloning popular websites like Spotify, Myntra, Facebook, Hotstar, Netflix, and Amazon. This approach taught me advanced CSS concepts like animations, blending modes, and responsiveness. Thanks to Tailwind CSS, replicating UIs became an enjoyable learning experience instead of a frustrating chore.

Initially, it took me 2-3 days to clone a website. But with practice, I could recreate complex UIs in just a few hours. My fear of CSS was finally gone!

Why Tailwind CSS?

Pros:

  • Provides utility classes with full UI control.
  • Intuitive syntax that reduces cognitive load and boosts productivity.
  • Fun and easy to write.
  • Includes PurgeCSS, ensuring only used classes are included in the production build.
  • Encourages component-based thinking.
  • Well-thought-out utility classes and color palettes.
  • Fully customizable.
  • Simplifies animations, gradients, and blending modes.
  • Built-in dark mode support.
  • Just-In-Time (JIT) mode for arbitrary styles.
  • Supports presets for maintaining design consistency across projects.

Cons:

  • Results in numerous classes in your HTML.
    • However, with modern JavaScript frameworks and Blade templates, component-based structuring helps mitigate this issue.
  • Still requires fundamental CSS knowledge.
    • If you just want a quick prototype without dealing with CSS, Bootstrap or Foundation may be better options.

That said, I still recommend Tailwind CSS, even for prototyping. There are plenty of ready-made Tailwind component libraries available to speed up development while maintaining full UI control.

Useful Tailwind CSS Resources

Final Thoughts

If you're like me—someone who loves great UI but struggled with CSS—I encourage you to try Tailwind CSS. Work on sample projects, find inspiration on Dribbble, and start experimenting. It may just change the way you approach frontend development, as it did for me.