Vue3项目中使用Tailwind3动态加载HTML时尺寸类不生效的问题求助

大家好，我最近在开发Vue3 + Tailwind3的项目时遇到了一个棘手的问题，想请教一下各位：

静态写在Vue模板里的元素，Tailwind的所有样式类都能正常生效，包括尺寸类。比如下面这段代码：

<template>
  <div class="w-48 h-[200px] bg-blue-500">
    <div>I was resized</div>
  </div>
</template>

这里的w-48、h-[200px]和bg-blue-500都能正确应用，元素有预期的宽高和蓝色背景。

但当我把这段HTML内容放到JSON文件（或者从数据库加载），再通过v-html动态渲染时，只有尺寸类完全不生效，其他样式类（比如背景色）却正常工作。

动态加载的具体实现： #

首先是我的components.json文件内容：

[
  {
    "id": 1,
    "html_code": "<div class=\"w-48 h-[200px] bg-blue-500\"><div>I was resized</div></div>"
  }
]

然后在Vue组件里这样加载和渲染：

<script setup>
import componentsArray from './components.json'
</script>

<template>
  <div v-for="component in componentsArray" :key="component.id">
    <div v-if="component.html_code" v-html="component.html_code"></div>
  </div>
</template>

渲染结果是：元素显示蓝色背景，但宽高完全没有应用w-48和h-[200px]的规则，就像这两个类根本不存在一样。

我的Tailwind配置 #

我已经开启了JIT模式，并且把JSON文件加入了content扫描路径，tailwind.config.js内容如下：

export default {
  mode: 'jit',
  important: true,
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx,json,html}',
    './public/json/**/*.json',
    './public/**/*.html',
  ],
  // 其他主题、插件配置...
}

我试过清空缓存重新构建，也确认了JSON文件的路径是对的，但问题依然存在。为什么只有尺寸类在动态加载的HTML里不生效？其他类（比如颜色、间距）都没问题。有没有办法让Tailwind正确识别这些动态内容里的尺寸类？

折腾了好几个小时还是没头绪，求各位大佬帮忙分析一下原因，给出解决办法！

内容来源于stack exchange