Submitted 11 days ago

Blog Preview Card built with Next.js and Tailwind

#next#tailwind-css

Austin Wheeler•40

@awheelr

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of stepping out of my comfort zone and using both the Next and Tailwind frameworks for the first time. However, next time, I'd like to properly learn how to use and modify Tailwind's predefined spacing values.

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

The biggest challenge I encountered was using Tailwind 4, as there was limited information available beyond the documentation. Fonts in particular were problematic, especially when trying to integrate Next's implementation with Tailwind. In the end, I decided not to use Next at all for fonts and instead relied on Tailwind and its custom utilities.

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

I would appreciate some feedback on how to properly utilize Tailwind's design system when working with a specific design like this. I'm unsure whether it's common to use Tailwind's predefined spacing values and get as close as possible to the design or to create my own custom spacing values.

Community feedback

qadzek•560

@qadzekPosted 9 days ago

I like the extra cards a lot!

I would recommend to limit using all these custom values and use e.g. p-6 instead of p-[24px].

To set the colors, I used @theme { --color-cust-yellow: hsl(47, 88%, 63%); } in globals.css and e.g. <p className="bg-cust-yellow">.

For the fonts, I used:

import { Figtree } from 'next/font/google';

const figtree = Figtree({
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="">
      <body
        className={`${figtree.className} antialiased `}
      >
        {children}
      </body>
    </html>
  );
}

Marked as helpful

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