Skip to content
Tailwindest
GitHub

Next.js

Setup

Section titled “Setup”

  1. Create a new Next.js app with create-next-app:

    npx create-next-app@latest next

  2. Add Tailwind CSS to your Next.js app:

    npm install tailwindcss@latest postcss@latest autoprefixer@latest

  3. Initialize Tailwind CSS in your project:

    npx tailwindcss init -p

  4. Create a styles/globals.css file with the following content:

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

  5. Import the globals.css file in your app/layout.tsx:

    import "../styles/globals.css"

//...

  6. Follow the main Setup guide to install tailwindest and generate your tw.ts file.

There you go! You have successfully set up Tailwind CSS in your Next.js app.