Return to Home
Doruk's picture

Doruk

Likes to build anything. That can be LEGO or... SOFTWARE!

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.