Tailwind项目构建后CSS因MIME类型被阻止的解决方法

使用npm run build构建Tailwind CSS项目后，直接打开本地index.html出现CSS因MIME类型被阻止的问题，可通过以下方法解决：

• 用本地服务器访问构建文件
  直接通过file://协议打开本地HTML文件时，浏览器会严格限制资源加载，容易触发MIME类型错误。可以用本地服务器运行构建产物：

  • 进入构建输出目录（通常是dist），执行npx serve，然后访问http://localhost:3000
  • 或者用Python：python -m http.server 8000，访问http://localhost:8000

• 检查CSS引用路径
  打开构建后的index.html，查看<link>标签的href属性是否正确。比如CSS文件在dist/css/main.css，则href应设为./css/main.css，避免绝对路径或错误的相对路径导致文件找不到。

• 确认Tailwind构建配置

  • 检查tailwind.config.js的content字段，确保所有使用Tailwind类的HTML、JS文件都被正确包含，防止构建出空的CSS文件
  • 核对package.json的build脚本，比如是否正确指定了输入输出路径："build": "tailwindcss -i ./src/style.css -o ./dist/css/main.css"

• 清理缓存重新构建
  删除整个构建输出目录（如dist），再重新执行npm run build，避免旧缓存文件引发异常。

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