DEV Community

Agam
Agam

Posted on • Edited on

Next.js 10 with Tailwind 2; in 2 Minutes

#nextjs #tailwindcss #tailwind2 #nextjs10

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

No BS, let's get right to it.

Create a new Next.js project

npx create-next-app <your-app-name>
Now cd to your project cd <your-app-name>

Install dependencies 

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Configure tailwind

Then npx tailwind init
Now let's import the tailwind css, delete all styles in styles and create: styles/tailwind.css with the contents:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

PostCSS

Create postcss.config.js file (next.js uses it automatically).

module.exports = {
    plugins: ['tailwindcss'],
}
Enter fullscreen mode Exit fullscreen mode

Override the default styling

Replace import '../styles/globals.css' in pages/_app.js with: import '../styles/tailwind.css';

Add a test

Let's rewrite pages/index.js

import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex justify-center">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="mt-4 p-4 w-1/4 rounded bg-blue-300 text-center">
        <p className="text-blue-600">This should be very blue.</p>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Run

yarn dev and go to: localhost:3000

Result

Result in browser

Top comments (6)

Collapse
 
juliengros profile image
Julien Gros •

I just tried --example -with-tailwindcss but did not manage due to postcss dependencies errors.

 
agamm profile image
Agam •

Thanks for the input! I hope it also helps others.

Collapse
 
agamm profile image
Agam •

What config would you add?
Something like:

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ],
Enter fullscreen mode Exit fullscreen mode


?

 
juliengros profile image
Julien Gros •

Thx Théophile. I got it working.

 
kjs3 profile image
Kenny Smith •

It's a great way to organize code. nextjs.org/docs/advanced-features/...

Collapse
 
agamm profile image
Agam •

Thanks! I wanted a clean slate :)

Read next

aninooo profile image

Tailwind CSS Cheatsheet

Bryan N. Lomerio -

mike_andreuzza profile image

Learn how to create an animated profile card with Tailwind CSS

Michael Andreuzza -

sholajegede profile image

Part 1: Master Authentication and Role-Based Access Control (RBAC) with Kinde and Convex in a File-Sharing Application

Shola Jegede -

0x3d_site profile image

Programming Tips and Tricks Across Elixir, Clojure, and Nim

0x3d Site -