DEV Community

Agam
Agam

Posted on • Edited on

14 4

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

profile
Docusign Developers
 Promoted

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

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 :)

profile
Pieces.app
 Promoted

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Read next

rivkaavraham profile image

Nextjs Strapi

Rivka -

rivkaavraham profile image

Nextjs headless wordpress

Rivka -

lior_amsalem_3879371237f6 profile image

Heroku nextjs

Lior Amsalem -

ahmad_tibibi profile image

this is next js vite

Ahmad Tibibi -