Tailwind 2 - so hot šŸ”„

1

Woah, the TailwindCSS project just released their newest version, with a brand new landing pageā€¦ this one is just a blast to look at:

Letā€™s use that chance to talk a little bit about Tailwind!

image
image1604Ɨ1285 334 KB

I love how they really understand their domain and really live by what they preach for. Even though the utility first CSS approach was pretty controversial and frowned upon first, they have proven that good documentation, and a good eye on practical use-case scenarios will go a long way, even if the tech looks odd.

image
image1593Ɨ1285 474 KB

The project (which is OSS at its core), does a lot of things right. Their major advantage in the beginning was that the core maintainers are both developers and designers (whereby one of them is like a designer designerā€¦ a person who works in proper UX / UI tools, not just in code).

They had a concrete problem they wanted to solve (donā€™t worry too much about CSS cascading, have a good subset of CSS that makes sense for building beautiful products), and made a framework to tackle this problem.

They made sure the documentation is easy to understand and navigate. They created Screencasts and other material to help others understanding the concepts. They nailed their explanations on why their solution is good for solving real-world problems and thought deeply about their target audience (whom are they advertising for? what technical backgrounds do they have?).

image
image1639Ɨ1231 343 KB

I personally use Tailwind in all my work projects, we even use it for a Top 500 fortune client right now and integrate it in an existing web platform. It mixes extremely well with the ReScript / React ecosystem (thatā€™s also why we are using it for rescript-lang.org), or with any other templating / component system really. Vue, Svelte, Preact, Drupal, Handlebars / Express, Laravel,ā€¦ you name it, it just fits into any system.

I am really happy about the success of Tailwind, because it really shows that there is actually a good chance of winning against all odds (CSS-in-JS was already well established in React) just by thinking really hard about the end user experience, subsetting an existing technology and polish it to perfection.

They basically crushed it with a 2-3 person team and are now considered to be a serious, production-ready platform for styling web apps. That is a very big accomplishing, and I salute them for their success. Really well deserved.

My big hope is that ReScript will follow its lead of being a really well polished subset of its original platform, focusing on the things that actually matter for the end user (even if it looks controversial at first), and make it just really pleasant to use.

As some people might have noticed, we started to advertise a more pragmatic approach of tackling ReScript applications. We donā€™t go for the purity / full type safe approach. We donā€™t evangelize for functional patterns, fancy syntax extensions, or other more complex language constructs that would theoretically be possible within the language. Thatā€™s because we want to focus on the ā€œbuild great productsā€ aspects.

You donā€™t need many ReScript constructs to build really astounding webapps that are also fast and easy to maintain (functions, variants, records, -> pipes, interop syntax). Thatā€™s our focus, and I am 100% convinced that this strategy will make us going places in the near future!

For those who havenā€™t tried Tailwind and felt uncomfortable with CSS-in-ReScript solutions so far, maybe give this a try. ReScript + React + Tailwind is pretty much a no-brainer for me nowadays, and itā€™s there to stay.

Have a great one!

15 Likes
2

Iā€™ve really enjoyed using tailwind a lot and used it with rescript a few times, and it was a great experience.

There is part of me that feels that it is missing some of the benefits of css in js and I agree with the arguments others have made that you do end up having to learn a custom abstraction of class names over css. (eg the the naming of font-weight: 900; to font-black rather than font-900 or similar or line-height to leading-loose etcā€¦) These arenā€™t guessable and you just have to know them.

Having said that using tailwindcss can be so productive.

I find it useful to think of the interface for how to style a component and itā€™s implementation separately. It is very hard to beat the efficiency of writing brief classnames and nothing else to style your components. Itā€™s far shorter than the css in js style of template strings or objects (and has the added benefits of being able to use js if tailwind is used with react). I think that interface is hard to beat. I would standardise the naming conventions though so that they are all guessable from the css they represent.

I think the ultimate solution is probably a css-in-js solution with the tailwindcss /utility/atomic css style of writing out styles, with standardised names and the ability to constrain these to match your design system. However tailwindcss is good enough that I havenā€™t felt that much of a need to not reach for it by default (if I can).

A couple of good articles on this space:


3

Tailwind is really great with rescript / reasonml ! At my work, we made a script to have Tailwind classNames bindings, we have the benefit of autocompletion & type safety

If anyone is interested, here is the link

4

Have you ever used the tailwind editor integration, or do you just dislike the stringly typed nature of TW? I lately met some ppl who were completely unaware of the editor tooling, or thought that it doesnā€™t work with ReScript files, but it does, and the autocompletion is really great (in VSCode it even shows color tiles next to detected colors, and it also shows the desugared CSS rules behind each class name, which is great for learning CSS).

Thatā€™s also what the editor integration solves for meā€¦ i usually just do className=" and then ctrl-space to expand the whole className list, or type text- and autocomplete all fonts / colors etc. So discoverability was always better for me than plain css (together with Tailwindā€™s nice docs website)

4 Likes
5

I loooooooove tailwind, and I also love the comparison you made with the goals for the language. I love the direction of being product-oriented rather than ideal-oriented. I think tailwind does that really well, and Rescript seems to be on the right track to get there, too. And maybe if someone figured out some type of product to sell associated with Rescript (like Tailwind UI, or Refactoring UI are for Tailwind), there could be enough regular income to employ some of the maintainers full-time. Far easier said than done, though.

2 Likes
6

Happened upon Windi CSS, which is a Tailwind alternative for the lovers of quick compilation. Wink wink nudge nudge.

Not sure I like the auto-generated classes, because I feel that even the out-of-the-box Tailwind has too many values for possible spacings, colors, etc. Then again, maybe utility classes are a bad fit for design systems anyway.

7

I never use windi, but i saw this announcemnt from tailwindcss today.

Am I understand correctly that this will do exact same thing as windi?

1 Like
8

Yeah I saw the demo video and got strong ReScript vibes regarding compilation speed. I am still not entirely sure if adding an adhoc macro system right from the start was a good idea, since it opens a lot of potential to userspace shenanigans.

Now if Next would replace Webpack with something like esbuild, development speeds might actually be enjoyable again :grinning:

4 Likes
9

Yup. exactly.
and Tailwind didnā€™t even mention windi as prior art initially.


maybe thatā€™s cost of the open source.

2 Likes
10

I see it is fixed now :smiley:

I can also see that this new compiler is also written in JS? I will just sit here and wait until someone with big ass project will rewrite it in Rust/Go/Ocaml :smiley:

Edit: Oh I can see that this was AFTER windi team point it out. I get it why they get mad

1 Like
11

Oh, OK. Totally using Windi then :slight_smile: