Intro component with sign-up form

Solution retrospective
What I'm Most Proud Of I'm proud of how quickly I was able to pick up Tailwind CSS and apply it to a React project for the first time. Even without much experience, I was able to build clean, responsive layouts without getting stuck or overwhelmed.
What I Would Do Differently Next time, I would spend more time planning the component structure and styling approach before jumping into coding. I also want to get more comfortable customizing the Tailwind config file to create a more personalized design system instead of relying only on the default settings.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was understanding how to organize Tailwind utility classes within my React components without making the code look messy. At first, the long className strings felt overwhelming. I overcame this by grouping related styles together logically and using formatting tools to keep the code clean and readable. Following Tailwind's documentation closely and looking at examples also helped me understand best practices more quickly.
What specific areas of your project would you like help with?I’d like to get better at organizing and managing Tailwind classes in a way that keeps my code even cleaner and more maintainable. I’m also interested in learning how to customize the Tailwind configuration more effectively, like setting up custom colors, fonts, and reusable components. Any feedback on best practices for structuring React components with Tailwind would be really helpful too.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarziaJalili
Fantasticoo!
One tiny tip:
✅ If you ever find yourself repeating the same class names for multiple elements, you could use
@apply
to set the styles in the CSS file and then reuse it anywhere you want.✅ An example would be:
- Set the class name:
.flex-center { @apply flex flex-col justify-center items-center gap-4 }
- Apply it to whichever element you need:
<section className="flex-center">
Great job overall, keep it up!
😎😎😎
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord