安装daisyui后VSCode中Tailwind CSS IntelliSense及Prettier失效求助

在VSCode中使用Tailwind CSS搭配daisyui时，原本正常工作的Tailwind CSS IntelliSense扩展突然失效，同时Prettier也无法正常运行。此前Tailwind CSS IntelliSense可与daisyui兼容工作。以下是当前的tailwind.config.js配置文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "node_modules/daisyui/dist/**/*.js",
    "node_modules/react-daisyui/dist/**/*.js",
  ],
  theme: {
    fontFamily: {
      inter: ["Inter", "sans-serif"],
      manrope: ["Manrope"],
    },
    colors: {
      "core-border-primary-10": "#CFE1F7",
      "alopay-blue": "#1382FB",
      "alopay-blue-3": "#005ABD",
      "alopay-blue-2": "#405B84",
      "alopay-blue-1": "#85ADD5",
      "alopay-blue-0": "#B3CAE6",
      "alopay-light-blue": "#4EB2F9",
      "alopay-light-blue-1": "#B5D9FF",
      "alopay-light-2": "#F2F5FF",
      "alopay-light-1": "#E2E5EF",
      "alopay-light-0": "#F3F4F7",
      "alopay-white": "#FFFFFF",
      "alopay-red-1": "#C72F1F",
      "alopay-red-0": "#EB4E45",
      "alopay-green": "#468F2B",
      "alopay-green-0": "#4EA20C",
      "alopay-yellow": "#FFB600",
      "alopay-dark-dim": "#7499BE",
      "alopay-dark-blue": "#0C0C3B",
      "programs-custom-blue-white": "#F4F6FA",
      transparent: "transparent",
      "core-border-primary-0": "#EBF4FF",
    },
    borderRadius: {
      none: "0",
      xs: "0.25rem",
      sm: "0.5rem",
      full: "12.5rem",
      circle: "999px",
    },
    extend: {
      boxShadow: {
        xs: "0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 8px 24px -4px rgba(0, 0, 0, 0.04)",
        "revert-xs": "0px -2px 14px 0px rgba(0, 0, 0, 0.06)",
      },
      backgroundImage: {
        qrZone:
          "linear-gradient(193deg, rgba(255, 255, 255, 0.20) -13.83%, rgba(255, 255, 255, 0.00) 99.72%)",
      },
    },
  },
  plugins: ["@tailwindcss/line-clamp", require("daisyui")],
  daisyui: {
    darkTheme: "light",
    logs: false,
  },
};

解决步骤 #

修复Tailwind CSS IntelliSense失效问题 #

• 修正插件引入语法：plugins数组中"@tailwindcss/line-clamp"需改为require("@tailwindcss/line-clamp")，字符串形式无法正确加载插件，会导致IntelliSense识别失败。修改后：

  plugins: [require("@tailwindcss/line-clamp"), require("daisyui")],
  

• 重启Tailwind服务：打开VSCode命令面板（Ctrl+Shift+P），执行Tailwind CSS: Restart Tailwind Server，强制清除扩展缓存并重启服务。
• 验证配置文件路径：打开VSCode设置，搜索Tailwind CSS: Config File，确认路径指向项目根目录的tailwind.config.js，若路径错误手动修正。
• 优化content路径：可尝试移除node_modules下的daisyui路径，因为daisyui的类会被Tailwind自动扫描，冗余路径可能导致扫描异常。

修复Prettier失效问题 #

• 安装Tailwind格式化插件：执行命令安装prettier-plugin-tailwindcss，确保Prettier兼容Tailwind类：

  npm install prettier-plugin-tailwindcss --save-dev
  

• 配置Prettier：在项目根目录创建.prettierrc文件，添加以下内容：

  {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
  

• 重启VSCode：编辑器扩展加载异常时，重启可解决Prettier无法触发的问题。
• 检查文件关联：打开VSCode设置，搜索Prettier: Enable，确认.jsx/.tsx等使用Tailwind的文件类型已被勾选。

内容的提问来源于stack exchange，提问作者Nguyen Thanh Hoang