When tailwindCSS confuses you

Since TailwindCSS uses JIT as default, it is adding styles on demand. It is not using PurgeCSS anymore.
To make it compatible with this; in tailwind.config.js file, "purge" is changed to "content". You need to glob format like

content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}','./src/**/*.{js,ts,jsx,tsx,mdx}']

It sometimes leave you in a strange places when using external libraries

For example, I am using Sanity CMS, I have using "portabletext" library to format my text. When I pass data like

{text: "My Header", style: "h2"}

this is styling implicitly. TailwindCSS cannot understand it.

for example, you have to add this below to your "globals.css" file.

h2 {@applytext-3xl;@applyfont-bold;@applytext-red-600;@applymt-5; } 

Also, when you add a new folder, don't forget to add to tailwind.config.js
Or just put it into "src". Since you put src dir to "content", you don't have to worry about anymore.