Adding TailwindCSS to NextJS Project

Take a look on how I setup my NextJS Project Here

What i usually do when configuring TailwindCSS for styling in NextJS is just following basic setup in the official documentaion, and add some customization to make my workflow more seamless

1. Install Dependencies & Add Basic Configuration

TailwindCSS depends on some dependencies that we also need to be installed

Make sure you have yarn installed

• Add Dependencies

yarn add -D tailwindcss postcss autoprefixer

• Generate tailwind.config.js

npx tailwindcss init -p

• Configure tailwind.config.js

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

Since TailwindCSS Version 3 content section is required, we need to tell tailwind where are the files that tailwind will be read on Just In Time. For further explanation you can check in the official docs here

2. Add Tailwind Directives

To apply tailwind to our project. We need to add tailwind directives to our globals.css file. and make sure to import the file in the _app.tsx file

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

3. Test

Now, everything should work as expected and we are good to go

In the main page index.tsx add some html with tailwind classname

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return <div className="text-red-400">Hello World</div>
}

export default Home

That's it. There should be a red 400 text appear in the screen.