0

I'm using TailwindCSS v4.0.x, and @source inline safelist doesn't work with either the CLI, PostCSS, or even the Vite plugin:

@import "tailwindcss";
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

With all three plugins, I get the following error message:

[@tailwindcss/vite:generate:build] '@source' paths must be quoted

It doesn't work even with the example from the documentation. What is the correct solution?

Reproduction:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
</style>

<div class="text-3xl bg-red-100 hover:bg-red-900">
  Hello World
</div>

Although the browser plugin doesn't give a specific error message in the console, it's clear that the classes aren't being applied - neither text-3xl nor the bg-red-50 or hover:bg-red-900 added to the safelist.

Improve this question

1 Answer 1

Reset to default
1

The syntax you want to use was only introduced in v4.1, so earlier versions don't include it.

From TailwindCSS v4.1.0 onwards

With this feature, now have the ability to include critically important classes in the compiled CSS using a syntax similar to the safelist property from v3.

# Force update to TailwindCSS v4.1 with CLI plugin
npm install tailwindcss@^4.1 @tailwindcss/cli@^4.1

# Force update to TailwindCSS v4.1 with PostCSS plugin
npm install tailwindcss@^4.1 @tailwindcss/postcss@^4.1

# Force update to TailwindCSS v4.1 with Vite plugin
npm install tailwindcss@^4.1 @tailwindcss/vite@^4.1

Reproduction in Play CDN:

<!-- At least v4.1 is required! -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
</style>

<div class="text-3xl bg-red-100 hover:bg-red-900">
  Hello World
</div>

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

Comments

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.