Skip to content
Submitted 11 days ago

Mobile-first design with Tailwind CSS

KoalaChang•70
@KoalaChang
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I use Tailwind CSS in this project for the first time, though I'm still not familiar with the workflow and the way to use it, I can tell that it would be easier to build consistent styles and layouts with Tailwind.

I would like to combine Tailwind and React, and see how components can work efficiently with these two frameworks.

What challenges did you encounter, and how did you overcome them?

The transformation from original CSS properties to Tailwind CSS needs some time to get familiar with.

What specific areas of your project would you like help with?

I would like to know the workflow of Tailwind with React, how do people start the project? Do they start with the html tags and then separate it into different components, or just simply start from the top of the webpage and make the components once encounter them?

Community feedback

  • Esteban•670
    @evertznerPosted 11 days ago

    Hi, nice job!

    What i do with tailwind/react projects is that first i create the components that I know I will use, let's say Main.tsx, Card.tsx and Button.tsx. Then inside each component I write the html and dummy content that I need (for example, using Lorem Ipsum text). Then after having all the content I need, I start with the tailwind implementation. Most of the times, I go from general to specific, in this case I do first Main then Card and last Button. After finish this or in the meantime I also take a look if there is something that can be converted into another component. For example, let's say that inside Card I have a list of items, well in that case I move out the list and create a component call Items.

    Hope it helps somehow

    Marked as helpful
    0
    KoalaChang•70
    @KoalaChangPosted 11 days ago

    @evertzner Thank you for sharing your experience, this is exactly what I need! 🥹

    1

Please log in to post a comment

Log in with GitHub

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