DEV Community

Cover image for Setting up Next.js with Tailwind CSS
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Setting up Next.js with Tailwind CSS

I've recently had some fun playing around with Next.js but never really documented any of my learnings.

So let's go back to the basics and set up a basic Next.js application that uses Tailwind.css!

Setting up Next.js

First of all, let's set up Next.js, which is easy as we need to have node.js installed.

Then run the following command in your terminal.

npx create-next-app
Enter fullscreen mode Exit fullscreen mode

Follow the steps it prompts.

If you want to start with a Typescript version, use the following command.

npx create-next-app --ts
Enter fullscreen mode Exit fullscreen mode

By now, we already have half the work done and a basic Next.js app is running. We can see it in action by running: npm run dev.

Basic Next.js application

Adding Tailwind CSS to a Next.js application

However, let's not stop there and add Tailwind CSS to the mix. Tailwind is so easy for basic styling and can help us get started quickly.

To installed Tailwind in our Next.js app, we first need to install the dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Then let's add our config files by running:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

This creates a tailwind.config.js file as well as a posts.config.js file.

Open up the tailwind.config.js file and the purge for our Next.js files.

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
Enter fullscreen mode Exit fullscreen mode

You can also enable Tailwind JIT mode if you like.

mode: 'jit',
Enter fullscreen mode Exit fullscreen mode

Then we simply have to add our Tailwind base styles to our styles/globals.css file.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode

And let's add a basic card template in our pages/index.js file:

<div className="flex min-h-screen justify-center items-center">
  <head>
    <title>Create Next App</title>
    <meta name="description" content="Generated by create next app" />
    <link rel="icon" href="/favicon.ico" />
  </head>

  <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
    <img
      className="w-full"
      src="https://tailwindcss.com/img/card-top.jpg"
      alt="Sunset in the mountains"
    />
    <div className="px-6 py-4">
      <div className="font-bold text-xl mb-2">Next + Tailwind ❤️</div>
      <p className="text-grey-darker text-base">
        Next and Tailwind CSS are a match made in heaven, check out this article on how
        you can combine these two for your next app.
      </p>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

If you now re-run the application, we should see a card like this show up in the browser.

Next.js and Tailwind working

Are you interested in seeing the complete code? You can view it on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (5)

Collapse
zwacky profile image
Simon Wicki

JIT mode

even after reading 2 articles I still don't know why I should want this 🤔

Collapse
dailydevtips1 profile image
Chris Bongers Author

If you never needed custom CSS in a Tailwind application you needed JIT.
If you are fine with all the classes from Tailwind and don't need custom add-ons you are fine not using it.

It's just a quicker way to add custom CSS for a single component.

Collapse
zwacky profile image
Simon Wicki • Edited on

Thanks for the nice explanation! JIT then looks like a lot of win to me.
I hope all the kinks get ironed out so it's not a seperate library anymore. Just saw that it's part of the core repo since v2.1 💪

Collapse
madza profile image
Madza • Edited on

Could use this if I decide to try Tailwind 😉 Is it your default styling solution by now? 👀

Collapse
dailydevtips1 profile image
Chris Bongers Author

It actually is yes!
I find Tailwind so helpful, and don't get me wrong I could do all this with Vanilla CSS, but I prefer the speed that tailwind brings.