WAMP服务器运行Tailwind开发的网页时样式不显示如何解决

本地npm开发环境样式正常、WAMP服务本身运行正常的前提下，样式渲染失败基本是构建、路径、配置三类问题，按以下顺序逐一排查：

• 确认是否执行了生产环境构建
  Tailwind 3.x及以上版本默认采用JIT按需编译模式，本地开发时npm run dev启动的开发服务会实时动态生成样式，直接把开发阶段的源码复制到WAMP目录是没有可用的编译后CSS文件的。先在项目根目录执行生产构建命令：
  npm run build
  构建完成后将生成的dist（部分项目脚手架为build）目录内的所有文件复制到WAMP站点对应目录，不要直接复制项目源码。
• 检查CSS文件引用路径是否正确
  本地开发服务默认以根路径托管资源，如果你把项目放在WAMP的www目录下的子文件夹（比如www/my-project/），写死的绝对路径引用会导致CSS文件404。按F12打开浏览器开发者工具，切到「网络」面板刷新页面，查看Tailwind样式文件的请求状态：
  • 如果返回404，把CSS引用从根路径写法<link rel="stylesheet" href="/dist/output.css">改成对应层级的相对路径，比如<link rel="stylesheet" href="./dist/output.css">
  • 如果你是用CDN方式引入Tailwind，先确认WAMP所在环境能正常访问对应CDN地址，生产环境更推荐用本地构建的CSS文件，避免网络问题导致样式失效。
• 核对tailwind.config.js的content配置
  Tailwind生产构建时会扫描content配置项指定路径下的所有文件，提取用到的类名生成最终CSS。如果配置写死了本地开发的绝对路径、或者没有覆盖WAMP目录下的文件类型（比如你用了PHP模板没加.php后缀匹配），会导致构建出来的CSS文件为空。标准配置参考：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./**/*.{html,js,php}"], // 匹配当前站点目录下所有html、js、php文件
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

  修改配置后必须重新执行npm run build，把新生成的CSS文件覆盖到WAMP站点目录。
• 排查WAMP静态资源配置问题
  如果开发者工具控制台提示CSS文件MIME类型不支持，是WAMP的Apache服务没正确配置CSS文件的MIME映射。在站点根目录的.htaccess文件中添加如下配置即可：
  AddType text/css .css
• 排除浏览器缓存干扰
  首次部署出错后浏览器可能缓存了空的CSS文件或者404结果，排查时按Ctrl+F5强制刷新页面，或者打开无痕窗口测试，避免旧缓存影响判断。

90%以上的同类问题都是未执行生产构建、或者CSS引用路径错误导致的，优先排查这两项。

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