Installing Tailwind CSS in Nextjs Project

2023-02-05Code Snippet to install Tailwind CSS in Nextjs Project

Step 1: Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

Step 2: Create Tailwind CSS Configuration File

npx tailwindcss init -p

Step 4: Add the paths to all of your template files in your

tailwind.config.js

module.exports = {
  content: [
    // If using experimental app directory:
    './app/**/*.{js,ts,jsx,tsx}',

    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
};

Add the Tailwind CSS Directives to your global CSS file

styles/globals.css

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

https://tailwindcss.com/docs/guides/nextjs