Laravel Vite中自定义Tailwind @apply样式未编译问题求助

以下是你提供的配置代码：

app.css #

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

@import 'animate/base.css';
@import 'animate/animations.css';

@layer components {
  .ql-container {
        @apply border-2 border-slate-300;
    }
}

postcss.config.js #

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

针对自定义.ql-container样式未编译的问题，可以按以下步骤排查：

• 确认模板中是否使用了.ql-container类：Tailwind默认开启JIT模式，只会编译被实际使用的类。如果你的Blade模板、Vue组件等文件里没有用到这个类，它会被从最终CSS中剔除。
• 检查Tailwind配置的content路径：确保tailwind.config.js的content数组包含所有使用该类的文件路径，比如：

  module.exports = {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
      "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
    ],
    // ...其他配置
  }
  

• 验证tailwindcss/nesting是否正确安装：你的PostCSS配置中用到了tailwindcss/nesting，需要确保已经执行npm install @tailwindcss/nesting --save-dev完成安装，否则嵌套语法可能无法被正确解析。
• 清理Vite缓存后重新构建：缓存可能导致样式未更新，执行npm run dev --force或npm run build --force清除缓存后重新编译。
• 检查@import文件的路径与内容：如果animate/base.css或animate/animations.css路径错误、文件不存在或有语法错误，可能会阻断后续CSS的编译流程，确认这些文件的有效性。
• 尝试替换嵌套插件：可以将tailwindcss/nesting替换为postcss-nested（需先执行npm install postcss-nested --save-dev），调整PostCSS配置后重新编译：

  module.exports = {
    plugins: {
      'postcss-import': {},
      'postcss-nested': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

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