如何在Tailwind CSS的@apply中使用自定义类？

问题分析 #

你在tailwind.config.js中扩展的shadow-specific工具类可直接在元素上生效，但在@apply中调用时报错，后续通过@layer components定义同名类也未解决，核心原因可能是配置未生效、类名冲突或编译缓存问题。

解决方案 #

方案1：确保配置正确并重启服务 #

1. 检查tailwind.config.js的完整结构，确保boxShadow扩展在theme.extend下，且content包含项目文件路径：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./src/**/*.{html,js,jsx,ts,tsx}"], // 按需调整路径
     theme: {
       extend: {
         boxShadow: {
           "specific": 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px'
         }
       },
     },
     plugins: [],
   }
   

2. 在Tailwind处理的CSS文件（如index.css）中直接用@apply调用工具类，无需额外定义@layer：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   .product .title {
     @apply py-2 font-extrabold text-lg md:text-base shadow-specific;
   }
   

3. 重启开发服务器（修改tailwind.config.js后必须重启才能加载新配置），并清除项目缓存（如Vite执行vite --force，Webpack删除缓存目录）。

方案2：避免类名冲突，使用自定义组件类 #

如果坚持用@layer components定义类，需避免与Tailwind自动生成的工具类重名：

1. 删除tailwind.config.js中extend.boxShadow的specific配置
2. 在index.css中定义唯一命名的组件类：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @layer components {
     .shadow-product-specific {
       box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     }
   }
   
   .product .title {
     @apply py-2 font-extrabold text-lg md:text-base shadow-product-specific;
   }
   

3. 重启开发服务器生效。

关键注意点 #

• 只有在包含@tailwind指令的CSS文件（即Tailwind编译流程内的文件）中，才能用@apply调用Tailwind工具类或自定义组件类。
• 若项目开启Tree Shaking，确保content配置覆盖所有使用该类的文件，避免工具类被误删。

内容的提问来源于stack exchange，提问作者Mohsen Rj