til / How I add Tailwind to my ReScript projects
I’ve been using Tailwind CSS for a couple of years and I think it’s the fastest and most convenient way of styling an app. Since I’m also very fond of ReScript I naturally want to combine the two. Luckily, adding Tailwind to a ReScript project isn’t any harder than in a JavaScript app.
I’ve included some tools and templates in the end if you want to look at complete code or get set up quickly.
This assumes that you have an existing ReScript project where you want to add Tailwind. Start by adding the necessary dependencies, if you are using vite you won’t need postcss.
npm install --dev tailwindcss postcss autoprefixer
We are now ready to run npx tailwindcss init -p, this will create two files for us:
tailwind.config.js- A default Tailwind configurationpostcss.config.js- A PostCSS configuration with Tailwind and Autoprefixer
To add all of Tailwind’s features we create a CSS file inside the src folder with the following content.
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
We then import this CSS file in our ReScript code, I usually put it in my entry file. If you use es6 output, you would add
// Index.res
%%raw("import './index.css'")
Or, if you use commonjs as your output
// Index.res
%%raw("require('./index.css')")
That should be it! webpack, vite, or whatever you use should pick up the CSS and compile all of Tailwind’s classes.
Tools and templates #
To make the process of integrating ReScript and Tailwind even easier, here are some tools and templates to help you.
- Supreme - A CLI I’ve written that can quickly set up a ReScript template with Tailwind and Vite.
- Next.js + Tailwind - A Next.js template with Tailwind created by @ryyppy