Skip to content
Submitted almost 3 years ago

NFT-preview-card with NextJS and Tailwind

Volodymyr Balashov•510
@volod-one
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there! Today I decided to take a try with NextJS and Tailwind. I finished this challenge several days ago and today wanted to try something new. Woah, Tailwind. Pretty messy. I don't like it. But, I'll give you a chance. I see potential if we need to work with some JS-framework. Components are separated and you don't see this messy code. But in something simple where is your html in one file.. Well, I want to stab my eyes with a fork. Anyways. This is my acquaintance with Tailwind and NextJS. It feels good. I want more.

Please, give your opinion. Your feedback is really important for me in this challenge especially for my first try these things.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Volodymyr,

    Great job!

    I also used Tailwind to create this card and I think it is very convenient but sometimes in the elements that require a lot of classes the html becomes too long and confusing.

    Are you of the same idea?

    0
    Volodymyr Balashov•510
    @volod-onePosted almost 3 years ago

    @denielden Thank you.

    I think it is obviously not a really good idea to use Tailwind for something small. Really really messy code as result even if you make something really simple like that. Also it is not necessary to use Tailwind for some landing pages. Time which you will spend on maintaining things not worth it. But if we will talk about some large-scale projects, well, maybe it is a good thing to look at Tailwind as your main styling system. As I mentioned above, Tailwind may be a great tool for JS-frameworks. Tiny components will create a lot of tiny css files. Instead of this, IMHO, better to set up your environment and use Tailwind. Components are separated and you don't see this mess in your code(exception for browser dev tool).

    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