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?
You can use PurgeCSS to remove all the unused CSS and that's what Adam Wathan recommends as well I believe
Show HN: Tailwind.run – An Online Playground for Tailwind CSS
11–20 of 97 posts
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#12Hey everyone! I tweeted a video of the app in action here: https://twitter.com/utkarshkukreti/status/115832371651577856... I made this TailwindCSS Playground over the last two weeks. I really like the core idea of Tailwind and the productivity gains it gives and would like to build more stuff with it in the future! Features: * Compile custom @tailwindcss config and CSS in the browser * Live preview in 5 screen sizes…
I love when in-browser editors support vim keybindings :)
thanks!
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#13Hey everyone! I tweeted a video of the app in action here: https://twitter.com/utkarshkukreti/status/115832371651577856... I made this TailwindCSS Playground over the last two weeks. I really like the core idea of Tailwind and the productivity gains it gives and would like to build more stuff with it in the future! Features: * Compile custom @tailwindcss config and CSS in the browser * Live preview in 5 screen sizes…
I love when in-browser editors support vim keybindings :) thanks!
I _had_ to add it -- I can't write code without vim keybindings!
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#14This is awesome! I started using Tailwind for a project. I was a concern with the relatively big size of the framework on a landing page[1]. Then I used purgeCss to only leave the css classes that I used and remove all others. That solved the size issue. [1] https://uxeranalytics.com/
Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#15This is awesome! I started using Tailwind for a project. I was a concern with the relatively big size of the framework on a landing page[1]. Then I used purgeCss to only leave the css classes that I used and remove all others. That solved the size issue. [1] https://uxeranalytics.com/
Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?
Why not nodejs? Just curious
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#16Cool! 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? Does anyone have experience with both (or some other micro class framework) who can tell me how they compare?
[1] https://acss.io/
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#17I 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!
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#18Earlier quoted context omitted.
Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?
Why not nodejs? Just curious
Because it's yet another full ecosystem with lots of dependencies where I have zero knowledge and experience.
For example, all those packages say "npm install packagename" to install, but it didn't work for me. It seems I have to (sometimes?) do a "npm init" first. No install instructions ever tell you that.
I'm sure when you're in the ecosystem, that's a given. For me it's hurdle after hurdle.
That's why I named Go and Ruby as examples. The former because you usually get a standalone executable, the latter because I already have that toolchain installed, and I know how to navigate it.
Unfortunately, everything in webdev is now node.js. Just look at any CSS framework docs (including Tailwinds, which I really like): it's an endless stream of pre-processors and post-processors, multiplied with all kinds of ES versions, Babel, yarn-or-npm, this build tool or that. It just doesn't end.
Rant over. :-)
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#19Cool! 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 end you can add as much custom CSS as you want, written as utilities or not, but the point is to quickly get to a reasonable design.
Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS
#20Cool! 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…
This is what I use to remove unused CSS from Tailwind, works great!