I'm most happy how there are multiple tools available to help tailwind ranging from cheat-sheets visual code generators. For example I used Tailwind Shadow Generator to generate the code below while i struggled with creating the shadow for this challenge.
shadow-[10px_10px_0px_0px_#000000]
From the above, i was able learn that i can easy define a shadow by just adding the shadow css code in []. (I was also using custom css class, before i found the Shadow Generator Tool).
I also learned the importance of Tailwind’s mobile-first approach to responsive design. Once I understood how to correctly order utility classes like max-w-xs sm:max-w-sm, my layout behaved as expected across screen sizes.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was getting responsive layout behavior right using Tailwind's utility classes. Initially, I applied sm:max-w-xs max-w-sm, thinking it would shrink on smaller screens — but the layout behaved unexpectedly. After researching Tailwind’s mobile-first design approach, I realized that unprefixed classes apply to all screen sizes, and prefixed ones override them from the specified breakpoint upwards. Reordering the classes to max-w-xs sm:max-w-sm fixed the issue.
Also as I mentioned before, another challenge was implementing a custom drop shadow with specific offsets and color. Tailwind’s default shadow-* utilities didn’t offer the precision I needed. I solved this by using the Tailwind Shadow Generator, which helped me visualize and generate the exact shadow values like:
shadow-[10px_10px_0px_0px_#000000]
These challenges helped me better understand how to use Tailwind's advanced features while staying within its utility-first philosophy.
