A ReScript PPX, which validates the tailwindcss class names
The tailwind-ppx is the only ppx to validate the tailwindcss class names in compile time. But, it was archived, and written by ocaml-migrate-parsetree
. My team considered taking over the repository and maintaining it but decided to rewrite it from the scratch with ppxlib
and menhir
. Additionally, we improve the logic to find the invalid class name with Spelling Corrector algorithm.
Plus, the arbitrary values in the JIT mode of Tailwindcss are supported!
<!-- arbitrary value examples -->
<div className=%twc("p-[75px]")> ... </div>
<div className=%twc("p-[calc(75px)]")> ... </div>
<div className=%twc("p-[calc(100%-40px)]")> ... </div>
<div className=%twc("bg-[#1da1f1]")> ... </div>
<div className=%twc("grid-cols-[1fr,700px,2fr]")> ... </div>
<div className=%twc("translate-x-[calc(-50%+27px)]")> ... </div>
<div className=%twc("!pb-[270px]")> ... </div>
<div className=%twc("after:content-['Hello_World']")> ... </div>
<div className=%twc("peer-checked:[&>svg]:rotate-180")> ... </div>
yarn add -D @greenlabs/res-tailwindcss
<path_to_tailwindcss>
should be replaced with the relative location of your generated tailwindcss file from your project root in which the bsconfig.json
file is located.
// bsconfig.json
"ppx-flags": [
...,
["@greenlabs/res-tailwindcss/ppx", "--path <path_to_tailwindcss>"]
],
<input type_="checkbox" className=%twc("peer") />
<div className=%twc("flex justify-center items-center after:content-['Hello_World'] peer-checked:[&>svg]:rotate-180")>
...
<svg />
</div>
- Create a sandbox with opam
opam switch create tailwindcss 4.12.1
- Install dependencies
opam install . --deps-only --with-test
- Build
opam exec -- dune build
- Test
cd rescript
(install dependencies)
yarn
(build --watch)
yarn res:clean && yarn res:watch
(run test --watch)
yarn test:watch