2

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.

Improve this question
1
  • Don't know anything about shopify-liquid, but looks like the settings are accessible via a JSON file. Maybe you can use a script to generate the values into CSS custom properties (like what you did above manually), and perhaps with a prefix liquid-? Then, tailwind can use them as max-w-[--liquid-page-width]. Though at this point I would prefer to just mix Tailwind with the vanila html style. Commented May 2 at 14:28

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Amazing thank you for the answer. I wasn't sure if it was against best practice to still have other css files when using tailwind. Thank you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.