Can Tailwind CSS utilize dynamic variables from Shopify Liquid?

Other Questions Shopify
1

I’m fairly new to using Tailwind CSS within a Shopify theme and I have it set up through the Tailwind CLI. While the static classes function well, I’m encountering issues when I try to incorporate Liquid variables into Tailwind utility classes.

Here’s the challenge I’m facing:

I want to dynamically define max-width with a Liquid variable in my Tailwind classes, but I realize that Tailwind compiles before the Liquid code executes, and I’m looking for clarification on the best way to approach this.

This is the code that I’ve attempted to use:

<!-- I tried setting max-width based on a Liquid variable -->
<div class="max-w-[{{ settings.page_width }}px]">
  Content goes here
</div>

When viewed in the browser, it correctly shows:

<div class="max-w-[1400px]">Content goes here</div>

However, Tailwind does not apply the style because the class max-w-[1400px] was not present when the CSS was compiled.

Here’s what works instead:

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

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

My question is:

Can Tailwind apply styles for class names that include Liquid variables like {{ settings.page_width }} without needing to manually safelist every possible value in tailwind.config.js?

Or would it be better to mix Tailwind with a standard CSS file for these dynamic variables?

Thanks for any help!

2

Unfortunately, you’ve hit one of the fundamental limitations of utility-first frameworks like Tailwind. The compilation happens at build time, so any dynamic values generated by Liquid afterward won’t be recognized by the compiled CSS. I’ve been working with Shopify themes for about three years now, and honestly, the CSS custom properties approach you mentioned is the most reliable solution. What I typically do is create a dedicated section in my base template that outputs all the dynamic values as CSS variables, then use those throughout my Tailwind classes with arbitrary value notation like w-[var(--page-width)]. Another approach that works well is using inline styles for truly dynamic values while keeping Tailwind for everything else. It’s not as clean but it’s pragmatic. You could also consider using Tailwind’s @apply directive in your CSS files to create utility classes that reference your CSS variables. The safelist approach you mentioned becomes unwieldy quickly, especially with Shopify’s range of possible setting values. Stick with CSS custom properties - it’s the most maintainable solution for this use case.

3

The approach you discovered with CSS custom properties is actually the industry standard for handling dynamic values in Tailwind CSS environments. I’ve encountered this exact issue multiple times when building Shopify themes, and after trying various workarounds, the CSS variables method consistently proves most effective. The key insight here is that Tailwind’s compilation process is static by design, which creates an inherent conflict with Liquid’s runtime variable processing. Rather than fighting this limitation, embrace the hybrid approach. What I found helpful is establishing a consistent pattern where all dynamic values from Shopify settings get converted to CSS custom properties in a centralized location, typically in your theme’s main liquid layout file. This creates a clean separation of concerns and makes your codebase more maintainable. The arbitrary value syntax in Tailwind works perfectly with CSS variables, so you can still leverage Tailwind’s utility classes while accommodating dynamic content. Some developers attempt complex build processes to pre-generate classes, but this adds unnecessary complexity and maintenance overhead compared to the straightforward CSS variables solution you’ve already implemented.