til/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 */ @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!
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
- ReScript: Creating a React component
- ReScript: Using React components
- ReScript: Adding a third-party library
- ReScript: Using useState in rescript-react
- ReScript: Using useReducer in rescript-react
- ReScript: Adding new actions to an existing useReducer
- ReScript: Using useContext in rescript-react
- ReScript: Connect to localStorage using FFI and functors
- ReScript: FFI basics in React
- how I add Tailwind to my ReScript projects