DEV Community

Agam
Agam

Posted on • Edited on

14 4

Next.js 10 with Tailwind 2; in 2 Minutes

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

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

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