UI3 & Tailwind v4 Safelisting
Hello Kapa,
I would like to use this syntax in may .css available in Tailwind v4 to use the safelist system :
But I have this error :
ERROR Pre-transform error: @source cannot have a body. 3:51:42 PM
Plugin: @tailwindcss/vite:generate:serve File: D:/Projects/hotpot/app/assets/css/tailwind.css
Plugin: @tailwindcss/vite:generate:serve File: D:/Projects/hotpot/app/assets/css/tailwind.css
2 Replies
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not contain explicit information about using the advanced safelisting syntax with the
@source directive in Tailwind CSS v4, such as:
or about the specific error:
The documentation does mention the use of the @source directive to specify additional files or directories for Tailwind to scan for class names, especially when using markdown or other non-standard sources, but it only shows usage like:
There is no mention of using @source inline(...) or any advanced pattern-based safelisting in the provided Nuxt UI or Tailwind v4 documentation. The error message you are seeing suggests that the syntax you are trying to use is not supported by the current implementation of the @source directive in Tailwind v4 as integrated with Nuxt UI Getting Started: Theme.
If you need to safelist classes, you may need to use the standard approaches provided by Tailwind CSS, such as specifying safelist patterns in your configuration (if supported), but the knowledge sources do not provide details on this for Tailwind v4 with Nuxt UI 3.
For now, I recommend following the documented usage of @source as shown in the Nuxt UI docs and consulting the official Tailwind CSS documentation for any updates on advanced safelisting patterns Getting Started: Theme.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.