集成Tailwind v3.3.2与Nuxt3时使用pages/index.vue出现白屏

我严格按照Tailwind官方的Nuxt3指南将TailwindCSS集成到新的Nuxt3应用中，未使用app.vue文件，采用pages/index.vue结构，但运行npm run dev后页面仅显示空白白屏。

目录结构 #

相关代码文件 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

nuxt.config.ts #

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

pages/index.vue #

<template>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

请问是否存在文档未提及的已知问题？另外，请不要推荐Nuxt的Tailwind社区插件，我不想使用该插件。奇怪的是，使用app.vue结构时一切正常，如何让pages/index.vue结构正常工作？

解决方法 #

1. 确认Tailwind基础样式文件正确
   检查assets/css/tailwind.css文件是否存在，且内容必须包含：

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

   这是Tailwind注入样式的核心文件，缺失或内容错误会导致样式不生效，甚至影响页面渲染。

2. 显式启用Pages模块
   在nuxt.config.ts中添加Pages模块配置，确保Nuxt识别pages目录作为路由入口：

   export default defineNuxtConfig({
     devtools: { enabled: true },
     css: ["~/assets/css/tailwind.css"],
     postcss: {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       },
     },
     modules: ['@nuxtjs/pages'] // 显式启用Pages模块
   });
   

   虽然Nuxt3默认会自动启用Pages模块，但显式配置可避免因环境或版本差异导致的识别问题。

3. 清除Nuxt缓存
   删除项目根目录下的.nuxt文件夹和node_modules/.cache目录，然后重新执行npm run dev，确保旧缓存不会干扰页面渲染。

4. 检查浏览器控制台错误
   打开浏览器开发者工具的控制台面板，查看是否有路由加载失败、资源缺失或Tailwind相关的报错信息，这些细节能定位具体问题。

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