- tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class", // ← Important
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      screens: { xl_header: "1045px" },
      boxShadow: {
        md: "0 4px 12px rgba(0, 0, 0, 0.08)", // Soft floating nav effect
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
};

- postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

the xl_header screen is not getting detected in my tailwind css code.
- I'm not using monorepo or turbopack
- I've checked default screens like md and lg are getting detected