Can't use tailwind with next.js in sub folders - css

Question

I have a project using next.js and tailwind v2.2. When I installed tailwind and imported to _app.tsx, everything was ok and it works in _app.tsx and components which is in components folder. But when I try to use tailwind custom classes in sub folder of components folder, It doesn't work!
For example it works in footer.tsx component but doesn't work in files that are indexComponents (Picture below)
tailwind.confing.js:
// tailwind.config.js
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}','./components/indexComponents/*.{js,ts,jsx,tsx}'] ,
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
// blue-mode
// "color-50": "#eff6ff",
// "color-100": "#dbeafe",
// "color-200": "#bfdbfe",
// "color-300": "#93c5fd",
// "color-400": "#60a5fa",
// "color-500": "#3b82f6",
// "color-600": "#2563eb",
// "color-650": "#086ad8",
// "color-700": "#1d4ed8",
// "color-800": "#1e40af",
// "color-900": "#1e3a8a",
// purple mode
"color-50": "#faf5ff",
"color-100": "#f3e8ff",
"color-200": "#e9d5ff",
"color-300": "#d8b4fe",
"color-400": "#c084fc",
"color-500": "#a855f7",
"color-600": "#9333ea",
"color-650": "#9333ea",
"color-700": "#7e22ce",
"color-800": "#6b21a8",
"color-900": "#581c87"
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1200px",
"2xl": "1200px"
},
container: {
center: true,
padding: "1rem"
},
fontFamily: {
heading: ["Poppins, sans-serif"],
body: ["Montserrat, sans-serif"]
},
boxShadow: {
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
DEFAULT: "0px 2px 4px rgba(148, 163, 184, 0.05), 0px 6px 24px rgba(235, 238, 251, 0.4)",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
"3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
none: "none"
},
fontSize: {
xs: ".75rem",
sm: ".875rem",
tiny: ".875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": ["2.25rem", "3.2rem"],
"5xl": ["3rem", "4rem"],
"6xl": ["4rem", "1rem"],
"7xl": ["5rem", "1rem"],
"10xl":"6rem"
},
extend: {
keyframes:{
modalDown:{
'0%,50%':{marginTop:-300},
'50%,100%':{marginTop:0}
}
},
animation:{
modalDown:'modalDown 0.5s linear'
},
width: {
'3/4': '75%',
},
colors: {
white: "#ffffff",
body: "#1e293b",
//blue-mode
// "colorGray-50": "#f8fafc",
// "colorGray-100": "#f1f5f9",
// "colorGray-200": "#e2e8f0",
// "colorGray-300": "#cbd5e1",
// "colorGray-400": "#94a3b8",
// "colorGray-500": "#64748b",
// "colorGray-600": "#475569",
// "colorGray-700": "#334155",
// "colorGray-800": "#1e293b",
// "colorGray-900": "#0f172a",
// "primary": "rgb(96,165,250)",
// //purple mode
"colorGray-50": "#f5f3ff",
"colorGray-100": "#ede9fe",
"colorGray-200": "#ddd6fe",
"colorGray-300": "#cbd5e1",
"colorGray-400": "#a78bfa",
"colorGray-500": "#64748b",
"colorGray-600": "#475569",
"colorGray-700": "#6d28d9",
"colorGray-800": "#5b21b6",
"colorGray-900": "#4c1d95",
"primary":"rgb(96,165,250)",
},
height: {
"128": "32rem"
},
}
},
important: true,
variants: {
extend: {}
},
plugins: []
};
For example I have 'text-color-400' custom class that works in _app.tsx and doesn't work in the components of indexComponents.When I inspect the element don't see anything from globals.css
globals.css:
/*tailwindcss utility classes*/
#tailwind base;
#tailwind components;
#tailwind utilities;
I tried change the purge to:
['./pages/**/*.{js,ts,jsx,tsx}','../public/components/**/*.{js,ts,jsx,tsx}','../public/components/indexComponents/*.{js,ts,jsx,tsx}']
But I have the same problem!