主题应用扩展自定义块如何仅加载一次Tailwind CSS资源？

下面分享几种实用方案，帮你实现Tailwind样式只加载一次，让所有自定义区块共用：

1. 全局模板注入（推荐） #

Shopify主题的核心全局模板（比如theme.liquid）的<head>标签是所有页面都会加载的地方，你只需在这里添加一次Tailwind样式引用：

{{ 'tailwind-styles.css' | asset_url | stylesheet_tag }}

这样不管你在主题应用扩展里加多少自定义区块，都会自动继承这个全局加载的样式，完全不用在每个区块里单独写引入代码。如果你的主题支持通过扩展的自定义设置注入全局资源，也可以走这个路径，具体看主题的扩展文档说明。

2. Liquid上下文变量判断 #

如果没办法修改主题的全局模板，那就用Liquid的上下文变量做加载判断。在每个区块的代码里加入以下逻辑：

{% unless page.tailwind_loaded %}
  {{ 'tailwind-styles.css' | asset_url | stylesheet_tag }}
  {% assign page.tailwind_loaded = true %}
{% endunless %}

同一个页面内的所有区块共享page对象的上下文，所以第一次加载区块时会标记tailwind_loaded为true，后续区块就不会重复加载样式了。

3. JavaScript动态加载 #

用JS判断页面中是否已经存在Tailwind样式的链接标签，不存在就动态创建并加载：

// 检查是否已加载Tailwind样式
const hasTailwind = document.querySelector('link[href*="tailwind-styles.css"]');
if (!hasTailwind) {
  const styleLink = document.createElement('link');
  styleLink.rel = 'stylesheet';
  styleLink.href = '{{ 'tailwind-styles.css' | asset_url }}';
  document.head.appendChild(styleLink);
}

把这段代码放到每个区块的JS代码段里，或者打包成单独的JS文件引入，就能保证样式只加载一次。

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