How I add Tailwind to my ReScript projects
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
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 configuration
postcss.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 */
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
Or, if you use
commonjs as your output
That should be it!
vite, or whatever you use should pick up the CSS and compile all of Tailwind's classes.
Enable Tailwind's JIT compiler
Tailwind (> v2.1) includes a just-in-time compiler. It only generates the styles you use and will therefore be much faster. It also includes some nice new features like all variants being included by default and creating arbitrary styles.
The feature is still in preview, but I haven't had any major issues with it. To enable it, just add one line to your Tailwind configuration.
NOTE: Make sure that the
purgesetting has been added or no styles will be generated
Tools and templates
To make the process of integrating ReScript and Tailwind even easier, here are some tools and templates to help you.