@idkjs/cra-template-reason-tailwind-ppx

A ReasonML template for Create React App with Tailwind PPX.

Usage no npm install needed!

<script type="module">
  import idkjsCraTemplateReasonTailwindPpx from 'https://cdn.skypack.dev/@idkjs/cra-template-reason-tailwind-ppx';
</script>

README

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 react-scripts@0.5.0, 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.