Who’s Afraid of Tailwind?

Inspiration

As developers and designers, we often find that learning new tools can be a tedious process. We wanted to make learning Tailwind CSS an engaging and interactive experience. The idea for Who’s Afraid of Tailwind? was inspired by the world of abstract art!

We thought: What if users could learn Tailwind by recreating famous abstract artworks using only CSS classes? This would not only help users practice layout techniques like flexbox, grid, and alignment but also introduce them to art history in a fun and gamified way.

What We Learned

Building this project taught us a lot about:

Tailwind CSS: Deepening our understanding of utility classes, responsive design, and best practices.
Comparing Rendered Images: Developing a way to analyze and score how closely a user’s recreation matches the reference artwork.
Gamification in Education: Understanding how to make learning engaging and rewarding.
Optimizing User Experience: Ensuring a smooth workflow for users to build and refine their artwork using Tailwind classes.

How We Built It

We developed the web application using the following technologies:

React & TypeScript – For building the interactive UI.
Tailwind CSS – The core technology that powers the styling.
Next.js & Vercel – For seamless deployment and performance optimization.

Challenges We Faced

One of the biggest challenges was comparing the outputted image to the reference image and calculating the percentage match.

The Final Experience

Users are presented with a famous abstract artwork. They attempt to recreate the piece using Tailwind classes. Multiple valid solutions are accepted as long as the final output closely matches the original. This approach allows for creative problem-solving while reinforcing Tailwind principles.

With Who’s Afraid of Tailwind?, we hope to make learning CSS fun, artistic, and interactive—bridging the gap between technology and creativity.