Missing Utility Classes ("bg-bglight" and "w-3") When Using @apply in Global CSS #17117
Description
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!