Parcel构建React+Tailwind+TS项目报@tailwind未知规则错误求助

Parcel默认内置的CSS转换器无法识别Tailwind的@tailwind at规则，本质是项目缺少Tailwind对应的PostCSS处理配置，同时入口HTML文件存在资源引用属性缺失、路径不规范的问题，会进一步放大构建异常。

• 安装缺失的开发依赖
  执行命令安装Tailwind CSS和PostCSS：
  npm install -D tailwindcss postcss
  使用pnpm、yarn的用户替换为对应包管理器的安装命令即可。
• 生成并配置Tailwind配置文件
  执行初始化命令生成配置文件：
  npx tailwindcss init
  打开项目根目录生成的tailwind.config.js，修改content字段，指定Tailwind需要扫描类名的文件范围：

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

• 添加PostCSS配置
  在项目根目录新建postcss.config.js文件，写入以下配置，告知Parcel调用Tailwind插件处理CSS规则：

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

• 修正index.html的资源引用问题
  现有代码中的link标签缺少rel="stylesheet"属性，且路径与常规Parcel项目结构不匹配，按如下规则修改：
  1. 推荐将index.html移动到项目根目录（与package.json同级），这是Parcel默认识别的入口位置
  2. 修改head内的CSS引用标签为：<link rel="stylesheet" href="./src/index.css">
  3. 修改body末尾的脚本标签为：<script type="module" src="./src/index.tsx"></script>
     *如果坚持将index.html放在src目录下，对应资源路径改为./index.css和./index.tsx即可，但这种结构更容易触发Parcel的路径解析bug。
• 清除缓存重启构建
  Parcel存在强本地缓存，配置修改后必须清空缓存再重启服务，执行命令：
  rm -rf .parcel-cache dist && npx parcel index.html

按照以下结构组织文件即可正常运行React + TypeScript + Tailwind CSS + Parcel技术栈的项目：

project-root/
├── src/
│   ├── app/
│   │   └── store.ts    # 已有的Redux store文件
│   ├── App.tsx
│   ├── index.css       # 写入@tailwind三个指令的CSS入口文件
│   └── index.tsx       # React挂载入口文件
├── index.html          # 项目入口HTML
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

package.json参考配置：

{
  "name": "react-ts-parcel-tailwind",
  "version": "1.0.0",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "parcel": "^2.9.3",
    "postcss": "^8.4.27",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.1.6"
  }
}

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