Submitted over 1 year ago

Responsive Preview Card using Next.js and TailwindCSS

CamronWithrow• 120

@CamronWithrow

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

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

@peanutbutterjlly

Posted 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

CamronWithrow• 120

@CamronWithrow

Posted 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!

Please log in to post a comment

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