Hi @steel idol. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Tailwind not working in (Authorization) folder, but working in (main)
heady caveBOT
Based on the information provided in the knowledge sources, it seems like the issue might be related to the configuration of your tailwind.config.js file.
In the tailwind.config.js file, you need to specify the paths to the files that will use Tailwind CSS class names. If the (Authorization) folder is not included in the content array of your tailwind.config.js file, Tailwind CSS will not apply to the files in that folder.
Here is an example of how to configure the tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
In this example, Tailwind CSS will apply to all .js, .ts, .jsx, .tsx, and .mdx files in the app, pages, components, and src directories. If your (Authorization) folder is located in one of these directories, you need to add it to the content array. For example, if the (Authorization) folder is located in the src directory, you would add './src/(Authorization)/**/*.{js,ts,jsx,tsx,mdx}' to the content array.
Please check your tailwind.config.js file and make sure that the (Authorization) folder is included in the content array. If it's not, add it and then try building your Next.js application again.
Sources:
- Next.js > Docs > App > Building-your-application > Styling > Tailwind CSS (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css)
- Github Issue (open): Css is not loaded correctly > Comments Part 1 (https://github.com/vercel/next.js/issues/60609)