Error when using tailwind css in umbraco template

Questions
1

Dear Umbraco support,
I’m getting an error message when using tailwind css in my umbraco template. Do you have any suggestions how to fix it? I purchased a template that uses tailwind but the tailwind css had been exported to a style.css. So I needed to make some modifications so I linked to the tailwind ‘CDN’ link. So this is what I have in my template header.

And the error I get when I try to preview the template is this:

An error occurred during the compilation of a resource required to process this request. Please review the following specific error details and modify your source code appropriately.

  • The name ‘tailwindcss’ does not exist in the current context

  • The name ‘alpinejs’ does not exist in the current context

  • The name ‘click’ does not exist in the current context

  • The name ‘click’ does not exist in the current context

  • The name ‘click’ does not exist in the current context

  • The name ‘click’ does not exist in the current context

  • The name ‘click’ does not exist in the current context

According to chatGPT, razor code interpretes ‘@’ as C# code so I need to escape the @ ?

Any suggestions let me know. Or do I need to install tailwind a different way?

A computer screen displays the code for a "MasterArticle" template in a programming environment, highlighting various script and link elements within the HTML structure. (Captioned by AI)
A computer screen displays the code for a "MasterArticle" template in a programming environment, highlighting various script and link elements within the HTML structure. (Captioned by AI)1887×941 310 KB

A browser window displays an error message indicating that a compilation error occurred because 'tailwindcss,' 'alpinejs,' and 'click' do not exist in the current context, specifically in the file 'masterArticle.cshtml.' (Captioned by AI)
A browser window displays an error message indicating that a compilation error occurred because 'tailwindcss,' 'alpinejs,' and 'click' do not exist in the current context, specifically in the file 'masterArticle.cshtml.' (Captioned by AI)1909×496 115 KB

The image shows a webpage from the Tailwind CSS documentation, specifically the "Installation" section focusing on using Play CDN for development, illustrating how to add the necessary script to the HTML file and begin utilizing Tailwind's utility classes. (Captioned by AI)
The image shows a webpage from the Tailwind CSS documentation, specifically the "Installation" section focusing on using Play CDN for development, illustrating how to add the necessary script to the HTML file and begin utilizing Tailwind's utility classes. (Captioned by AI)1891×909 168 KB

2

Ok its working now after I put in a @@

The image shows code snippets and instructions on how to update Alpine.js attributes, suggesting a search and replace strategy for HTML and JavaScript files. (Captioned by AI)
The image shows code snippets and instructions on how to update Alpine.js attributes, suggesting a search and replace strategy for HTML and JavaScript files. (Captioned by AI)1258×893 61.3 KB

1 Like
3

You have to use double @.

1 Like