It looks nice, but exported CSS is 880 kB unminified (670 kB minified). Yikes. Is there a way to strip out unused portions of it?
Show HN: Tailwind.run – An Online Playground for Tailwind CSS
21–30 of 97 posts
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#22Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don't use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? D…
We use PurgeCSS[0] as part of our build process to remove all of the Tailwind classes that weren't used. That gives our developers the freedom to work/experiment with everything Tailwind has to offer while spitting out super tiny and optimized CSS files.
I just checked one of our more recent projects and the resulting CSS is 2.4KB, about half of which is actually an SVG that's used in a background.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#23Tailwind is quite nice for raw prototyping. I'm still not how it compares to basscss. I would love a pure scss version of tailwind.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#24Wow, this is awesome, I have always felt comfortable using css utilities like px-2, text-center, or border-0, this goes next level, super interesting.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#25I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!
Yeah at a first glance this looks like putting style in html except by using classes rather than `style` attribute. Cool for prototyping I guess.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#26I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!
> create more than one theme for the same HTML!
Who does this? It sounds like an exercise in pain and futility.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#27Love it! I'm using Tailwindcss on a project now, and this tool will come in pretty handy!
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#28I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!
> create more than one theme for the same HTML! Who does this? It sounds like an exercise in pain and futility.
Imagine it more from the perspective of a component altering it's style based on some sort of global "state". That global state could simply be a class on the body like "page-contact", so your css can alter itself much easier if the style isn't defined up front in a list of prescriptive class names.
It's less theming in the sense of css zen garden and more encoding variations of style in css instead of relying on more class names.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#29Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don't use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? D…
I have no experience with Atomic CSS, but I think an important part of Tailwind is that it simultaneously serves as a design system. By having relatively limited options for, let's say, font sizes, you don't spend a lot of time making micro adjustments. The author of Tailwind also co-authored the Refactoring UI book that pretty much explains this philosophy that the framework was built to support. Of course, in the e…
You have to strike a balance between reusability + a central base of the design/theme which defines the consistent look and feel on one hand with the composable LEGO style building blocks which Basscss https://basscss.com/ and Tachyons http://tachyons.io/ and other similar functional css frameworks made popular.
The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change.
Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ where customization of base values is handled with CSS in JS.
The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/
Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#30Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don't use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? D…
shameless plug: https://github.com/leeoniya/dropcss
faster and more thorough than PurgeCSS (and all others).
specifically for handling TailWind's weird classnames:
https://github.com/leeoniya/dropcss#special--escaped-sequenc...