Tails Export without TailwindCSS output file.
Hey guys,
is there any chance to get a TailwindCSS file that is compiled when using the Tails editor? It seems that all the CSS is within the HTML file.
Best, Daniel
Hey Daniel! 👋
Great question, Tails gives you HTML with all the Tailwind CSS utility classes applied directly in the markup (like bg-gray-100, text-lg, etc.), but it doesn't generate a separate Tailwind CSS file. That’s because Tailwind is a utility-first framework, meaning the styling comes from those class names in the HTML, not from custom CSS rules in a separate file.
This is actually how Tailwind CSS is designed to work, instead of writing your own CSS, you compose your design using small utility classes right in your markup.
Hope that clears it up! 🚀
- Bobby
Thanks for answering to swiftly. I see that makes somewhat sense, I was just surprised since TailwindCSS documentation descreibes a build process with an "output.css" file. I am wondering if this is truly beneficial or not. I'll keep playing around, thanks for taking the time!
Okay follow-up, how does the exported HTML call on AlpineJS without the AlpineJS file enqueued?
Hey!
I am wondering if this is truly beneficial or not.
Yes, it is supper beneficial, it generates a custom output file that includes only the CSS you actually need, which keeps your final file lightweight and optimized for production rather than including all of the Tailwind CSS classes that exist out there.
how does the exported HTML call on AlpineJS without the AlpineJS file enqueued?
The exported HTML from Tails doesn't include the AlpineJS script by default. You’ll need to manually include it yourself, usually by adding this line inside the <head> or before the closing </body> tag or if your project already uses Alpine via npm:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
Tails assumes you're pasting the component into a project where Alpine is already loaded, so it keeps things minimal.
- Bobby