Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Tailwind.run – An Online Playground for Tailwind CSS

tailwind.run

Post reply on HN
Print view View original

1–10 of 97 posts

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#2

Post by utkarshkukreti »

Hey 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

* Class name autocompletion with CSS definition preview

* Save code online or export .zip

* Vim/Emacs/Sublime key bindings + Emmet

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#3

Post by Numberwang »

utkarshkukreti wrote: post #2

Hey 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…

It looks great. Do you know of any good tutorials for Tailwind to accompany the site?

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#4

Post by utkarshkukreti »

Numberwang wrote: post #3
utkarshkukreti wrote: post #2

Hey 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…

It looks great. Do you know of any good tutorials for Tailwind to accompany the site?

Adam Wathan (creator of Tailwind CSS) is working on an excellent screencast series about using Tailwind: https://tailwindcss.com/screencasts. I highly recommend watching it.

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#7

Post by adriansky »

This 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/

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#9

Post by cygned »

M4v3R wrote: post #8

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?

Yes you can use a configuration file to build it (we integrated it into webpack). The config allows to disable features completely or only include certain versions of them (hover, responsive, focus, ...)
Post reply on HN