cra-template-reason-tailwind-ppx

This is a ReasonML + ReasonReact template for Create React App featuring TailwindCSS and dylanirlbeck/tailwind-ppx for type-safe css.

Install

To use this template, add --template @idkjs/reason-tailwind-ppx when creating a new app.

For example:

npx create-react-app my-app --template @idkjs/reason-tailwind-ppx
# or
yarn create react-app my-app --template @idkjs/reason-tailwind-ppx

Highlights

Silences ESLint's Bucklescript Errors

Available since [email protected], this template adds an .eslintignore file in the root directory with *.bs.js so that react-scripts ignores javascript errors which have already been handled by bucklescript. The javascript is 100% safe with ReasonML so we don't have to worry about these eslint warnings. To disable, remove *.bs.js from .eslintignore or remove .eslintignore. Remove EXTEND_ESLINT=true from you .env file.

TailWind PPX

See bsconfig.json for the default set up. Styles are set in src/styles/tailwind.css and src/styles/index.css and compiled with the build:styles script in package.json.

For more information, please refer to:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.
• Building A Template – How to build a custom Create React App Template.
• EXTEND_ESLINT=true - Define permanent environment variables in a creat-react-app project.
• Tailwind-PPX - Reason/OCaml PPX for writing compile-time validated Tailwind CSS classes.
• TailwindCSS - A utility-first CSS framework for rapidly building custom designs.