Skip to content
Submitted over 2 years ago

Tailwind, React

Henry Zheng•420
@LonelyBuddy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Suite landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

In this challenge:

  • I used the CSS clamp function for the first time and the effect is amazing.
  • I learned so much about tailwind, but I feel I like Sass more? Maybe I just need to get used to using tailwind.
  • I practiced making reusable components like the Button and Logo components.
  • I also split up the big components into many small components.

Community feedback

  • Wendy•1,990
    @wendyhamelPosted over 2 years ago

    @LonelyBuddy Cool effect with clamp! I think i would have solved that with an SVG.

    I noticed you used a lot of 'custom' classes in your project. The power of Tailwind.css lies primarily in the utility classes. For example: you use text-[18px] a few times in your project. You could specify a text-.. class name in the tailwind config and use that in your project. That way, if you decide to make it 1rem instead of 18px, you can do this in one place and have it changed in your whole project without having to find and replace all instances.

    I like tailwind a lot. I work a lot faster and I don't waste time thinking of names for my classes!

    Have fun coding!

    Marked as helpful
    1
    Henry Zheng•420
    @LonelyBuddyPosted over 2 years ago

    @wendyhamel Thanks, Wendy! WOW, I didn't know you could solve that with SVG! I'm going Learn how to make SVG myself.

    0

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