No utility classes detected in source files

[mifouts]

I am having major trouble with my css not working on the deployed version of my website through vercel but it works locally with no issues at all. my tailwind.config.js file for my next.js app reads as follows:

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
"./pages//*.{js,ts,jsx,tsx}",
"./components//*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
screens: {
"3xl": "2000px",
},
},
},
plugins: [
require("tailwind-scrollbar-hide"),
require("@tailwindcss/typography"),
],
};

my globals.css files reads:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
body {
@apply bg-[#06202A] text-gray-300
}
}

my postcss.config file reads:

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

and my _app.tsx file reads:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}

I am using VSCode with version 3.2.4 of Tailwind and latest version of next.js

every time i deploy through Vercel it tells me no utility classes were detected in my source files and the css does not transfer over into the deployed website and no matter what i do in that config file nothing has worked. This is a next.js app i am trying to deploy. I have asked about this through every possible resource available to me and cannot find an answer to my problem whatsoever.

[adamwathan]

Hey! Two ideas:

1. Remove the double slashes in your content configuration, this might be handled differently on Linux than it’s handled on your local machine.
2. Check that the casing of your actual folder names matches your content config, Linux is case sensitive and macOS generally isn’t, so if you named your folder “Components” instead of “components” it could work on macOS but not when building on the server.

[mifouts]

I am not sure why the double slashes are there it actually reads like this:
module.exports = {
content: [
"./pages//*.{js,ts,jsx,tsx}",
"./components//*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
screens: {
"3xl": "2000px",
},
},
},
plugins: [
require("tailwind-scrollbar-hide"),
require("@tailwindcss/typography"),
],
};

I am also not on MacOs or linux I am on windows 11

[mifouts]

ok wow i am shocked lol all it took was capitalizing the C in components and it worked. I have been at this for days trying to get it to work