Install Tailwind CSS

Install Tailwind CSS with Next.js

Create your project

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Install Tailwind CSS

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

Configure your template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Or if using `src` directory:
  theme: {
    extend: {},
  plugins: [],

Add the Tailwind directives to your CSS

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

Start your build process

npm run dev

Start using Tailwind

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
A product by Aceternity
Building in public at @mannupaaji