How to use Tailwind CSS in Next.js

Last updated on June 6, 2022 Napoleon Loading... One comment

This succinct article shows you how to integrate TailwindCSS in Next.js.

A Quick Introduction

TailwindCSS is a popular CSS framework that can help you create nice user interfaces quickly with pre-made CSS classes.

Unlike MUI, Ant Design, or Bootstrap, TailwindCSS only provides CSS rules. It doesn’t ship any Javascript functionality as well as any React components. Therefore, there is no need to worry about problems related to server-side rendering.

TailwindCSS is highly customizable, and you can custom all of its variables to make them match your wish. The framework is also highly optimized because it comprises many CSS classes, but it can prune the unused ones at build time, reducing the final bundle size as unused CSS classes get removed.

Integrating TailwindCSS in Next.js

Below are the steps to setup TailwindCSS in Next.js:

1. Initialize a brand new Next.js project:

npx create-next-app kindacode-example

The name is totally up to you.

2. In the project directory, run the following command to install all required dependencies:

npm i -D tailwindcss postcss autoprefixer

3. Now, we have all dependencies installed. The next move is to create configuration files (tailwind.config.js and postcss.config.js) by executing the following command:

npx tailwindcss init -p

4. Open tailwind.config.js and add paths to your Next.js pages or components:

module.exports = {
  content: [
    // add this lines
    "./pages/**/*.{js,ts,jsx,tsx}",
    // if you have other folder, add its path too, like this:
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Import TailwindCSS into your pages/_app.js file:

import '../styles/globals.css'
import 'tailwindcss/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

6. To verify that everything will work as expected, replace all of the default code in pages/index.js with the following:

export default function Home() {
  return (
    <div className="py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:text-center">
          <h2 className="text-base text-red-500 font-semibold">Good Morning</h2>
          <p className="mt-2 text-blue-800 text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">Welcome to KindaCode.com</p>
        </div>

        <div className="mt-10 space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
          <div
            className="bg-amber-500 cursor-pointer text-white p-4 rounded-md text-center shadow-xl">
            <div className="mt-2 font-bold">John Doe</div>
            <div className="font-light">Some description</div>
          </div>

          <div
            className="bg-red-500 cursor-pointer text-white p-4 rounded-md text-center shadow-xl">
            <div className="mt-2 font-bold">John Doe</div>
            <div className="font-light">Some description</div>
          </div>

          <div
            className="bg-green-500 cursor-pointer text-white p-4 rounded-md text-center shadow-xl">
            <div className="mt-2 font-bold">John Doe</div>
            <div className="font-light">Some description</div>
          </div>

          <div
            className="bg-purple-500 cursor-pointer text-white p-4 rounded-md text-center shadow-xl">
            <div className="mt-2 font-bold">John Doe</div>
            <div className="font-light">Some description</div>
          </div>
        </div>


      </div>
    </div>
  )
}

7. Get your project up and running:

npm run dev

Then go to http://localhost:3000, and you should get a result as below:

Conclusion

We successfully integrated TailwindCSS into a Next.js project and created a simple but good-looking UI. We didn’t write even a single line of CSS code. That’s so amazing.

If you’d like to explore more about Next.js and modern React, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
lol
lol
2 months ago

Thank you! They didn’t show the part about importing it in the Tailwind docs…

Related Articles