Rescript & tailwind css tutorial

1

I’m having trouble understanding Styling | React in particular, I don’t understand how to do Rescript <-> Tailwind CSS.

Part of the problem is that I don’t understand Tailwind CSS itself.

Is there a better tutorial on Rescript / Tailwind CSS interaction ?

Thanks!

2

Any particular step that you find confusing?

In short, as long as you get Tailwind to generate the CSS, and link it in e.g. your index.html, you should be able to use it just like any other CSS.

E.g.

@react.component
let make = (~text) => {
  <h1 className=”text-3xl font-bold underline”>{React.string(text)}<h1>
}
3

If it can be of any help, here is a repo where I tested Tailwind ReScript and Nextjs GitHub - davodesign84/rescript-next

The only ReScript related piece of info is how to add the css import, in my case I’ve used
@module("./globals.css") external styles: {.} = "default" , you can check it here: rescript-next/MainLayout.res at main · davodesign84/rescript-next · GitHub

On the flipside Tailwind can be finnicky depending on your frontend build setup, they have good framework guides here though Framework Guides - Tailwind CSS

or you can always use the CDN version to test things out Try Tailwind CSS using the Play CDN - Tailwind CSS

1 Like