Online Compilation Tool for Tailwind

[timotius02]

Are there any online compilation tools that would allow me to paste html that has tailwind classes and get the output styles needed to render it correctly?

I'm thinking of teaching beginner html/css/js and later on a react class and I want people to be comfortable with the naming conventions that tailwind uses but I don't want them to skip the process of looking at raw css and I don't want them to mess around with a build step just yet.

I'm asking here because I'm not even sure what to call it search for really (online tailwind compiler? converter? playground?)

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

I think the best solution for your use case sounds like our playground: https://play.tailwindcss.com also available via https://tailwind.new or https://tailwindcss.new

This allows you to write HTML and Tailwind in the browser and see the live result without installing any tools on your machine. You can also save your work and it would generate a URL for you that you can use.

Another very nice addition is that you get code completions for all the available classes.

Hope this helps!

[timotius02]

So the thing is that I'm not trying to use tailwind, just want something that can spit out plain-ol-css from tailwind classes that I can then copy to an html/css/js project. I've looked at tailwind play but I can't get the underlying css, it seems more of a tool to show off tailwind.

One parallel is something like the repl for svelte, specifically the panel that shows the generated JS output.

I looked around some more to see if something like that exist, but if not I might hack something together.

[ElvarP]

Did you find a solution?

[cgtarmenta]

As @RobinMalfait said, https://play.tailwindcss.com/ is your best shot

[ElvarP]

My bad! I did not notice that tab.

[heyjmac]

Yes! This link takes you to a tool that output the css you need No login required
https://tools.webcrumbs.org