Next.js 14项目保留Module.css同时配置TailwindCSS的方案

问题背景 #

在Next.js 14项目中配置TailwindCSS，项目此前使用Module.css管理样式，希望保留旧组件的Module.css，仅用Tailwind开发新组件，但配置后出现以下警告，且Tailwind样式不生效：

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

项目结构为FE/src/*，Module.css和global.css位于FE/src/styles下，当前配置文件如下：

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js,tsx}',
    './components/**/*.{html,js,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

postcss.config.js #

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

next.config.mjs #

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'placehold.co',
        port: '',
        pathname: '/**',
      },
    ],
  },
  swcMinify: true,
  compiler: {
    styledComponents: true, // If you are using styled-components
  },
  webpack: (config) => {
    return config;
  }
};

export default nextConfig;

package.json #

{
  "name": "Missari",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",

  },
  "dependencies": {
    "@babel/core": "^7.26.0",
    "@babel/node": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@prisma/client": "^5.20.0",
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.7",
    "chart.js": "^4.4.4",
    "cloudinary": "^2.5.1",
    "css-loader": "^7.1.2",
    "daisyui": "^4.12.14",
    "dompurify": "^3.1.7",
    "i": "^0.3.7",
    "ical": "^0.8.0",
    "next": "^14.2.14",
    "npm": "^10.8.3",
    "pino-pretty": "^11.2.2",
    "postcss": "^8.4.49",
    "prisma": "^5.20.0",
    "react": "^18.3.1",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-quill": "^2.0.0",
    "style-loader": "^4.0.0",
    "tailwindcss": "^3.4.15",
    "zustand": "^5.0.0-rc.2"
  },
  "devDependencies": {
    "@types/ical": "^0.8.3",
    "@types/json-schema": "^7.0.15",
    "@types/node": "^20.16.10",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.9",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2"
  }
}

解决方案 #

1. 修正Tailwind配置的content路径 #

警告核心原因是Tailwind无法定位到源码文件，当前配置的路径指向项目根目录，但实际源码位于FE/src下。修改tailwind.config.js的content数组：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './FE/src/pages/**/*.{html,js,tsx}',
    './FE/src/components/**/*.{html,js,tsx}',
    // 若使用App Router，需添加以下路径
    // './FE/src/app/**/*.{html,js,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

2. 在全局CSS中引入Tailwind指令 #

打开FE/src/styles/global.css，添加Tailwind基础样式指令（保留原有全局样式）：

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

/* 原全局样式代码 */

确保全局CSS被正确导入：

• Pages Router：在FE/src/pages/_app.tsx中导入

  import '../styles/global.css';
  import type { AppProps } from 'next/app';
  
  export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }
  

• App Router：在FE/src/app/layout.tsx中导入

  import '../styles/global.css';
  import type { Metadata } from 'next';
  
  export const metadata: Metadata = {
    title: 'Your App',
    description: 'Your Description',
  };
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    );
  }
  

3. 验证共存逻辑 #

Next.js原生支持Module.css与TailwindCSS共存，无需修改next.config.mjs：

• 旧组件继续使用import styles from './Component.module.css'引入样式
• 新组件直接在JSX中使用Tailwind工具类，例如：

  export default function NewComponent() {
    return <div className="bg-blue-500 text-white p-4 rounded">新组件示例</div>;
  }
  

4. 重启开发服务 #

修改配置后，重启next dev服务使配置生效。

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