Laravel 10+Vite环境中TailwindCSS自定义类不存在错误求助

问题根源分析 #

你的配置存在三个核心问题：plugin.js语法错误、插件引入方式错误、主题扩展结构错误，导致Tailwind无法识别自定义的primary颜色，进而报错bg-primary类不存在。

分步修复 #

1. 修正plugin.js的语法与结构 #

你的plugin.js存在括号不匹配的语法错误，且主题扩展的位置不符合Tailwind插件规范。正确写法需将主题扩展作为插件的第二个参数传入：

const plugin = require("tailwindcss/plugin");

module.exports = plugin(
  // 自定义基础样式逻辑
  function ({ addBase }) {
    addBase({
      ".snap": {
        scrollSnapType: "x mandatory",
        scrollBehavior: "smooth",
      },
    });
  },
  // 主题扩展配置
  {
    theme: {
      extend: {
        colors: {
          dark: "#090E34",
          "dark-700": "#090e34b3",
          primary: "#15616d",
          secondary: "#13C296",
          "body-color": "#637381",
          warning: "#F9C107",
          danger: "#DC3545",
          success: "#3CA745",
          info: "#3BA2B8",
          light: "#efefef",
          "form-stroke": "#E0E0E0",
          "tg-bg": "#f7f8fa",
          black: "#212B36",
          stroke: "#E7E7E7",
          gray: "#F4F7FF",
          "gray-1": "#F4F7FF",
          "gray-2": "#F8FAFC",
          orange: "#F2994A",
          purple: "#9B51E0",
        },
      },
    },
  }
);

2. 修正tailwind.config.js的插件引入方式 #

plugins数组需要传入插件模块实例，而非字符串路径，需用require引入自定义插件：

module.exports = {
  content: [
      './storage/framework/views/*.php',
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
      './resources/**/*.css'
  ],
  theme: {
    extend: {},
  },
  plugins: [require('./plugin.js')], // 修正为引入插件模块
}

3. 确认app.css的使用规范 #

确保app.css已正确引入Tailwind核心指令，若需自定义组件类才需要用@layer包裹：

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

/* 仅自定义非Tailwind原生工具类时才需要@layer，示例：
@layer components {
  .custom-card {
    @apply bg-primary p-4 rounded-lg;
  }
}
*/

验证修复 #

执行以下操作确保配置生效：

• 重启Vite开发服务器：npm run dev
• 清除浏览器缓存后刷新页面

内容的提问来源于stack exchange，提问作者hossein darvishi