The community member who posted the original post discovered a way to use TailwindCSS by wrapping the Tailwind CDN inside an HTML Embed element and turning on "Run Scripts on Canvas". They wondered if there are any downsides to this method.
In the comments, other community members provided the following feedback:
- Using a link tag instead of a script tag is recommended, as the biggest downside is losing the ability to see the values in the style panel and with any custom CSS from the HTML Embed.
- Utility-based styling has the downside of having to repeat the same classes over and over, and a combination of semantic tokens and some utility tokens is recommended.
- The community members also mentioned that Webstudio has the ability to natively create utility-style tokens, and that a copy-paste feature to autoconvert to Tailwind is planned but not yet available.
Hello everyone, I just found out that we can use TailwindCSS by wrapping Tailwind CDN inside the <script> tag, put it in "HTML Embed" element and turn on "Run Scripts on Canvas". I can config tailwind and stuff but I wonder if there is any downside to this method.
last but not least - utility style tokens can be done natively with webstudio, somebody has to replicate the most popular tailwind namings and provide it as a style guide/project/template
