res_tailwindcss

PPX validates the tailwindcss class names
README

A ReScript PPX, which validates the tailwindcss class names

Motivation

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>

Install

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>"]
],

Example

<div className=%twc("flex justify-center items-center")>
  ...
</div>

Development

  1. Create a sandbox with opam

opam switch create tailwindcss 4.12.1
  1. Install dependencies

opam install . --deps-only --with-test
  1. Build

opam exec -- dune build
  1. Test

cd rescript

(install dependencies)
yarn

(build --watch)
yarn res:clean && yarn res:watch

(run test --watch)
yarn test:watch
Install
Published
18 Mar 2022
Sources
opam-0.1.3.tar.gz
md5=23b68b1a1871fc87bb121e022aa8be89
sha512=964f61834cf0292e69cc189bece4e5d35874fd29aea17b97750570b870d349da28b284f150a1382ad37b033b1fe8e3397cc744458805617ec5d9b1121a859d38
Dependencies
Reverse Dependencies