
Show HN: Tailwind.run – An Online Playground for Tailwind CSS - utkarshkukreti
https://tailwind.run
======
Etheryte
While semantic styling has been around for quite a while in different shapes
and forms, this is essentially the same as inlining all of your styles in a
style attribute on every element, albeit just a bit shorter to write.

It's an interesting idea to entertain as a thought, and some utility classes
certainly hold value in general, but I don't see how you would ever reasonably
want to use this in a project. It has all the same drawbacks as writing inline
styles on elements, not to mention the large size.

Say you have a number of views and decide (or a client decides) you want all
of the buttons to have a bit more padding. If anything else happens to
completely accidentally also use the same padding class you're always left
with manually checking every single instance just for a small change like
this.

~~~
mattferderer
The first thought everyone has when seeing it is what you described, including
myself.

I suggest trying it out & reading more about it. It's the only way utility CSS
frameworks like this seem to click.

In my opinion, Tailwind works best when being used to create template
components. In your button case you would just modify your reusable button
component or the reusable base button component if you have multiple button
components.

You get the best of all worlds.

* You avoid writing a lot of CSS.

* You don't have to worry about thinking of CSS class names or name pollution

* I find it faster & easier to style components with a utility CSS framework in something like Storybook than it is with CSS.

* I recommend adding a plugin to your editor to help with the names of Tailwinds classes. VS Code has a couple that will suggest the right class name based on what you type.

~~~
Etheryte
You get all of those benefits without any of the downsides by using any other
modern styling solution, for example scoped styles and scss. The arguments
against this solution far outweigh the arguments for it. You're free to
disagree, of course.

~~~
adamwathan
Scoped styles and SCSS do not prevent you from having to come up with
unnecessary names for things like utilities do. That's the main benefit in my
opinion. Wasting brain cycles to name arbitrary wrapper divs that only exist
to be a target for layout styles things like ".image-card-content-wrapper" is
a completely unnecessary step in the UI development process.

Using utility classes to build a UI is much more like building something with
SwiftUI, where no one seems to argue about this silly "separation of concerns"
thing we talk about on the web.

~~~
Etheryte
Using SCSS and using some utility classes isn't in any way mutually exclusive.
If anything, it's a lot easier to mix and match. The argument isn't against
having utility classes/mixins/extensions in general, but against relying on
them solely.

I'm still not convinced — using only utility classes has very clear downsides,
while using what's reasonably one of the most common approaches in the
industry right now avoids those downsides while also providing additional
benefits.

~~~
mattferderer
I don't think you can "only use utility classes". I think they cover 90%+ of
your CSS though. I apologize if that came across as the argument I was making.

Yes, you probably will need to create some custom classes from time to time.
Ideally those might be done in a utility fashion though.

------
dinkleberg
I'm absolutely loving using Tailwind for my new projects. It makes it so easy
to prototype and build out nice designs. Honestly I have never felt so
productive when it comes to designing pages.

There is however one thing that prevents me from using it for everything and
I'm curious if anyone knows a solution for this. If I am pulling a chunk of
rich text from a CMS/backend/whatever, how can I style this?

I tend to use Django for my backend, so in my template files I just put in a
chunk like <div class="container">{{ body }}</div>. If that chunk has h2,p,
etc. none of those are getting styled.

In normal css I could just define what those h2, p, etc look like under a
specific class. But besides using some js magic to inject those classes, I'm
at a loss.

~~~
iandinwoodie
I solved this issue for myself last night using CSS selectors. My goal was to
replicate Github Flavored Markdown styling using Tailwind on Hugo generated
html. Here is the repo for the stylesheet for anyone who is interested:
[https://github.com/iandinwoodie/github-markdown-
tailwindcss](https://github.com/iandinwoodie/github-markdown-tailwindcss)

The generated content is wrapped in a div with the class "markdown" (defined
in the repo above). So it looks like: <div class="markdown">{{ .Content
}}</div>

I wrapped up the stylesheet around 2AM this morning, but I plan on expanding
the README and un-nesting the class (it was nested for postcss-nesting).

I am just starting a personal site and it is still very much under
construction, but I do have a Markdown example page publicly available that I
have been using to test the styles. Here is the link in case anyone wants to
take a look at the end result: [https://iandinwoodie.github.io/blog/markdown-
syntax-guide/](https://iandinwoodie.github.io/blog/markdown-syntax-guide/)

~~~
dinkleberg
Very cool, thanks for sharing the link. I think this is how I'll do it as
well.

~~~
adamwathan
Creator of Tailwind here, that's exactly what I would recommend too.

Here are the markdown styles for my own personal website for example:

[https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7...](https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7f81f35c)

------
utkarshkukreti
Hey everyone!

I tweeted a video of the app in action here:
[https://twitter.com/utkarshkukreti/status/115832371651577856...](https://twitter.com/utkarshkukreti/status/1158323716515778560)

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

~~~
vcavallo
I love when in-browser editors support vim keybindings :)

thanks!

~~~
utkarshkukreti
I _had_ to add it -- I can't write code without vim keybindings!

------
bbmario
I 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!

~~~
jasim
Tailwind makes it very easy to change theme by changing just a single
configuration file: [https://tailwindcss.com/#designed-to-be-
customized](https://tailwindcss.com/#designed-to-be-customized)

It is very liberating to use Tailwind instead of creating unique CSS classes
for every div in a page. The code is much more maintainable - in a single
stroke Tailwind gets rid of selector specificity issues, design inconsistency,
and naming woes.

From a programming perspective, the conventional style of "semantic" CSS
classes creates deep and fragile coupling between markup and CSS. It goes
against everything good code is supposed to be - when you change the structure
of the HTML you're forced to change the CSS, and if you truly use the power of
CSS selectors, then modifying CSS becomes a difficult enterprise: one change
can create multiple unrelated changes at a distance.

Tailwind solves all this, with just two downsides: until you spend a few hours
mucking with it, the markup look will look unwieldy, and you have to be ready
to really think about semantic CSS and "separation of concerns" dogma we've
taken for granted for so long.

~~~
bbmario
I'm looking at the example: [https://tailwindcss.com/docs/utility-
first](https://tailwindcss.com/docs/utility-first)

So, if I'm making a theme, and I want a different color for the text, I have
to replace "text-gray-900" with my hex code for purple?

Also, what if my theme is about making the design more compact, or increasing
density? How do I customize thousands of elements with different combinations
of class="ml-6 pt-1"?

Oh, and don't get me started on "bg-white rounded-lg". God forbid your theme
wants squared boxes on black background.

~~~
jasim
Don't use `text-gray` if you're building an app that needs to be themed like
that. Instead use `text-secondary` or a similar name that you'd otherwise use
in a themeable system. Tailwind lets you define _every_ single design token in
the system and comes with zero opinions there.

If you want to change density of the design, you can change the spacings
centrally in the configuration itself. But if you need a non-proportional
change, then it isn't any different than BEM+SASS environment where you'd have
to go into every CSS class and make the change. I think it is even better than
BEM here because you only need to change classnames in HTML, which is co-
located with the style, and it doesn't cause cascading changes due to
specificity etc.

To me the opinions you hold seem to come from not having tried it in good
faith, which was how I used to judge functional CSS as well. If the current
CSS style you use serves you well, that's fine you don't have to explore. But
if you've wondered whether there is something wrong with the way we do CSS
today, then Tailwind could be an eye-opener.

------
KevinNTH
Awesome project. I am a big fan of Tailwind CSS to and I use it for my current
project [1]. I will definitely make use of Tailwind.run() to as a playground
to design components! Great job!

[1] [https://gekri.com](https://gekri.com)

~~~
lauritzsh
Your project is a bit similar to mine and I am very curious about how you use
Blockstack.

I have been hosting a CouchDB instance myself on a VPN but considered moving
to Firebase while prototyping since it seems easier to use. Considering
Firebase since it offers offline-first support. However, only today I was made
aware of Blockstack and I have seen it mentioned multiple places.

How do you like working with Blockstack and what made you choose it? Does your
app work offline? Does it synchronize automatically between devices?

I also want to take data privacy very seriously, since I am dealing with
personal and sensitive data (just like a person's journal is very sensitive to
them).

~~~
KevinNTH
Blockstack is very easy to get started with and provide user authentication
and encrypted data storage out of the box.

About offline-mode, I am about to implement it by my side as this feature is
not part of the Blockstack SDK for now.

I am happy that you are taking data privacy very seriously and I guess
Blockstack is a good solution to go.

------
dlbucci
Cool! 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/](https://acss.io/)

~~~
thijsvandien
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.

~~~
dmix
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/](https://basscss.com/) and Tachyons
[http://tachyons.io/](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/](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/](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.

------
meerita
Taiwind is nice.

For those interested in Functional CSS, I've made a Scss/Sass framework too,
with different approach.
[https://github.com/meerita/utilcss](https://github.com/meerita/utilcss) here
is the article related [http://minid.net/2019/04/07/the-css-utilitarian-
methodology/](http://minid.net/2019/04/07/the-css-utilitarian-methodology/)

Once you start using funcional CSS, you don't want to go back.

~~~
holler
> We have been programming CSS for a long time wrong.

Have we though? I firmly disagree with the premise. I agree that like anything
else, css can be abused and misused, and the example cited of Newspapers fits
the narrative perfectly. I've worked at a major regional Newspaper in the past
and their website was one of the worst sites I've seen. The lead developer at
that time (10 years ago) switched to using a functional/semantic css pattern
much like tailwind/UCSS, and I found it to be terrible.

Any experienced FE developer should and will know css, whereas they will not
know some random css framework dsl, nor should they have to learn it.

Most modern js frameworks are moving towards web-components and scope css to a
component, which eliminates much of the past structural ambiguity and reasons
for seeing e.g. !important (if implemented properly).

The argument about file size is not strong imo. You are trading css file size
for html file size. How many modern web apps are slow due to their css file
size? I doubt many. The Newspaper websites were always slow due to churn &
many people touching the code, often with lower experience, leading to
spaghetti.

If it works for a team then more power to them, but I'm sticking with css :)

~~~
meerita
Hi, yes, the premise is a bit sensationalist. But any FE experienced will not
work for too long on the projects. The projects I've surveyed and work for,
changed personnel all the time. I didn't choose the projects to fit my
narrative, I did it because most projects die within 5-10 years. Few projects
live longer than that, and newspapers are great example for the research. The
codebase is really hard to maintain as business grows. That's why I firmly
believe, it is not the developer, it's the metodologies they use: they force
you to do technical debt, bad arquitectures, etc.

Of course functional CSS is not the solution to all, there are situations
where, componetize everything will make more sense. But the more you work on,
the more useful you see it becomes.

The file size is strong for one reason: most connections to CSS resources are
blocked by the queue of priorities, HTML files are downloaded between
12ms-100ms range and that means it's already done, plus, if you use reactive
HTML, things speed up even more. Most of the CSS made with BEM or other
metodologies don't end up with that much HTML saving too, they're quite
verbose. You cannot control the verbosity since it's human made. With UCSS or
other funcional frameworks, you can control the verbosity of the outputs, etc.

------
peternicky
I played around with tailwind on a small project and found it more difficult
than I expected. I think part of the problem is that when using tailwind or
other similar frameworks, the conceptual model and workflow is different and
requires some cognitive overhead to use effectively and efficiently.

Perhaps one day I will try again but personally I want to minimize extra stuff
to learn, especially related to css and styling.

------
cygned
The major selling point from my point of view, and the reason why I switched
from Tachyons, are components. With that, one can easily compose styles.

    
    
      .btn {
        @apply cursor-pointer bg-blue border-blue-darker text-white;
      }
    

When developing a web app, this allows you to have a central style
configuration and reusability.

------
keb_
Awesome, might just give Tailwind a shot finally. Thanks for the great work. I
typically use [https://basscss.com/](https://basscss.com/), but been meaning
to checkout larger Atomic CSS frameworks like Tailwind and Tachyons.

Aside from the benefits of "functional CSS" that others have mentioned, one
thing I really love about it is I don't have to constantly be looking up CSS
rules or properties; I just reference the docs of whatever framework I'm using
to get what I want. You might say I could do this with Bootstrap as well --
and yeah, I can, but I much prefer the piece-meal approach of atomic CSS. The
times I've used Bootstrap, I found myself fighting their styles constantly, or
giving up and resulting with a site that looks like every other Bootstrap
page.

------
spectramax
CSS has one major drawback - that is, there is no way to compose more complex
objects from basic ones.

Say, I have a class:

    
    
      foo {
         color: #FF0000;
      }
    

I want to now apply this class to another class:

    
    
       bar(foo) {
          background-color: #000000;
       }
    

I want to be able to inherit from foo, but I can't do that and that's why we
have these shenanigans of composable UI frameworks... there are some
advantages to doing everything in the HTML but now we have repeating patterns
in the HTML, such as in the OP's link

    
    
        <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Tutorials</a>
        <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Plugins</a>
        <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Features</a>
        <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Blog</a>
    

which is not extensible and creates duplicate code. You'd still have duplicate
class names but I just have to change it once in the css instead of N
different places in HTML.

~~~
cuddlecake
TailwindCSS does have that:

[https://tailwindcss.com/docs/extracting-
components](https://tailwindcss.com/docs/extracting-components)

------
foobar_
Tailwind is quite nice for raw prototyping. I'm still not how it compares to
basscss. I would love a pure scss version of tailwind.

------
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/](https://uxeranalytics.com/)

~~~
Tomte
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?

~~~
leeoniya
shameless plug:
[https://github.com/leeoniya/dropcss](https://github.com/leeoniya/dropcss)

it's still written in JS but there is nothing node-specific there. it easily
runs in a browser, or any js environment.

~~~
Tomte
Thanks a lot! It looks good.

------
M4v3R
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?

~~~
oskarp
See [https://tailwindcss.com/docs/controlling-file-
size/](https://tailwindcss.com/docs/controlling-file-size/)

------
whammywon
Awesome! I haven't used Tailwind for any big projects (yet!) but I _have_
tinkered with it, and I really like it.

Good work!

------
thrownaway954
That are some bloated classes. it's no different in inline styling everything
to me. I really don't see the benefit in doing it this way. Can you use
tailwinds and scss to create actual styling rules? No that is something I
could get behind.

------
sideproject
Been really productive using Tailwind myself. Recently re-launched my
SideProjectors site
([https://www.sideprojectors.com](https://www.sideprojectors.com)) and was
able to get my CSS developed very fast. I have most of Tailwind classes in my
head now, so I hardly look up their site for references. Being able to quickly
edit the UI without much thinking is very refreshing.

------
woile
Wow, 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.

------
GaryNumanVevo
I recently tried learning Tachyons, I couldn't get the hang of it, until I was
on the train with no internet and I only had an example blog site loaded, and
the table of styles. I was able to put together my new website theme in an
hour.

------
blorenz
Very nice! I'm hoping that this can be a catalog and discovery tool in the
future where we can showcase Tailwind components. Looking forward to it!

------
tunedmystic
Love it! I'm using Tailwindcss on a project now, and this tool will come in
pretty handy!

------
recursive
I can't tell from this what Tailwind actually is, or how to use it.

~~~
icxa
"A utility-first CSS framework for rapidly building custom designs."

It's an excellent description in of it's own, but if I were to attempt to put
it in other terms, it allows you to compose css components and classes out of
other smaller, essentially one liner css classes, while maintaining a
consistent styling and spacing across the different utilities, which you
define up front using the config but also comes with good defaults out of the
box.

It is excellent and now my preferred method for hacking up a new site. It also
helps you think about your design system overall so now I find myself paying
attention to things up front I would normally wouldn't and it ends up saving
me time in the long run. It also pairs really well with the excellent
Refactoring UI book.

------
smnplk
Do i need to be an expert in CSS first to use this ?

