Missing Utility Classes ("bg-bglight" and "w-3") When Using @apply in Global CSS

[tianyinggang]

What version of Tailwind CSS are you using?
For example: v3.2.7

What build tool (or framework if it abstracts the build tool) are you using?
For example: Next.js 15.2.1

What version of Node.js are you using?
For example: v20.0.0

What browser are you using?
For example: Chrome

What operating system are you using?
For example: macOS

Reproduction URL:
Please refer to this minimal reproduction: Link to a minimal GitHub repo or Tailwind Play reproduction
(Note: Replace the placeholder with your actual reproduction URL. Make sure the reproduction is isolated from your main project.)

Describe your issue:
I am experiencing a build error when using the @apply directive in my global CSS file. In my Tailwind configuration (tailwind.config.js), I have extended the theme with custom colors and I expect utility classes like bg-bglight to be generated automatically. However, when I use @apply bg-bglight; in my global CSS file, I get the following error during build:

Error: Cannot apply unknown utility class: bg-bglight

Additionally, a default utility class like w-3 is also not recognized in a similar scenario. My tailwind.config.js includes the following relevant configuration:

This is tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
      "./src/**/*.{css}"
    ],
    theme: {
      screens: {
        xs: '480px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1440px',
      },
      fontFamily: {
        sans: ["var(--font-jost)", "sans-serif"], // 匹配 Jost 的 CSS 变量
      },     
      extend: {
        colors: {
          // 基础背景色
          bglight: "#F6F6F6", // 浅灰 backgroundLight
          bgdark: "#000000",  // 纯黑 backgroundDark
  
          // 品牌主色系
          brandAccentLight: "#00739d", // 辅助蓝
          brandPrimary: "#006DAE",     // Monash 主蓝
          brandAccentDark: "#3c3c3c",  // 深灰
  
          // 卡片系统
          cardlight: "#FFFFFF", // 纯白
          carddark: "#505050",  // 中灰
  
          // 功能色
          functionalLight: "#F6F6F6",     // 浅灰
          functionalAccent: "#00739d",    // 辅助蓝
          functionalAccentDark: "#3c3c3c", // 深灰
  
          // 文字系统
          textPrimary: "#3c3c3c",  // 深灰
          textlight: "#F6F6F6", // 浅灰
        },
      },
    },
    plugins: [
      require("@tailwindcss/typography"),
      require("@tailwindcss/forms"),
    ],
  };
  

This is src/app/globals.css：

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

@layer base {
  html {
    @apply scroll-smooth overflow-y-scroll;
  }

  /* ===== 自定义滚动条 ===== */
  /* 宽度 */
  ::-webkit-scrollbar {
    @apply w-[8rem]; /* 确保这个类存在 */
  }

  /* 轨道 */
  ::-webkit-scrollbar-track {
    @apply bg-bglight dark:bg-bgdark;
  }

  /* 滑块 */
  ::-webkit-scrollbar-thumb {
    @apply bg-[#d5d5d5] dark:bg-cardDark;
  }

  /* 滑块悬停 */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-[#b7b7b7] dark:bg-[#17222b];
  }
}

@layer components {
  .section {
    @apply py-11 md:pt-16 lg:pt-20 px-4 sm:px-8 md:px-20 max-w-6xl mx-auto lg:min-h-[768px];
  }
  .section-heading {
    @apply text-2xl md:text-3xl xl:text-4xl inline-block my-6 font-medium;
  }
  .link-outline {
    @apply outline-marrsgreen dark:outline-carrigreen;
  }
  .link {
    @apply outline-marrsgreen dark:outline-carrigreen text-marrsdark hover:text-marrsgreen dark:text-carrilight dark:hover:text-carrigreen;
  }
  .blog-main {
    @apply mb-20 mt-16 min-h-[70vh];
  }
  .blog-section {
    @apply py-8 px-4 sm:px-8 md:px-20 max-w-4xl mx-auto;
  }
  .glassmorphism {
    @apply bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-50 dark:bg-opacity-60;
  }
  .lower-glassmorphism {
    @apply bg-opacity-50 dark:bg-opacity-60 after:backdrop-blur-xl after:w-full after:h-full after:absolute after:top-0 after:left-0 after:-z-10;
  }
}

@layer utilities {
  .swiper-padding {
    padding: 0 3rem !important;
    padding-bottom: 3rem !important;
  }
  .swiper-padding-mobile {
    padding: 0 !important;
    padding-bottom: 3rem !important;
  }
}

/* Swiper 样式 */
.swiper-pagination-bullet {
  @apply dark:bg-gray-200;
}
.dark .swiper-pagination-bullet-active {
  background-color: rgb(5 206 145) !important;
}
.swiper-pagination-bullet-active {
  background-color: rgb(0 140 140) !important;
}

.swiper-button-prev,
.swiper-button-next {
  @apply dark:text-carrigreen;
}
.swiper-button-prev,
.swiper-button-next {
  color: rgb(0 140 140) !important;
}
@media only screen and (max-width: 480px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
}

this is package.json:

{
  "name": "felix-blog",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.0",
    "@tailwindcss/line-clamp": "^0.3.1",
    "@tailwindcss/typography": "^0.5.0",
    "next": "15.2.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/forms": "^0.5.10",
    "@tailwindcss/postcss": "^4.0.12",
    "@tailwindcss/typography": "^0.5.16",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.21",
    "eslint": "^9",
    "eslint-config-next": "15.2.1",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.12",
    "typescript": "^5"
  }
}

I have verified that the content array includes all the paths for my source files. However, since my global CSS file (where I use @apply) is not being scanned, the custom utility class is not generated, leading to the error.

Steps I’ve tried as a workaround:

• I attempted to add the missing classes to the safelist, but that only forces generation and doesn't resolve the root issue.
• I also verified that my Tailwind version supports these utilities and that there are no typos in the configuration.

Expected Behavior:
Tailwind CSS should generate the utility classes (e.g., bg-bglight and w-3) so that using @apply with these classes in any CSS file (including global CSS) works without error.

Any help or guidance on this issue would be greatly appreciated. Thank you!

---

[wongjn]

You seem to be using v3 syntax but you have v4 installed.

You'd want to replace the @tailwind directives:

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

Then, you could consider loading your JavaScript configuration:

@import "tailwindcss";

/* Path relative to the CSS file. */
@config "../../tailwind.config.js";

Though really, you should consider using CSS configuration instead.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890404835888910467

[govindaraja91]

Hi @wongjn, I got the same utility class error in v4: Cannot apply unknown utility class: gs-text-100.

My index.css

@import "tailwindcss"

.gs-text-100 {
   font-size: 14px;
    line-height: 20px;
}

and I use this class gs-text-100 in another css file:

card.css

.card-header {
 @apply gs-text-100;
}

what am i missing here?

[wongjn]

2 things:

• Use @utility to "register" your class name:

  @utility gs-text-100 {
    font-size: 14px;
    line-height: 20px;
  }

• Use @reference to reference the config in card.css:

  +@reference "./path/to/index.css";
  +
   .card-header {
     @apply gs-text-100;
   }

[govindaraja91]

Thank you so much