Help on how to use tailwind global css in Next.js

[kingscode-big]

i just been battling with the use of tailwind css inside my nextjs app ,,please any clarification on how to use it

[tyriksheyh4567]

Official guide.

[rozsazoltan]

Problem

Starting from January 2025, npm install tailwindcss will install the new v4 instead of the old v3.

TailwindCSS v3

The steps described in the question are v3-related steps, so your first installation command should be:

npm install -D tailwindcss@3 postcss autoprefixer

• Install TailwindCSS v3 with Next.js - TailwindCSS v3 Docs

TailwindCSS v4

If you want to use TailwindCSS v4, there are already several similar questions, so I won't duplicate their content.

npm install tailwindcss @tailwindcss/postcss postcss

And follow other new installation steps for v4.

• Install TailwindCSS v4 with Next.js - TailwindCSS v4 Docs
• What's breaking changes from TailwindCSS v4? - StackOverflow
• Problem after "npx tailwindcss init -p" command - StackOverflow
• How to install TailwindCSS v4 with Next.js - StackOverflow (recommended for Next.js)
• How to install TailwindCSS v4 with React & Vite - StackOverflow

[rozsazoltan]

Also, next time if you don't just ask to "clarify", but actually include the specific error message, we won't have to keep guessing. Unfortunately, this way it doesn't make much sense.

Btw, the postcss.config.mjs files in the Next.js templates have been waiting for a merge for a while now, so they're not yet structured according to the standard. So yeah, just use postcss.config.mjs from TailwindCSS v4 guide. See more here:

• Invalid PostCSS Plugin found using TailwindCSS 4 and Vitest