re-tailwind

ReasonML utility classes generated from Tailwind config

Usage no npm install needed!

<script type="module">
  import reTailwind from 'https://cdn.skypack.dev/re-tailwind';
</script>

README

re-tailwind

ReasonML utility to generate Tailwind classes

Install

npm install --save re-tailwind

Add re-tailwind to bs-dependencies in bsconfig.json

Usage

  1. Ensure your app already import tailwind css
[%bs.raw {|require("tailwindcss/dist/tailwind.min.css")|}];
  1. Use function TW.make to construct your tailwind classnames:
module Example = {
  [@react.component]
  let make = () => {
    <div className=TW.([Display(Flex), Float(FloatRight)] |> make)>
      {ReasonReact.string("Hello Example")}
    </div>;
  };
};

More examples

Credits

  • Typed tailwind which has the same purpose to this project but in TypeScript

Next works:

  • Tailwind PPX
  • Auto generate ReasonML code for Tailwind CSS by user config

License

MIT