Install Tailwind CSS.
Note: Skip this part if you've already configured it via the nextjs installation cli in the previous part.
Tailwind CSS v4 Installation
Install Dependencier
bash
1npm install tailwindcss @tailwindcss/postcss postcssAdd this line to your app/globals.css file
globals.css
1@import "tailwindcss";
2
3
4@theme inline {
5/* Configure your theme variables here */
6 --font-display: "Inter", "sans-serif";
7--color-primary-500: oklch(0.84 0.18 117.33);
8--spacing: 0.25rem;
9}You should be able to use tailwind css classes now
app/page.tsx
1export default function Home() {
2 return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
3}Now you are good to go to the next step. 👍