Edit

Styling: Tailwind CSS

Tailwind CSS is a CSS framework that is rapidly growing in popularity. It's completely customizable and lightweight, making it a perfect companion to React. If you're not familiar with Tailwind, we recommend checking out their docs for a gentle introduction before moving forward.

Setting up Tailwind

Now let's see how we can use Tailwind within ReasonReact and start building an app!

First, you'll need to create a new ReasonReact project -- we recommend this template (select the tailwind-starter option) which has Tailwind set up out of the box. Once you've installed the dependencies with yarn install or npm install, you should be ready to go.

Let's see an example of a React component using Tailwind:

[@react.component]
let make = () =>
  <div className="h-screen flex justify-center items-center">
    <div className="max-w-sm rounded overflow-hidden shadow-lg p-4">
      <img className="w-full" src=logo alt="Sunset in the mountains" />
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2"> {React.string("Tailwind")} </div>
        <p className="text-gray-700 text-base">
          {React.string("A reason react starter with tailwind")}
        </p>
      </div>
   </div>
  </div>;

which gives us the following UI:

← GraphQL & Apollo