今天发现astro的一个问题：一段html内容在使用set:html动态加载后样式丢失，而把这段html内容复制在.astro文件则完全没问题。

于是我通过chrome的view-source把两个样式的源文件存下来做对比发现丢失样式的文件缺少了很多css class

+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
 }
 @media (min-width: 1024px) {
 
@@ -1688,10 +1729,15 @@
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+
+  .xl\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
 }

此时恍然大悟，astro应该是为了达到性能而采用了这种css class按需生成机制（我不确定是webpack，vit，tailwind css哪个系统产生的机制），我使用的是tailwind css，系统并不会把全部的class引入，也就是说.astro文件模板中使用的css class都会被生成出来，而没有出现的class并不会被生成出来，这样一来显然前端文件的体积会小很多。

但问题也显而易见，系统无法捕捉动态加载的内容的class，导致css class没有被生成出来而缺少样式展现，特别是对于tailwind这种class书写风格相当棘手。

我尝试过的解决方法：

一 使用is:inline标签全局引入CDN

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

is:inline标签很重要，如果没有它astro依旧会本地化按需生成style样式表，此法有效，弊端是资源无法本地化，需引入外部文件。

二 使用容器

既然在class中指定的name都能被生成出来，于是我在.astro文件中随手写了个<div class="xxx">并注释掉，就像这样

<!--<div class='text-gray-900 dark:text-white font-bold text-5xl md:text-6xl xl:text-7xl mt-8 text-gray-700 dark:text-gray-300 relative flex h-11 w-full items-center justify-center px-6'></div> -->

此法也有效，弊端是类似tailwind这样的css框架，这个class name处理起来属实头疼。

最新更新：目前使用了此方法，配合@astro-compress插件把removeComments: true参数选上，就可以过滤掉注释了。

最后说下，astro项目运行模式是hybrid，未在static模式下测试，如有好的方法解决以上问题可以留言，感谢不尽。