VSCode终端安装TailwindCLI出现MODULE_NOT_FOUND错误求助

一、手动创建package.json #

• 打开VSCode，在项目根目录新建文件，命名为package.json
• 粘贴以下基础模板，可根据实际需求修改项目名称、版本等字段：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss -i ./src/style.css -o ./dist/style.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

• 说明：scripts中的build命令用于监听TailwindCSS编译，路径需匹配你的项目文件结构

二、生成package-lock.json #

• 在VSCode终端切换到项目根目录，执行以下命令安装Tailwind依赖，系统会自动生成package-lock.json：

npm install tailwindcss postcss autoprefixer --save-dev

• 若VSCode终端仍存在路径问题，可先在命令提示符（Command Prompt）中执行上述命令，完成后回到VSCode继续操作

三、TailwindCSS后续配置 #

• 若终端npx命令仍报错，可手动创建tailwind.config.js配置文件，模板如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/**/*.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 在项目src目录下新建style.css，添加Tailwind核心指令：

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

四、VSCode终端路径问题修复（可选） #

• 重启VSCode，确保终端加载最新系统环境变量
• 切换VSCode终端默认shell为Command Prompt：点击终端下拉菜单，选择「Command Prompt」

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