How to add Tailwind CSS in Next JS?

Hey, If you are looking for a CSS framework for you new Next.js Application, you should definitely take a look at Tailwind CSS.

What is Tailwind CSS ?

Tailwind is a powerful utility based CSS framework. Tailwind provides you a lot of CSS classes that you can use to build any of your designs. Developers love tailwind due to the Flexibility and Customization that the prewritten classes provide.

Here’s an example of creating a heading using Tailwind.

<div className="pt-32 text-sky-500 bg-slate-800 h-screen text-center">
      <h1 className="text-5xl">Hey! How are you?</h1>
</div>

The result should be something like this!

Setting up Tailwind in Next JS

Ok, so lets start by creating a fresh Next.js project.

npx create-next-app tailwindnext
cd tailwindnext

Once you create your new project you need to add Tailwind CSS using NPM. But before that you would need its peer dependencies like POSTCSS and AutoPrefixer. So lets add all the dependencies together.

npm install -D tailwindcss postcss autoprefixer

As all the dependencies are Dev Dependencies we use the -D flag.

Now we need to generate the config files. For that we will run this command.

npx tailwind init -p

This command will generate tailwind.config.js and postcss.config.js files. Once done add the following code in your tailwind.config.js file. We are configuring the template paths. We are mentioning pages and components here in the array.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And the last step, adding @tailwind directives to your global.css file. Move into ./styles/global.css and add the following code. This adds Tailwind CSS to your Global CSS.

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

And before we start our project lets check if Tailwind is properly installed. Remove all the code from your index.js page and add the following code.

export default function Home() {
  return (
    <div className='pt-6'>
      <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-gray-100 my-3 p-4 mx-auto ">
        <h1>Hello World</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
  );
}

The result should be something like this.

Go to localhost:3000 in your browser and check if the result is as shown above. If not check if you have imported global.css in you _app.js file.

Good Luck, and make something awesome using Tailwind!

I regularly post Web Development and Programming related content on Twitter. If you are interested do consider following me there. Thanks!! 😄