Next.js13中Tailwind CSS颜色不显示及IntelliSense无颜色块问题

API 探路者

2026-7-19

Tailwind CSS IntelliSense 无颜色块预览问题解决方案

问题描述

正常使用Tailwind CSS IntelliSense时会显示颜色块预览，但在Next.js 13环境中无法触发该功能，虽已安装插件，仅能提供部分基础功能。

当前使用的配置文件如下：

tailwind.config.js

/* tailwind.config.js */

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

postcss.config.js

/* postcss.config.js */

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

解决步骤

启用颜色装饰器：打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索Tailwind CSS: Color Decorators，确保该选项处于启用状态。
修正文件类型关联：查看VS Code右下角状态栏的文件类型标识，确保JSX/TSX文件被识别为JavaScript React或TypeScript React，若类型错误可点击修改。
重载插件环境：打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），输入Reload Window重启窗口，再检查颜色块显示情况。
确认全局样式引入：在项目全局样式文件（如app/globals.css）中，确保已添加Tailwind核心指令：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
校验配置路径：确认tailwind.config.js和postcss.config.js位于项目根目录，且content配置覆盖了所有使用Tailwind类名的文件。