About Next.js and Tailwind CSS đŸ”„

First impressions using Next.js, Tailwind CSS, and Framer Motion after three months.

English

Hello hello, it’s been a week since my previous post Multiple Reactions Feature.

This time I won’t talk about a new feature, but rather how it felt using Next.js, Tailwind CSS, and Framer Motion for about three months.

Yep, three months. I used all these technologies for the first time while building this website starting around October 23, 2022.

It all started from this Tweet.

This is just my experience based on how it felt. I’m not comparing against similar stacks since I haven’t used others much hehe.

Let’s dive in


Next.js

Previously when building React websites I used CRA, and I only used Next.js for this site.

Honestly, using Next.js feels great. All the important features —that I need— are already provided, the DX is excellent, docs are complete, and tutorials are to the point.

The coolest part is support for SSG and SSR. Here are a few features I like:

Routing

This is crucial. Routing is supported out-of-the-box. Creating dynamic pages like a blog is super easy.

And my favorite is API Routes. Creating an API endpoint is straightforward—no need to set up Express separately.

MDX Support

It’s very easy to implement Markdown or MDX for blogging using @next/mdx.

You can also use it for regular pages, which is great for content-heavy pages in MDX format.

Optimization

Fonts and images are already optimized by Next.js.

For Google Fonts, just import from the @next/font package. For images, compression and srcset are supported automatically.

What’s not to like?

There are lots of other small features too, like fast compiling, i18n routing, static HTML export, etc.

Take a look at the docs or just try it out.

Tailwind CSS

Take a look at this sample code (from the official site tailwindcss.com) styled with Tailwind CSS:

<figure class="p-8 rounded-xl bg-slate-100 md:flex md:p-0 dark:bg-slate-800">
  <img
    class="w-24 h-24 mx-auto rounded-full md:h-auto md:w-48 md:rounded-none"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="pt-6 space-y-4 text-center md:p-8 md:text-left">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
HTML
UTF-8

At first I thought:

why is this styling approach odd? the HTML looks messy; why not just use inline styles?

I had lots of doubts 😂

But since I got a freelance project using Tailwind CSS, I had to use it.

Turns out, Tailwind CSS is actually nice to use. I tried it and applied it while building this site.

What’s nice about it?

  • No need to switch files for styling

    Markup and styles are in the same place. No need to open a CSS file, decide on class names, search for which class to edit, etc.

    Since styles live in the HTML, creating or updating components is quick and easy.

    Just open the file, edit the content and styles in the same place đŸ”„


  • Different from inline styles

    My initial assumption was wrong; it’s different from inline styles. With Tailwind CSS, you can style states like hover, focus, etc. directly in HTML.


  • Full CSS support

    Almost all CSS features are covered by Tailwind CSS: gradients, backdrop filters, grid, responsive design (breakpoints), etc.

    Doesn’t that mean more utility classes?

    Yes! But with VS Code, it’s actually convenient because there’s an extension that autocompletes Tailwind utility classes while editing HTML.


  • Shorthand Utilities

    You can use the inset-0 class for CSS output like:

    .inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

    There are many others like x and y shorthands for left+right and top+bottom, e.g., inset-x-0, px-2, border-y-0, etc.


  • Dark mode support

    Tailwind CSS provides a dark: variant for dark mode styling.

    For example:

    <div class="text-black dark:text-white">Hello, World!</div>

    The text will be black by default and white in dark mode.


  • Small CSS output size

    Tailwind bundles only the utilities you use, so the output is small depending on how many utilities are used.


Any downsides? Of course.

  • Long class names

    This was quite a topic on Twitter 😂 I work around it using clsx() to tidy things up a bit. Example:

    <nav
  className={clsx(
    'border-divider-light rounded-xl border bg-white',
    'dark:border-divider-dark dark:bg-slate-900'
  )}
></nav>
    TypeScript React
    UTF-8

  • Heavier HTML

    Even though CSS output is small, the HTML can get heavier. Long class names increase HTML size.

    There are workarounds—go back to the old way. When classes get too many, especially in repeated elements (loops), use a regular CSS class.

    For example:

    <div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Home
</div>
<div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Projects
</div>
<div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Blog
</div>
    HTML
    UTF-8

    I changed it to:

    <div class="nav-link">Home</div>
<div class="nav-link">Projects</div>
<div class="nav-link">Blog</div>
    HTML
    UTF-8

    This helps reduce the HTML load.

Framer Motion

About animations. I don’t use it for complex animations—just the basics like fade-in/fade-out.

This is new for me: creating animations with JavaScript. I used to do animations only with CSS.

How does it feel? Great. The results are smooth. Since it’s JavaScript, it’s easy to trigger animations on certain events.

For example: onClick, onScroll, when a component first renders, or when an element becomes visible in the viewport.

Bonus Point

  1. Vercel

    Previously I only used GitHub Pages for hosting static pages (with CRA). Now I use Vercel for hosting my Next.js project.

    Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

    — vercel.com/

    The deployment setup is simple and fast, with staging features like development or preview mode (so it doesn’t deploy straight to production), and of course there’s a free tier.

    Recommended hosting for Next.js projects—well, Next.js is made by Vercel 😂

Summary

I’ve really enjoyed using Next.js, Tailwind CSS, and Framer Motion. The developer experience is great, easy to use, with well-structured docs.

Even though I’m fairly new to them, I think this stack will be my first choice when creating a website.

That’s all for now—take care and see you next week 👋

Posted onstorywith tags:
#next#tailwindcss#framer-motion
0
0
0
0