DEV Community

loading...

Next.js 10 with Tailwind 2; in 2 Minutes

Agam
Just another Developer that likes to write less but make more.
Updated on ・1 min read

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

Discussion (12)

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 Author

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

Collapse
agamm profile image
Agam Author

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 Author

Thanks! I wanted a clean slate :)