Skip to content
Submitted over 1 year ago

Responsive Preview Card using Next.js and TailwindCSS

CamronWithrow•120
@CamronWithrow
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This project was my first time using React, Next, and Tailwind... so a lot of new tooling and ideas.

In particular, I'm unsure about best practices when using Tailwind and custom colors that aren't really part of the app's theming (here, the background colors of the cards). I extended the colors from tailwindconfig.js, but I'm interested in hearing if there is a more correct way to handle this.

I'm also interested in general tips using React and/or Next.

Community feedback

  • Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    Hi 👋,

    good job on completing your challenge.

    I've used tailwind on a few side projects and I usually extend the colors in the tailwindconfig.json as well; whether thats the best practice or not idk but I did the same if it helps 😅

    this is a question for YOU - did you like working with Next.js? I've never used it - I've tinkered with React and like Gatsby but I've heard a lot of nice things about Next.js that make me interested.

    Once again, good job with your solution. I think everything is spot on and good job

    Marked as helpful
    1
    CamronWithrow•120
    @CamronWithrowPosted over 1 year ago

    Thanks! I liked working with Next.js, it felt quite easy to use and the documentation is quite good. I don't have any experience with Gatsby, so I can't really compare them, but I definitely plan to continue working with Next for a while.

    Thanks again!

    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