tailwind-cssshopifyliquidtailwind-css-4shopify-liquid

Can Tailwind CSS work with dynamic Shopify liquid variables?

I'm relatively new to Tailwind and using it with a custom Shopify theme. I installed Tailwind using the Tailwind CLI, and all static classes work fine.

However, I'm having trouble when trying to use Liquid variables inside Tailwind utility classes. I understand that Tailwind compiles before Liquid runs, but I want to clarify whether there's a better way to handle this.

The code that doesn't work, but what I am trying to achieve:

<!-- I tried dynamically setting max-width with a liquid variable -->
<div class="max-w-[{{ settings.page_width }}px]">
  Content here
</div>

In the browser, this correctly renders as:

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

…but Tailwind doesn’t apply the style because max-w-[1400px] wasn’t in the source when Tailwind compiled the CSS.

What works instead:

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


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

My Question:

Is there any way to get Tailwind to apply styles for class names that use dynamic Liquid values like {{ settings.page_width }} — without manually safelisting every possible value in tailwind.config.js?

Or would I need to use a mix of tailwind and a 'vanilla' css file to handle those variables?

Thanks in advance.

Solution

  • TLDR: Use CSS variables within TailwindCSS classes.

    Problem

    The problem with the example mentioned in the question is that TailwindCSS does not generate class names and CSS code at runtime. That would result in too much unnecessary compilation. TailwindCSS runs during development on every code update and once during the build process.

    Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.

    Solution

    To make what you want in your second example work, you need to declare the CSS variable in the :root, and then use that fixed CSS variable name instead of the dynamic value. This is a fixed reference point that persists through the build - even though its actual value will only be known at runtime. So just use CSS variables within TailwindCSS classes.

    TailwindCSS v4

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

<div class="max-w-(--page-width)">
  Content here
</div>

    TailwindCSS v3

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

<div class="max-w-[var(--page-width)]">
  Content here
</div>

    Nevertheless...

    Even when using TailwindCSS, you can freely use "vanilla" CSS - the two are not mutually exclusive. In fact, you can even use TailwindCSS variables within your own native CSS.

    Safelist in TailwindCSS v4

    I'd like to point out—since you're referring to tailwind.config.js but also mentioned that you're using TailwindCSS v4 - that starting with v4, this configuration file is no longer used by default. Instead, a CSS-first configuration approach was introduced.

    Even if you still use tailwind.config.js in v4, the safelist key is not available to you. Support for adding certain classes to the safelist using the @source inline directive in CSS-first mode was only introduced in v4.1, and even then, it's recommended to use it as sparingly as possible.