Set up Tailwind CSS on Next.js project

Simple card by tailwindcss | Cards (tailwindcomponents.com)

This set up use:

npm/npx version v6.14.8; node version v14.15.1

It will be installed: Next.js version 10.0.3; Tailwind CSS version ^2.0.1

1. Create a Next.js project

npx create-next-app next_tailwindcss_project

2. Add necesary packages on dev dependencies

yarn add tailwindcss autoprefixer postcss postcss-preset-env -D

3. Add the postcss config file on root of the project

touch postcss.config.js

3.1 Paste the following code on postcss.config.js

// postcss.config.js
module.exports = {
  plugins: ["tailwindcss", "postcss-preset-env"],
};

4. To create the configuration Tailwind CSS file run:

npx tailwind init

This file will have the following code

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Important add this to purge because when you create the optimized build folder for your package it would throw errors like Webpack errors or Expected an opening square bracket

purge: [“./src/**/*.{js,ts,jsx,tsx}”]

So the entire file should be

module.exports = {
purge: ["./src/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

5. Within styles create the main tailwind.css file

touch styles/tailwind.css

5.1 Paste the following code to require Tailwild CSS, in styles/tailwind.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

6. Import Tailwild CSS into the initial project file pages/_app.js

import '../styles/globals.css'
import "../styles/tailwind.css";
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

7. That is, to prove copy the next code on the pages/index.js

import styles from "../styles/Home.module.css";
export default function Home() {
  return (
    <div className={styles.container}>
      <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
        <img
          className="w-full"
          src="https://tailwindcss.com/img/card-top.jpg"
          alt="Sunset in the mountains"
        />
        <div className="px-6 py-4">
          <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
          <p className="text-grey-darker text-base">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus quia, nulla! Maiores et perferendis eaque,
            exercitationem praesentium nihil.
          </p>
        </div>
        <div className="px-6 py-4">
          <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">
            #photography
          </span>
          <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">
            #travel
          </span>
          <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
            #winter
          </span>
        </div>
      </div>
    </div>
  );
}

8. Run the project

yarn dev

Tip:
Here exist a list of classes of Tailwild CSS https://nerdcave.com/tailwind-cheat-sheet but notice that it use Tailwild CSS version 1.9.6