Tailwind CSS在Codesandbox默认React模板中无法正常工作？

可能原因及解决办法 #

• 构建缓存干扰
  Codesandbox的缓存机制可能导致新配置不生效，试试点击右上角「Refresh」按钮刷新项目，或者在依赖面板删除Tailwind相关包后重新安装。

• 配置文件路径/内容错误
  确认tailwind.config.js在项目根目录，且content字段覆盖所有需要应用样式的文件：

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

  如果路径写错，Tailwind无法扫描到组件文件，自然不会生成对应样式。

• PostCSS配置缺失
  CRA项目必须通过postcss.config.js启用Tailwind，根目录没有的话新建一个，内容如下：

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

  这个文件是Tailwind和CRA构建流程对接的关键，缺失会导致依赖安装后不生效。

• 版本兼容性问题
  不同版本的Tailwind和Codesandbox的CRA环境可能存在兼容问题，试试降级到稳定版本（比如tailwindcss@3.3.2），同时确保autoprefixer和postcss版本与Tailwind匹配（参考官方文档的版本要求）。

• CSS入口文件未正确配置
  检查src/index.css是否包含Tailwind核心指令：

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

  并且确认这个CSS文件已经在src/index.js中导入：

  import './index.css';
  

快速验证流程 #

1. 清理现有依赖（删除tailwindcss、postcss、autoprefixer后重新安装）
2. 手动确认所有配置文件的路径和内容无误
3. 刷新Codesandbox项目并重新构建

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