
Tailwind UI - alt3red
https://tailwindui.com/
======
luketheobscure
Tailwind is fantastic. Everyone goes through the initial shock of complaining
about the "ugly markup", the violation of separation of concerns, etc. But
I've worked in enough large codebases to tell you that the ones that use
Tailwind have a more consistent UI, with much less handwritten CSS. Bootstrap
sites inevitably devolve into a soup of custom CSS and Bootstrap framework.
You end up with lots of verbose class declarations like "btn btn-link btn-
primary btn-xs danger", but you still need lots of little `margin-left: 3px`
rules to push and pull things into place. Most other CSS libraries suffer the
same fate.

On the other side of things, sites without a framework generally opt for a
convention like "BEM" (block-element-modifier). BEM seems to be the worst of
both worlds, both abandoning the "cascading" part of "Cascading Style Sheets"
and still requiring verbose class names!

I've been working on a Tailwind project for the last six months with a team of
around 8 people. We did a bunch of initial work getting the Tailwind config
just right and some base styling in place, but since then we've barely written
a line of CSS. Yes, the templates are verbose, but they are also incredibly
readable and easy to reason about what classes are doing what. On-ramping new
people has been easy as well, since they don't have to learn some custom
system, instead they can just read the docs on the Tailwind site.

~~~
CGamesPlay
I agree with you about Tailwind, but had to call you out on this:

> BEM seems to be the worst of both worlds, both abandoning the "cascading"
> part of "Cascading Style Sheets" and still requiring verbose class names!

BEM doesn't abandon the cascade (or really care about it). What BEM is
actually pushing back on is rule specificity. For example:

    
    
      #navbar a { color: blue }
      /* Can't do this, it doesn't change my navbar-submenu colors */
      .navbar-submenu { color: inherit }
      /* Have to do this as a workaround */
      #navbar .navbar-submenu { color: inherit }
    

And now I'm in an arms race with myself over rule specificity.

~~~
have_faith
I think BEM is often misunderstood, it's not immediately obvious to beginners
why it's helpful. Specificity is one problem it helps solve as you mentioned
but the biggest thing for me is it forces you to think about what an element
is and who it belongs to.

If someone writes '.nav a' they're saying "select all links inside of nav",
but what they really wanted to say was "select all nav menu links, and nothing
else", a class like '.nav__link' will never select other links that happen to
be in the nav (CTA buttons, logo links, etc) and will survive markup
restructuring, something like ".nav > ul > li > a' will not survive minor
markup changes as it doesn't express what someone wanted to select in the
first place. I think this way of thinking brings a lot of benefits that most
CSS frameworks don't give.

------
mike1o1
Tailwind has been great and I've been looking forward to this for months. I
fought Tailwind as a concept pretty hard at first, but after hearing Adam and
a few others raving about it I gave it a shot. It takes some getting used to
at first but I can't imagine developing without it anymore.

To me, the biggest benefit of Tailwind and utility classes in general is that
it removes the cognitive overheard of having to think of class names while
designing a new page.

For example, if I'm working on a card and I want some text below the main text
to have a smaller, gray font size. What do I name that class? "card-sub-text",
"card-sub-title"? No - don't even worry about it - "text-sm text-gray-700" and
move on.

Later on, if I end up repeating that combination in a number of places, I have
more context of what that class name really should be, and I can extract the
utility classes to a specific class name.

Really powerful stuff that has helped to increase my velocity quite a bit.

~~~
tomc1985
How is that any different from setting CSS in the style attribute of your tag?
What happens when you need to update all the "text-sm text-gray-700" to
something else?

Seems like a step backwards at worst and identical to Bootstrap/Foundation at
best. Everyone provides class primitives like that

What you're describing offends separation-of-concerns

~~~
mike1o1
Typically the "text-sm text-gray-700" would be a one-off styling while I'm
developing a page or a component, not necessarily something that will be
repeated a hundred times.

If it turns out that later down the line I realize that "every card should
have that size and color for the card title", then I'll pull it out to a
separate class or part of a partial or something like that.

The idea being at that point then I have more context around when and how that
particular section of a component should be displayed, so I have more context
about what I should name the class (i.e. "card-subtitle").

I feel like the documentation explains it fairly well if you're interested in
reading more about it:

[https://tailwindcss.com/docs/extracting-
components#extractin...](https://tailwindcss.com/docs/extracting-
components#extracting-css-components-with-apply)

~~~
pests
My question is why you cant just name the card and then use selectors to style
the title or any other internal styling?

This removes the need to name at all. It can just be .card > h2 or whatever
and there you would do your font-weight and color.

~~~
mike1o1
Because I don't want that cognitive overhead of even thinking about what the
selector should be. Then what if I have another sub-sub text? Do I make that
an h3? An h4? I don't want to have to think about that. I just make it "text-
xs" and move on.

I don't even need to move over to my css file at all - I stay within my
template and stay within my flow.

It seems crazy and counter-intuitive at first, but I find that it makes me a
lot more productive.

~~~
iCarrot
Something to consider: semantic HTML helps with accessibility.

~~~
strokirk
Yes, but class names doesn't affect the semantics of their tags.

------
juretriglav
I've been following this closely. Given the preview with some components
listed it seems exceptionally well made:
[https://tailwindui.com/components](https://tailwindui.com/components)

There are also live demos of the app and marketing pages:

1\. [https://tailwindui.com/page-examples/landing-
page-01](https://tailwindui.com/page-examples/landing-page-01)

2\. [https://tailwindui.com/page-examples/detail-
view-01#](https://tailwindui.com/page-examples/detail-view-01#)

Plus a screencast on how to use it to build these pages:
[https://vimeo.com/393580241/82c6d7c5f6](https://vimeo.com/393580241/82c6d7c5f6)

~~~
rado
Looks good and polished, but that landing page requires 165 KB of CSS,
gzipped. That's, to put it lightly, ridiculous.

~~~
philippbosch
Yes, but that's just because I think for simplicity they created one large CSS
file that is used for all their components and example pages. That's not very
realistic. You're not supposed to do it like this for your own project.
Instead if you use Tailwind CSS and PurgeCSS I'm pretty sure you would end up
with ~10 or 15 kB of CSS gzipped, maybe less.

~~~
chrshawkes
I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is
a waste of time.

~~~
larrywright
If you truly know assembler, C/Python/Ruby/Go is a waste of time.

See how dumb that sounds?

~~~
Nullabillity
Following that analogy, Tailwind is C files that only contain inline assembler
blocks.

Yes, you can check off on your list that you no longer have any .S files. But
did you actually gain anything?

~~~
csande17
I can see it now:

> Most C libraries do too much.

> They come with all sorts of predesigned components like functions and
> structs that might help you move quickly at first, but cause more pain than
> they cure when it comes time to make your program stand out with custom
> behavior.

> Tailwind C is different.

> Instead of opinionated predesigned components, Tailwind provides low-level
> utility macros that let you build completely custom functionality:
    
    
        void main() {
            BEGIN_TAILWINDC
            MOV(RAX, 4);
            MOV(RDI, 1);
            MOV(RSI, "Hello world!\n");
            MOV(RDX, 13);
            INTERRUPT(128);
            END_TAILWINDC
        }
    

And then every Hacker News discussion of Tailwind C would inevitably include a
link to their "Why using Tailwind C is definitely not just as bad as writing
inline assembler" documentation page.

Ooh, and then the creator of Tailwind C would start selling the Tailwind C
Library, with like an implementation of memcpy that you just cut-and-paste
into your program every time you need to copy memory.

------
joaodlf
When I first learned about Tailwind I though "wow this is amazing!", but it
quickly became obvious I was more or less learning another "language", which I
really didn't need when re-entering the crazy world of frontend.

I might reconsider it again once I am more comfortable with what frontend has
become, but that is still quite a bit away.

~~~
ripley12
I had a different experience – Tailwind made CSS a lot more approachable for
me.

A big part of Tailwind's value is that it provides a curated, well-documented
subset of the most important CSS attributes. The utility classes are
consistently and concisely named (unlike many native CSS properties, which
grew organically).

You're totally right that it is _yet another_ abstraction, and that can be
tiring. Personally I found it to be well-designed and transparent enough to
make it worthwhile.

~~~
lsinger
The documentation alone is great — it helped me learn things about CSS I had
been kind of using but had never fully grasped.

~~~
rawfan
100% agree. I learned more about CSS in the Tailwind docs than in all the
years I copy and pasted before starting with Tailwind.

------
atonse
It's really nice, but is there something this pretty for bootstrap?

I literally manage something like 10 different products/websites. And the only
way to stay sane and have some pace with features is to use bootstrap for all
of them (we currently use bootstrap for maybe 5 of them, and the rest were
inherited sites that we're migrating).

I love the look of this but don't have the time or the will to migrate all our
sites to learn yet another CSS meta-language with its own sets of concepts and
classes.

~~~
nickjj
> It's really nice, but is there something this pretty for bootstrap?

I've always liked the Bootstrap 4 CodeBase theme ($28):
[https://demo.pixelcave.com/codebase/be_pages_dashboard.php](https://demo.pixelcave.com/codebase/be_pages_dashboard.php)

It's not the same exact look of course, but it has dozens of pages, widgets
and components that look clean. It's all well formed code too with ES6 JS,
Webpack, etc..

~~~
matthijs_
Take a look at the extended license, which you'll be needing in many cases.
$999 vs $28, for a single site license. No thank you.

~~~
nickjj
> Take a look at the extended license, which you'll be needing in many cases.
> $999 vs $28, for a single site license. No thank you.

I don't think the license is worded very well. If you read it as "end user"
being a visitor of your site then pretty much every theme on themeforest would
cost $999 but that's not the case.

I think what the license means is if you're bundling the theme in with a
product you plan to sell and distribute then you need an extended license,
unless it happens to be for freelance work in which case a regular ($28)
license is fine (the "note to freelancers" clause handles that). If you have a
free or paid SAAS app or something like then you can use a regular license too
because you're not distributing the theme as a paid product.

I've talked to the author of the theme directly and mentioned using it for a
course platform I'm building (end users of the site would be paying for
individual courses). He didn't mention needing an extended license for that.
He even went as far as giving me permission to release the course platform as
open source with his theme included[0].

[0]: What I wrote isn't official for saying you can do the same. I recommend
contacting the author directly if you have intent to do that.

------
newfeatureok
The problem with this IMO is that some enterprising person will just use
regular tailwind (or another utility-css framework like tachyons) and re-
implement all of these components and give it out for free, circumventing the
license and killing the value of this.

Normally with themes it would be time prohibitive to do so, but the nature of
utility-css is that it's relatively straightforward to implement each
component, even without looking at the CSS that's obviously easy to inspect.

I think what they should do is build a tool that let's you build your entire
site using these components and charge for _that_. Otherwise, I guarantee
within a year of today, 2/26/20 there will be a free version of this on GitHub
created by the community.

\---

On a side note, if some bored person out there wants to make a huge splash in
the CSS community, figuring out a way to target a specific DOM element, create
the equivalent of an AST and specify a "dictionary", which would be a utility-
css framework (tailwind, tachyons, basecss, etc) and finally reimplement the
targeted DOM element in the chosen framework would be amazing.

Assuming you buy into utility-css, that would remove all existing friction in
adopting it. Then that would mean you could grab an existing theme [1] and
convert it to tailwind components as desired.

1 -
[https://themes.getbootstrap.com/preview/?theme_id=4231](https://themes.getbootstrap.com/preview/?theme_id=4231)

~~~
jwr
I use Semantic-UI, which had a problem of finding sustainable funding. There
is a community fork (Fomantic-UI), which does not align with my (business)
needs: stability, bug fixes, long-term sustainability, rather than adding
features left and right and becoming Yet Another All-Encompassing JavaScript-
heavy Framework.

Tailwind-UI looks _very_ interesting and I would have no problem paying for
it, rather than getting a "free" version, if only for the long-term
sustainability. Community projects often go through endless rewrites, and
suffer from feature creep and lack of direction.

In a business setting (I run a self-funded SaaS business) I am much more
interested in a framework that fixes bugs and is stable.

The only thing that worries me is that the pricing is one-time rather than
subscription. How can the authors expect long-term sustainability with a one-
time payment? Maintaining a CSS library is a continuous effort, not a one-time
thing.

~~~
newfeatureok
Semantic-UI is a perfect example of the atrophy that I fear with combined CSS
and JS frameworks. I'm pretty bullish on utility-CSS (I prefer tachyons since
it's much simpler than tailwind). I don't think frameworks should necessarily
combine the JS and the CSS. Ideally you would have a competitive market of
people selling themes, using utility-css components so you're not limited by
framework, and then you can just use your own javascript that you're going to
have to use anyway (alpine, react, ember, angular, vue, etc)

I think if utility-css frameworks get popular someone will abstract the
components from the frameworks and things like tailwind ui will become
unnecessary (rather it will just be utility-css-ui and will work with any css-
framework that implements the "interface").

Semantic UI is the perfect example of why you shouldn't go with something
that's generic. Unfortunately the project just became too bloated for one
person to handle. Your concern about sustainability is a good one and that's
exactly why many of the frameworks' authors sell themes. However, themes
usually require a lot of work and are difficult to implement using the actual
css framework. tailwind ui is different because if you had the theme it's
really easy to recreate it because it's utility first.

~~~
jrochkind1
What's "utility-CSS"? Not having luck googling for it, not familiar with this
stuff.

~~~
strbean
Essentially, utility CSS is a philosophy that promotes having tons of general-
purpose classes to apply style rules of extremely limited scope - usually(?)
just one rule per class.

It is described in the Tailwind docs here -
[https://tailwindcss.com/docs/utility-
first/](https://tailwindcss.com/docs/utility-first/)

------
pcurve
On the surface, the markup is pretty damn awful. But if you reach certain
level of proficiency, this will definitely speed up development.

<div class="lg:flex lg:items-center lg:justify-between"> <div class="flex-1
min-w-0"> <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl
sm:leading-9 sm:truncate"> Back End Developer </h2> <div class="mt-1 flex
flex-col sm:mt-0 sm:flex-row sm:flex-wrap"> <div class="mt-2 flex items-center
text-sm leading-5 text-gray-500 sm:mr-6">

Personally I would prefer Bootstrap over this approach.

~~~
rjknight
I find that the verbosity is annoying at first, but it makes it incredibly
easy to come back to some old HTML and work out exactly what it's doing, and
why. Even with Bootstrap, you need to maintain a mental model of what the
classes are doing and how they compose, and each custom class adds more
complexity to that mental model. Yes, Tailwind has lots of classes, but each
class does _one thing_ , so reasoning about the final composition is
incredibly easy.

~~~
have_faith
> Tailwind has lots of classes, but each class does one thing

I think this masks a lot of complexity that you have to manage when taking on
this approach. And it's not because the approach is good or bad, more what it
is or isn't suited for.

The example on the homepage is very slickly presented, but the end result
markup is extremely verbose. If I have a Card component, I would like to
update them all at once when needed which is what css classes are generally
good for. I find BEM naming conventions much more friendly to come back to
than markup full of miniature class names.

~~~
city41
It’s common, even expected, to extract that card into a component of some kind
(React, web components, mustache template, etc) so you still only have to
update the css once.

~~~
jp_sc
Sure, until, you need a variation on that card for some elements, and add some
other tailwind classes to the HTML to do it. Everything seems to work fine for
a while.

Then you update the styles of the card again but the new styles clash with the
ones in those tailwind classes and you end with broken styles in some
elements.

Mixing components and utility classes is a recipe for future chaos.

~~~
city41
How is that different from any other css? I'd argue any css solution would
have this problem with components.

edit: thinking more, you can override classes. So yeah, maybe utility/atomic
classes are not as effective here.

------
ahallock
I'm really surprised at the negativity in these comments. I'm drooling over
how good this looks and can't wait to use it in my projects. $249 is nothing
for the craftsmanship you're getting (and future components!). I've been
following this project for a while and have seen some of the live-coding
sessions--a ton of work went into picking the correct styles and fine-tuning
each component.

------
kareemm
Looks sexy. But can someone ELI5 why I'd use Tailwind over e.g. a Bootstrap
theme? Not trying to be snarky - genuinely trying to understand the
advantages.

~~~
sam_goody
The idea of utility CSS is that you have to set every single style yourself.

So for a button, you might have a class='rounded shadow p-4', which becomes
rounded corners, drop shadow and a padding of 1rem.

On the one hand, you have to do a lot more to code. Instead of just adding
class .btn in Bootstrap you would need to add all those classes.

On the other hand, the styles are not all the same as everyone eles's, and you
can have different styles for one element if needed. You can have a button
that only shares some styles, or a theme that has a lot of complimentary
styles.

A downside of utility classes, is that you don't have a base to work off, you
have to know what classes would go on a button in order to quickly get
something nice.

The solution to that is a numerous collection of Tailwind Components. Copy the
styles as ou need, and modify as you need.

Until now, there was no official collection. Some of my favorite collections
are at
[https://tailwindcss.com/components](https://tailwindcss.com/components)
[https://www.tailwindtoolbox.com](https://www.tailwindtoolbox.com)
[https://tailwindcomponents.com](https://tailwindcomponents.com)
[https://www.creative-tim.com/learning-lab/tailwind-
starter-k...](https://www.creative-tim.com/learning-lab/tailwind-starter-
kit#/presentation) Forms: [https://tailwindcss-custom-
forms.netlify.com](https://tailwindcss-custom-forms.netlify.com)

But now we have an official collection from the framework creators themselves.
Use them as a base, but - by changing a class or two, easily modify them for
your project.

Of course, in Bootstrap, you could always have written your own classes to
overwrite Bootstraps. That can be much more complex, and usually you wind with
side effects. In my experience, the more you deviate from the prebuilt styles
in semantic libs such as BS, the more hair you lose.

------
habosa
For anyone who hasn't tried tailwind I really suggest that you give it a shot.
It's made me 2-5x more productive when styling something from scratch.

~~~
rajasimon
Bulma user here. I tried tailwind but it never works for me but the Bulma
another hand it works perfectly well.

~~~
middleclick
I finished my frontend work in two days with Bulma. This is someone who had
zero experience with front-end development.

~~~
nojvek
Agreed. Bulma is definitely more readable and easier to get your head around.

------
fraktl
It's great there's yet another UI framework on its way. Choice is awesome.

I'm a frontend guy (among other things) and for past 2 years I've been using
Nuxt (app server, node.js) and Vuetify (material UI framework for Vue.js).
Given what kind of results that stack can (and does) achieve, I wonder if
people in the same boat as me (using the same stack) would even attempt to use
Tailwind CSS/UI.

Whatever the case is, I'm glad there's a project that's useful and that helps
authors finance their effort. Thumbs up!

------
efdee
Judging from all the positive comments in this thread, clearly I must be
missing something. This looks horrible to me. Instead of meaningful CSS
classes you just get a bunch of small classes that do very small things, which
you're supposed to combine until it looks like what you want. How is that
better than writing your CSS manually?

(Again, I realise the failure is probably on me. But I don't get it.)

~~~
iudqnolq
Their argument is that the idea of separating content from presentation was
always a lie, and that your JS, CSS, and HTML code is always intertwined. I've
found this to be partly true for web apps.

Tailwind is essentially unusable without a build step. You can configure it to
make composite classes for common styles (button, card, etc.), but if you buy
into their philosophy you'll probably want a component-based design (web
components, React, Vue, etc).

It's better than working with CSS manually because you work at a slightly
higher level. If it was transformed into a css-like language I would prefer
that. As a non-UI expert, I also enjoy having an enumerable limited set of
sane choices for most properties.

~~~
deltron3030
>if you buy into their philosophy you'll probably want a component-based
design (web components, React, Vue, etc).

With tailwindcss or tachyons you get some of the benefits of component
frameworks without having to use component frameworks, because you can
colocate html & "styles" in regular template based systems and scope sections
on a page this way. Great DX if you need to render sections conditionally,
e.g. for ab testing.

If you think in sections rather than individual components anyway, which
tailwind kind of promotes by design, you don't gain that much with a component
framework.

The actual CSS functions like an inverted triangle (see ITCSS) the utility
classes access from the html, so you won't have any specificity issues because
it's already sorted out by having the CSS in a fixed order.

Another advantage is portability of sections between modern frontend JS
frameworks and template based systems, you can just copy and paste things
around, which is harder if the information about the styles is separated from
the html, and without a fixed inverted triangle like CSS structure.

~~~
iudqnolq
What if you want every link (from the perspective of the user, not based on
the tag type) to have the exact same style? How would you do that without some
sort of build step with an atomic unit for a link?

Isn't a section just a case of a component?

~~~
deltron3030
You could define the anchor element in the preflight.css file
(normlize.css/reset).

Yeah, a section is a component, but in my book it also involves the visible
page background where the element is located (you could override the page
background with a section color), like a slice of the page.

~~~
iudqnolq
Fair enough. I'd call that definition a component.

------
arcosdev
I don't see the point of Tailwind. Why not just write inline styles and get
straight to making an manageable mess right from the start? No need for a
framework to help you with that. Most developers will abuse Tailwind and
created nonsensical class names like `font-size-20px` or `margin-left-15px`
instead of kicking the naming can down the road (as others have pointed out).

------
ronyfadel
Stealing these components would be a very shitty thing to do, but I'm
wondering as to how the authors can protect their CSS library from piracy?
(esp. considering the 249$ asking price). Legal action?

I'm considering open sourcing a software product I'm working on, but it could
mean that I'll be bending over backwards to monetize it, as people can just
run straight from source.

~~~
aniforprez
In this case they're not even trying to stop piracy cause as with their book
"Refactoring UI" none of this stuff is locked behind DRM. You can possibly
copy all the HTML and spread it around if you have access but that would be
scummy and it's great that the devs here trust the users to not help such an
effort and have not added intrusive methods to protect this. The license is
also very permissive. For what we potentially get as this is closer to full
release, it's well worth the cost

~~~
nojvek
Oh. Refactoring UI is by the tailwind folks. Did not know. This gives me some
extra confidence.

------
ecmascript
Looks sexy but damn that's expensive. $250 for some pre-built styles I
probably need to edit a lot anyway.

I rather use a free option like [https://semantic-ui.com/](https://semantic-
ui.com/) than pay that much. Maybe if you are company but it doesn't really
work if you are a solo dev or using it for a side project.

~~~
dmitriid
Try creating a similar set of components. Time yourself. Multiply with your
hourly rate.

~~~
opportune
Not sure why you’re getting downvoted. I’m a developer but I don’t do much
frontend stuff. I would absolutely look into something like this if I wanted
to set up a website quickly and wanted it to look good without spending too
much time on it

------
thrownaway954
in my opinion tailwind really only works when used with a component based
framework like Vue, React or ActionView::Component. the issue to me is that
you have to add sooooooooo many classes to make a button look good that you
get fatigued very quickly. when using a component based, you can build a
button component and just reuse that.

this isn't an issue with something like bootstrap where a single class makes a
button look pretty.

~~~
deltron3030
You can extract components: [https://tailwindcss.com/docs/extracting-
components/](https://tailwindcss.com/docs/extracting-components/)

And you can store and access components as code snippets within your code
editor (e.g. VSCode), that's how I'd store the bigger Tailwind UI components.
When I need a component then I just use a shortcut and pick from a component
menu.

~~~
thrownaway954
i think you're missing the point.

extracting "component" as code snippets does nothing if one day your boss
tells you to change all the size and colors of all the buttons. you still have
to go through your entire site and make the changes manually at every
instance... or have the foresight to have a class on every button that you can
reference through pure css to make the change without breaking tailwind... but
at that point, why would have use tailwind to begin with.

~~~
thrownaway954
well... looking at the @apply directive that they have, i think found the
answer to this. i've been proven wrong:

[https://tailwindcss.com/course/composing-utilities-with-
appl...](https://tailwindcss.com/course/composing-utilities-with-apply/#app)

~~~
thrownaway954
continuing to fall on my sword from yesterday... my god... i am impressed.
i've been going through the screencasts they have and i think i'm going to
ditch bootstrap and use tailwind for my next project.

[https://tailwindcss.com/screencasts/](https://tailwindcss.com/screencasts/)

------
k__
I read that Tailwind CSS is awesome, but not to be confused with how Bootstrap
works, because Tailwind CSS is more low-level.

Does this mean, Tailwind UI is Tailwinds "answer" to that problem? Like, it's
are direct Bootstrap competitor?

~~~
dannytatom
I don't think it's really in competition for Bootstrap. Bootstrap is a set of
common components and a grid system. Tailwind is a set of utility classes to
build your own components.

------
bensochar
Its like George Costanza says about sex & parking.

Why should I pay for a Tailwind hero when, if I apply myself, I can get a
Bootstrap hero for free?

[https://tailwindui.com/components/marketing/sections/heroes](https://tailwindui.com/components/marketing/sections/heroes)
[https://getbootstrap.com/docs/4.4/components/jumbotron/](https://getbootstrap.com/docs/4.4/components/jumbotron/)

~~~
ahallock
For starters, it's a more modern approach and the designer behind it is
amazing, so it looks much better than Bootstrap IMO.

You also get all the other components they add in the future, whereas
Bootstrap only has its core components.

------
keb_
For everyone is who skeptical about utility-first "atomic" or "functional"
CSS, and don't want to go through the hassle of getting Tailwind with
necessary build steps set up, I'd recommend giving a smaller-scoped library
such as Basscss a try. It's >3kb, you can include it using a CDN link, and it
covers most of what you need to be productive.

[https://basscss.com/](https://basscss.com/)

~~~
Agoreddah
Wow, just today I was creating css lib for my project with similar naming and
behaviour rules. Thanks for showing it out, I will check (eventually create)
sass version of it. In my personal opinion, for simple projects, this is all
what developer needs. Intuitive, extensible, low dependency and fast.

~~~
keb_
Yes, I agree. I use basscss for a ton of small projects, and my personal
sites. It's so small, it's trivial to include even when I'm using larger
frameworks like Bootstrap.

------
agumonkey
to the team:

[https://tailwindui.com/components/application-
ui/forms/input...](https://tailwindui.com/components/application-
ui/forms/input-groups)

the currency sign not matching the selected symbol is confusing

------
SnowingXIV
Recently used Tailwind for a quick and dirty MVP. It came out looking very
polished (way more so than the cookie-cutter bootstrap look) and cut down the
development time quite a bit allowing more time to focus on the important
stuff on the backend. Worth giving it a try on a side project if you haven't.

Like you, I was put off by how crowded the HTML looked but got used to it and
found it way quicker to update and kept the css file clean.

------
williamdclt
I really like Tailwind's approach in some cases, it does make prototyping
extremely fast.

What I'm really missing (and I don't understand it doesn't exist) is a way to
compose classes into a single class, to refactor collections of small utility
classes into a meaningful class with semantic sense. Why can't I do something
like:

    
    
        .my-class {
            use .text-sm
            use .text-gray
            use .bold
        }
    

Kind of like calling several functions from a single function to compose their
effects.

The only things that come to mind are SCSS mixins (but would have to declare
the `text-gray` mixin AND the `text-gray` class, plus it doesn't with a lib
like tailwind that provides classes), or CSS-in-JS trickery. Styled-component
allows this sort of things, but it still doesn't feel very nice to use.

If I've missed something and this is actually possible, please somebody tell
me!

~~~
htunnicliff
If you take advantage of PostCSS or Tailwind's CLI, you can compose something
like:

    
    
      .my-class {
        @apply text-sm;
        @apply text-gray;
        @apply font-bold;
      }

~~~
williamdclt
This is _exactly_ what I want, down to the syntax!

------
davidbanham
I'm very excited by this!

I currently use [https://materializecss.com/](https://materializecss.com/)
over several products. It's been great, but I'm stuck on the 0.100.x line
because the upgrade path was too difficult. It's also hasn't been updated
since the first 1.0 release some time ago. Not complaining since I got what I
paid for (it was free) but it's left me pretty anxious to find a replacement.

Salesforce's Lightning components are good but challenging to understand how
to work with outside the walled garden. Zurb's Foundation UI is interesting
but seems to want me to use whole page templates rather than components.

This looks like exactly what I've been dreaming of. I've put my money where my
mouth is as I can't wait to have more components built out to a stage where I
can start using it for real.

------
psoots
This is not a good idea.

1\. Components are sort of antithetical to the Tailwind CSS ethos of atomic
styling. Of course, examples of markup and class arrangements are certainly
helpful, but at the end of the day you are still always going to have a unique
markup in the end. And according to their license, those customized components
are now under their Tailwind UI license.

2\. What counts as a component? What if Tailwind UI produces a licensed
component that is a single div with a single border class? Could it be that
someone with no prior knowledge or access to this component have accidentally
already created the same markup elsewhere? Would that be an infringement?

Frankly, I really enjoy using Tailwind CSS, but I'm a little nervous now to
even use the original project in my work.

------
arendtio
Sometimes I wonder why Open UI5 [1] is so little known within the front-end
community. I mean, in a world where long term support for frameworks is rare,
having a component library backed by a large company like SAP should be quite
valuable.

[1] [https://openui5.org/](https://openui5.org/)

[2] Sample App: [https://github.com/SAP-samples/openui5-sample-
app](https://github.com/SAP-samples/openui5-sample-app)

[3] Slider in the component library:
[https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample...](https://openui5.hana.ondemand.com/entity/sap.m.Slider/sample/sap.m.sample.Slider)

~~~
hello_moto
1\. is heavy (size)

2\. is huge (libs)

3\. was made by SAP for custom HANA apps with "normalized" widgets and skins,
originally known as SAP UI5

4\. MVC, Single-App, two-way data-binding, tutorials are hard to grasp,
conventions that may not lend itself to front-end devs mindset.

5\. naming convention is a mixed of Java and C++ (hungarian notation) instead
of JavaScript

Source: used SAP UI5 in the past. Nobody likes it.

------
bensochar
To me this is solving Tailwind's biggest issue: consistency & context.

Comparing it to Bootstrap or Foundation adding the class `alert alert-danger`
to a div tells my coworkers that it's an "alert" & it will look like an alert
everywhere. If I want to change how alerts look, I change the CSS

With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4
py-3 rounded relative`. Then I'd have to change my HTML everywhere to update
the appearance of alerts & its not always obvious that I'm looking at an
"alert" in code. I'd end up with different looking alerts, cards, buttons, etc
all over my app

~~~
ahallock
Why not use view templates to capture these?

~~~
bensochar
For alerts a sharable template is doable. So maybe a bad example, LOL.

But for buttons & heros not so much. I've worked with apps that have a
"button" template. I find it overkill.

For one project we have some components rendered both server-side & with Vue.

Other cases I've had are sharing styles across multiple apps and pulling in
markup from a 3rd party, like Stripe or a WYSIWYG.

But you're right. Ideally this wouldn't be an issue w/ view templates.

~~~
ahallock
I agree; for smaller components like labels and buttons, having some compound
rules would help. They tend to be well-defined. I believe you can create
composite styles in Tailwind.

------
ivanhoe
So Tailwind is basically a Bootstrap without the hard-coded default styles,
and then you add the UI theme like this. Do you then just end up with a
different looking Bootstrap, or it still has some other benefits?

------
mirap
UX designer here! Tailwind is great piece of work and I'd recommend it for
validating MVPs and building new projects in general.

Reasons:

\- Its constrains and whitespaces are well made, if kept untouched, the result
may be good, even if build by dev with no design skills.

\- Elements are containing what's necessary, but no more. No unnecessary
tooltips etc.

\- All elements have clear basic states (see
[https://tailwindui.com/components/application-
ui/forms/input...](https://tailwindui.com/components/application-
ui/forms/input-groups))

------
32gbsd
I like the clean look but still all the web homology unite!
[https://vimeo.com/393580241/82c6d7c5f6](https://vimeo.com/393580241/82c6d7c5f6)

------
dylanhassinger
I've been using Tailwind for a year, I love it. I do think the example markup
is often way more verbose then it needs to be.

My biggest request would be, making the naming conventions match more closely
to CSS property names and Bootstrap 4 names. Once a developer learned the
system, if they knew CSS property names they could automatically guess the
Tailwind class without looking at the docs. Matching Boostrap 4 whenever its
convention, would make it that much easier to convert BS4 sites to Tailwind
(and easier to adopt for BS devs). My 2 cents.

Excited for UI. Keep it comin!

------
desireco42
First, I want this. TailwindCSS has great developer experience for me. I would
pay for this even if I wouldn't use it, but I definitely will.

I like how they didn't limit too much what can you do with components in
license, which is really good.

I generally am OK with this and want to see if I want to get just appUI or
both sets. I think Adam should've joined them together and maybe given us some
deal on pricing as early adopters. But, he is great guy, and this is excellent
way to support him and project.

------
sandGorgon
so the problem is that this is priced too high. Its not about free, but the
real pricing market now is themeforest.

For example -
[http://landrick.react.themesbrand.com/](http://landrick.react.themesbrand.com/)
is 17$.

[https://g-axon.com/wieldy-ant-design-react-redux-admin-
templ...](https://g-axon.com/wieldy-ant-design-react-redux-admin-template/) is
24$ (which uses ant design)

~~~
dinkleberg
Tailwind UI is not a theme, it's a component library. The target audience is
different.

I bought this the moment I got the email about it this morning because this is
going to help my productivity in building web applications. When you use
Tailwind, you aren't using a pre-made theme as you would with a bootstrap
theme you buy, you are designing it from scratch.

With this UI kit you'll get some nice building blocks to become even more
productive, but you'll still end up modifying stuff to make it yours.

~~~
sandGorgon
Not to be an ass, but so is Ant design or Semantic UI.

I honestly think this is priced too high.

~~~
rawfan
Compared to what? If you look at any agency license (use on as many sites as
you want) for themeforest WordPress themes, they are about the same price, if
not higher. I guarantee you, they‘ll make a million bucks on launch day!

~~~
sandGorgon
That's a great point actually. It would be nice to have a single use license.
Not all of us are building many sites in our day jobs.

------
hackerman555
I like the design, hate the implementation.

Really doesn't work with react.

react + styled components is god mode. This is a step down (aside from the
design).

At the end of the day, CSS isn't that hard anymore.

Design it in figma. Put it into zeplin. Copy paste the styles into a styled-
component. You're done.

tailwind is only a step up if you're a russian php developer who has been
using bootstrap for the last 10 years.

------
nickjj
I know this would be hard to pull off but I kind of wish we could see the
small / medium / large views of each component as a preview.

Right now it's not possible to tell what would happen when any of these
components were resized since it's just a static image as a preview but
responsiveness is one of the most important things to see.

~~~
iudqnolq
They've implemented that, and have size sliders for some of the components. I
presume the others are images so it's harder to steal the styling.

~~~
nickjj
> They've implemented that, and have size sliders for some of the components.

It seems they've only done it for the ones they are ok with making freely
available.

But that still leaves a vast majority of the components (almost all of them)
as static images at 1 specific screen size.

They should consider adding screenshots of each size, or a few second gif /
video showing how it looks at various breakpoints. Otherwise potential buyers
(like myself) have no idea what things look like at each size. I don't mind a
premium price but I'm not going to blindly buy it without knowing what the
components look like beforehand. What it looks like is the most important
thing for a CSS theme.

~~~
iudqnolq
I would like that. Personally I bookmarked this to come back to because so
many of the components are listed as not yet implemented.

I do think they have a fourteen day free trial, though.

------
dharma1
Without commenting on Tailwind CSS itself, I think the value add here is with
the very nice looking UI components designed by Steve Schoger.

I would like to see a React component version of this, ready to use with a CMS
like [https://webiny.com](https://webiny.com)

------
misiti3780
These UIs look great! Does anyone have any great resources, examples, where
one could learn CSS/SCSS to create stuff like this. I know CSS/SCSS enough to
edit existing codebases and tweek, but I would not be able to create these
from scratch. I would love to improve my design skills.

~~~
mkarnicki
While not CSS courses directly, these resources should help you address what
you're looking for.

Tailwind related playlists on Adam Wathan's YouTube:
[https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/pla...](https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/playlists)

And this publication (by same authors as Tailwind UI, that is Adam and Steve)
[https://refactoringui.com/book/](https://refactoringui.com/book/)

Enjoy!

~~~
misiti3780
thx

------
tjholowaychuk
Great job, this looks awesome! I wish something polished like this was around
when I started my stuff. I'm not sure how I feel about Tailwind being almost
1mb of CSS :D, but it's probably worth all the time you save, especially for
apps the size isn't such a big deal.

~~~
hi_im_miles
Tailwind is often paired with another build tool called PurgeCSS which
eliminates any unused classes.

~~~
zerkten
This was covered early in the tutorial I followed last summer. As someone who
likes good web perf and remembers when sites were much slimmer on the
frontend, I was very pleasantly surprised with the results I got.

------
agluszak
Shouldn't there be a possibility for one class to extend other or to somehow
include or merge classes, such that btn = rounded + shadow + p-4? This would
allow you to use utility classes as building blocks for semantic ones.

(Disclaimer: I'm a backend dev and I don't know CSS well)

~~~
keb_
Yes, this is possible using the `@apply` directive:
[https://tailwindcss.com/docs/utility-
first#maintainability-c...](https://tailwindcss.com/docs/utility-
first#maintainability-concerns)

------
XCSme
I am still not convinced to make the switch to Tailwind from MaterialUI.
Looking at the source code of the examples, it looks like a huge block of code
with a lot of duplicate text/class names.

The HTML-CSS "separation" question will never have a "right" answer...

------
irrationalactor
I love Tailwind but hate having to deal with build tools and purgecss and
package management and [insert modern workflow hassle] just for a little side
project.

Is there anything similar to Tailwind that doesn't require any build process?

~~~
AbdelilahLbardi
You still can use the external CDN link. But you won't be able to do a custom
configuration file which is completely okay.

~~~
uyuioi
I don’t recommend people use the CDN, it unpacks with a huge payload.

------
KaoruAoiShiho
This does look very pretty. I want to use it. But is this just another
template? What's to stop any site built on this from looking identical to
other sites bootstrap style? What are the customization options on here?

~~~
zerkten
There seem to be relatively few themes out there, but it seems the intent of
Tailwind is that you are building a custom design. There is no reason these
themes couldn't exist, but you'd also want custom some components to
completely break away from the behavior of the ones supplied.

Your question is intriguing to me because I come from web development long
before the Bootstrap was available. Teams I worked on would frequently take
custom designs and turn them into clickable HTML templates with all UI
components before spending a lot of time with the site itself. Bootstrap took
this a lot further, but also enables the early parts of design to be skipped.
You then have your issue with the site looking like a Bootstrap site.

My personal opinion is that Tailwind along with this new offering enables a
better way out of that situation. Bootstrap is still known to more people and
has less of a learning curve which are important points for some.

------
neya
I can totally see the value of Tailwind UI, and as an experienced user of
UIKIT ([https://www.getuikit.com](https://www.getuikit.com)), I don't see much
difference, to be honest. Can someone please help me understand what is so
good about Tailwind UI that UIKIT doesn't already?

UIKIT is super light weight and modular. I've developed extremely high
converting landing pages with almost no JS at all using only components I
needed. Can the same be done with Tailwind? And if yes, then what exactly is
the appeal? Simply the difference in number of components?

I love the look and feel of Tailwind, but it just looks like another UI
framework to me and I don't understand all the raving reviews here. If it's
something obvious I'm missing, very happy to learn it and pick it up.

Thank you.

------
uyuioi
Getting tailwind to work properly with Vue CLI has been the bane of my
existence.

~~~
gbrits
How so? Haven't tried tailwind, but wanted to try it on a pretty decent-sized
Vue-project

------
rsp1984
Please excuse the newbie questions but would I be able to use this in a
WYSIWYG framework like Webflow or Weebly or Wordpress?

How about compatibility with React?

Or is this the land of "bare metal" HTML+JS+CSS?

~~~
marc_io
You can use it with WordPress for sure, as you have total control of the
markup.

But you can't use it directly with Webflow. I don't know about Weebly.

------
markdown
Why is the license on another website... and a website built for
collaboratively editing a document no less?

Best to set it in stone (by bringing it onto your own website) before you
start selling.

------
meerita
I don't like the way they designed the inputs. Pure placeholder hint, no
label. Will create a big accesibility and usability problem.

~~~
tracerbulletx
They have labels on all their sample form components?
[https://tailwindui.com/components/application-
ui/forms/input...](https://tailwindui.com/components/application-
ui/forms/input-groups)

------
aagha
Wow. I just watched the video Adam put together of slamming a new front-end
together and it's really impressive (and fast).

------
hirako2000
I used tailwind, not for long, until I found basscss.

It comes down to a css library being a utility that defines clean patterns for
extension.

------
darepublic
I haven't tried this before but it reminds me of tachyons from what I'm
reading in the comments

------
nojvek
Do these come as custom element ? Just wanna abstract away and deal with
higher level UI elems.

------
z3t4
Just give me an image or sketch plus color palette and I will vectorize
everything in hand written HTML and SVG, use semantic element (avoid using div
and span), make it "responsive" for different screen sizes... and I would pay
good money for it. If you are a designer, dont sell the code.

------
longtermd
I didn't get the pricing. Is this one-time, monthly, or annual?

~~~
httgp
It’s one-time and you get lifetime updates for the kits you buy.

------
cc9one
Just bought Tailwind. Where do I find my Tailwind plugin list?

------
winrid
It looks really nice. Site is fast too. Good job.

------
oefrha
This looks nice, but one question I have regarding licensing is that for the
simpler and more "obvious" components, where's line between learning from
their demo (when the code isn't locked behind a paywall) and having to
purchase a license? Take "Wide Tables"[1] for example; I have built almost the
exact same thing myself with Tailwind by learning from an (IIRC official)
example before.

[1] [https://tailwindui.com/components/application-
ui/tables/wide](https://tailwindui.com/components/application-ui/tables/wide)

------
jacobsenscott
Remember when the OS provided the UI, and you could just focus on solving your
users problems without thinking much about the UI. Those were the days.

------
udeathstarck
Remove all the things

------
kundiis
how is this different than bootstrap?

------
udeathstarck
Remove

------
jstewartmobile
How many hundreds of megabytes for basic UI elements? I say this not an attack
on Tailwind, but as an attack on web "standards."

------
benbristow
Looks nice but sod paying $250 for some HTML & CSS.

~~~
zerkten
You are clearly not their market, but there is a big market for this. That
price is inexpensive when you look at the time and effort involved of building
the same components from scratch, even though Tailwind is a pretty productive
tool once you know it.

~~~
tjholowaychuk
Yeah $250 is nothing if you're building a real product, fuck these cheap
developers.

