Tailwind无法编译@apply类，页面强制显示移动端视图问题

问题现象 #

• Tailwind仅编译Flowbite组件库的样式类，自定义@apply类（如.filtry_nadpis）完全失效
• 页面强制以移动端视图渲染，店铺列数等布局始终为移动端样式，与实际视口宽度不匹配
• 此前通过回退Git提交可修复，此次无效；已尝试删除node_modules重装、重建Tailwind配置、重启开发服务器等操作，均未解决

相关配置文件 #

input.css #

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

@layer components {
    .filtry_nadpis {
        @apply mt-4 mb-2 text-xl font-extrabold leading-none tracking-tight text-gray-900 md:text-2xl lg:text-3xl dark:text-white;
    }
}

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: {
    enabled: process.env.NODE_ENV === 'production',
    safeList: [],
    content: [
      './index.html',
      './src/**/*.{vue,js,ts}',
      "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}"
    ],
  },
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

vite.config.js #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
});

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

排查与修复方案 #

1. 修正Tailwind JIT模式的content配置 #

核心问题在于tailwind.config.js的content配置错误：

• 嵌套的content对象导致JIT模式在开发环境下未启用内容扫描
• 文件后缀包含vue但项目是React，导致扫描范围错误

修改后的配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

2. 确保入口文件正确引入样式 #

在项目入口文件（如src/main.jsx/src/main.tsx）中确认引入input.css：

import './input.css';

3. 清理Vite缓存 #

执行命令清除Vite缓存，避免旧配置残留：

rm -rf node_modules/.vite

之后重启开发服务器。

4. 验证viewport标签 #

检查index.html中的viewport设置，确保响应式布局正常工作：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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