Install Tailwind CSS
Install Tailwind CSS if you haven't.


#1 Install Tailwind CSS

Run in terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

#2 Configure your paths

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
    
        // Or if using `src` directory:
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    };

#3 Add the tailwind directives to your CSS file

globals.css

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

#4 Run the development server and start using Tailwind

Run in Terminal

npm run dev

page.tsx

<h1 className="font-bold underline">Goodbye world!</h1>

Done! 🎉
Nice work, you're all set!

Next Step, Tailwind CSS →