Setup tailwindcss with nextjs superfast

Sahil Rajput, Fri Mar 26 2021 • web development

Official Docs: Install Tailwind CSS with Next.js
NextJS Expample App: with-tailwincss a nextjs example in official nextjs repo.

🔽︎ Step 1: Install dependencies:

npx create-next-app my-tailwind-setup
cd my-tailwind-setup

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 

# Create a 'tailwind.config.css' file.
npx tailwindcss init -p

Do either Step 2A or Step 2B

🔽︎ Step 2 A: Open _app.js file, remove import of globals.css and add below one::

import 'tailwindcss/tailwind.css'

🔽︎ Step 2 B: Open styles/global.css file, remove import of globals.css and add below one::

@tailwind base;
@tailwind components;
@tailwind utilities;

<!-- Add other css if you want below -->
.my-claass {
  color: deeppink;
}

🔽︎ Step 3: Specify below in 'tailwind.config.css' file, for efficient tailwindcss experience::

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

🔽︎ Step 4: 🧪︎ TEST IF TAILWIND WORKS BY deleting everything in index.js file and using below code:

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>My next app with tailwindcss</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main>
        <div className='text-center text-blue-500'>justify-center and blue text.</div>
      </main>

      <footer></footer>
    </div>
  )
}

💝︎TIP: USE CTRL+K TO SEARCH THROUGHT THE DOCUMENTATION AT tailwindcss.com