Skip to content

phthhieu/re-tailwind

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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