Tailwind样式在CodeMirror+react-live实现的Playground中无法实时更新

我完全懂你现在的困扰——自己搭的Tailwind Playground里，明明在CodeMirror编辑器里改了Tailwind类名，react-live的预览区里元素也确实带上了新的类，但样式就是纹丝不动，只有一开始写死的代码能正常生效，这属实让人摸不着头脑。

问题根源 #

其实这是Tailwind的JIT编译机制导致的：咱们本地构建的Tailwind会在项目打包阶段扫描所有代码里的Tailwind类，只生成这些类对应的CSS样式。而react-live是在浏览器里动态编译并渲染代码，你在CodeMirror里新增的类根本没机会被Tailwind的构建扫描器捕获到，自然不会生成对应的样式，所以预览区里的元素虽然有类名，但没有对应的CSS规则生效。

而你一开始写的预写代码能正常工作，是因为这段代码在项目构建时就被Tailwind扫描到了，提前生成了对应的样式。

解决方案（两种可选） #

方案一：改用Tailwind CSS CDN版本（最简便）

Tailwind的CDN版本是在浏览器端实时解析页面中的Tailwind类名并生成样式的，刚好适配这种动态生成代码的场景。

你只需要在项目的入口文件（比如index.html或者根组件App.js）里引入CDN链接：

<script src="https://cdn.tailwindcss.com"></script>

引入之后，再去CodeMirror里修改Tailwind类名，预览区的样式应该就能实时更新了——因为CDN会实时检测页面上新增的类名，自动生成对应的CSS。

方案二：本地构建模式下配置动态样式生成（复杂但可控）

如果你不想用CDN，坚持用本地构建的Tailwind，可以通过以下方式处理，但灵活性会差一些：

• 方式1：使用safelist提前声明可能用到的类
  在tailwind.config.js里把你可能用到的Tailwind类都加到safelist数组里，比如：

  module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    safelist: [
      'text-red-800',
      'text-blue-600',
      'bg-gray-100',
      // 把你可能用到的类都列在这里
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

  这种方式的缺点是必须提前预知所有可能用到的类，不够灵活，适合类名范围固定的场景。

• 方式2：使用Tailwind的客户端API动态生成样式
  你可以借助Tailwind的tailwindcss/lib/cli或者第三方工具，在客户端动态编译生成样式，但这种方式复杂度较高，需要处理动态代码的扫描和样式注入，一般不推荐作为首选。

验证你的代码逻辑 #

另外再确认下你的react-live配置是没问题的：你已经把code状态绑定到了LiveProvider的code属性，onChange也正确更新了状态，这部分逻辑是对的——问题确实出在Tailwind的样式生成环节，不是react-live或CodeMirror的配置问题。

备注：内容来源于stack exchange，提问作者Gega Abzianidze