无需白名单：Tailwind CSS能否兼容Shopify Liquid动态变量？

问题本质 #

你遇到的核心矛盾是编译时机差：Tailwind CLI编译CSS是在构建阶段（静态分析源码），而Liquid变量的渲染是在Shopify服务器的请求阶段。所以Tailwind编译时根本看不到{{ settings.page_width }}最终会变成1400px，自然不会生成max-w-[1400px]对应的样式。

为什么你的尝试无效 #

这段代码在浏览器里能渲染出正确的类名，但对Tailwind来说毫无意义：

<!-- 尝试用Liquid变量动态设置最大宽度 -->
<div class="max-w-[{{ settings.page_width }}px]">
  Content here
</div>

Tailwind编译时只会看到max-w-[{{ settings.page_width }}px]这个字符串，它不属于Tailwind能识别的静态类，所以不会生成对应的CSS规则。

可行方案优化与替代思路 #

1. CSS变量+自定义Tailwind工具类（推荐，保持风格统一）

你用CSS变量的思路完全正确，可以进一步把它整合到Tailwind的配置里，让用法更贴合Tailwind习惯：

• 首先在主题的<head>中注入动态CSS变量：

  <style>
    :root {
      --page-width: {{ settings.page_width }}px;
    }
  </style>
  

• 然后在tailwind.config.js中扩展自定义工具类：

  module.exports = {
    theme: {
      extend: {
        maxWidth: {
          'page': 'var(--page-width)',
        },
      },
    },
  }
  

• 之后就能像使用原生Tailwind类一样调用：

  <div class="max-w-page mx-auto">
    Content here
  </div>
  

2. 直接混合原生CSS（简单直接）

如果只是少数几个动态样式，直接写原生CSS类是最高效的，就像你之前的方案：

<style>
  :root {
    --page-width: {{ settings.page_width }}px;
  }
  .page-width {
    max-width: var(--page-width);
  }
</style>

<div class="page-width">
  Content here
</div>

Tailwind本身并不排斥和原生CSS混用，不用刻意追求“纯Tailwind”代码。

3. 提前枚举配置值（仅适用于固定选项）

如果settings.page_width是Shopify主题设置里的固定可选值（比如1200px、1400px、1600px），可以把这些值提前加到Tailwind配置中：

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '1200': '1200px',
        '1400': '1400px',
        '1600': '1600px',
      },
    },
  }
}

然后模板里直接使用对应类名：

<div class="max-w-{{ settings.page_width }}">
  Content here
</div>

但这种方式只适合选项有限的场景，无法支持用户自定义任意数值。

对你问题的直接回答 #

1. 没有办法让Tailwind自动识别Liquid动态生成的任意类名（无需手动白名单）——因为Tailwind的JIT编译依赖静态源码分析，它无法预知Liquid在运行时会输出什么值，这是其核心特性决定的。
2. 混合Tailwind与原生CSS（或CSS变量）是处理这类场景的最优解，不用纠结是否“纯Tailwind”，实用优先。

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