Typesafe tailwind would be better in Rescript with pipe operator

Just saw typewind, a typesafe babel plugin that converts to tailwind classes

Seeing this example

import { tw } from 'typewind';

const mediaStyles = tw.sm(tw.w_4.mt_3).lg(tw.w_8.mt_6);
const groupInGroups = tw.text_sm.sm(tw.bg_black.hover(tw.bg_white.w_10));

I can’t help but think this would look much better in rescript

Something like this

let mediaStyles = Typewind.make()
->sm(w_4->mt_3)
->lg(w_8->mt_6)

Unfortunately, it seems like a pretty awkward api to make bindings for. Not sure how I would do it

The core of typewind is a babel plugin that transforms it so it does not remain as runtime code.

The advantage of ReScript is a toolchain called PPX that allows you to extend the compiler (including types), so no need to depend on external toolchains like babel, etc.

See https://github.com/dylanirlbeck/tailwind-ppx (Not maintained, unfortunately)

1 Like

I am team “just use tailwind classnames” and do e2e tests and visual regression instead. There’s also IDE based tailwind linting and auto-completion that also works on ReScript files if configured correctly.

Maybe also worth considering that just using good old className allows Tailwind developers to get productive quickly in your codebase without knowing too many ReScript concepts. Important if you wanna grow your team quickly.

3 Likes

Yeah, I use the IDE based tailwind solutions and think they are more than sufficient. Having the type compiler complain is more just a QOL improvement.

I think the work @zth has done on the vscode extension autocomplete would pair nicely with something like this.

I think this post was just showing the readability the pipe operator brings to rescript when used appropriately

I was under the impression that ppx was being phased out, or at least strongly discouraged. (Maybe that’s only at the application level and not at the library level?) Anyway, is that still the case?

I’d say it’s the other way around, discouraged at the library level more than at the application level.

But indeed, for tailwind, I find the tailwind extension way enough for the job.

2 Likes

I’ve made ppx to check the classnames in the compilation time. https://github.com/green-labs/res_tailwindcss
But, recently I decided not to use it anymore with my team. Because the benefit seems trivial, checking the classnames from pre-commit hook or ci for PR would be better alternatives.

1 Like