How to have tailwind work in root ./pages directory in a next.js app

Steps I took: created a new next.js project with npx create-next-app, added typescript and tailwind.css. Then I created a ./pages directory in the root of the project and added a testcss.tsx file under pages.
Also, I added the following line in tailwind.config.js:

'./pages/**/*.{js,ts,jsx,tsx,mdx}'

because by default it only has a reference to src/pages.

Here is the minimal reproducible example:
https://github.com/matheusrotta7/test-tailwind

>Solution :

You need to import the global.css file inside your pages directory, since it contains the css import for the tailwind classes.

/* inside your global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

I recommend you create a folder called styles inside your src directory so you can import it inside your app’s directories root layout.tsx file and the _app.tsx file in the pages directory like so:

import "styles/global.css";

// rest of your layout or _app file