🌈 rainbow-tailwind

Otovo's design system implemented using Tailwind

Getting started

1. Setup Tailwind by following the instructions in the official Tailwind installation documentation.

2. Install @otovo/rainbow-tailwind

yarn add @otovo/rainbow-tailwind

3. Create the file tailwind.config.js at the root of your project. This is where we add the Rainbow overrides:

const plugin = require('tailwindcss/plugin');
const { theme, variants, plugins } = require('@otovo/rainbow-tailwind/dist');

module.exports = {
  theme,
  variants,
  plugins: Object.values(plugins).map((p) => plugin(p)),
  prefix: '_',
};

4. Profit! ✨

Documentation 📚

Rainbow documentation is available at https://rainbow.otovo.com, and updated using the rainbow-documentation repo. Remember to update the documentation when making changes.

It is highly recommended to read the official Tailwind documentation, as this projects depend upon it heavily.

Development 👩🏼‍💻

To make it easier to test changes to rainbow-tailwind locally, you can set up a link to cloud or rainbow-documentation (or both). Linking the repo can be done as follows (assuming you have placed the repos in ~/projects):

cd ~/projects/rainbow-tailwind
yarn link

cd ~/projects/cloud
yarn link @otovo/rainbow-tailwind

Great! You're almost set. To rebuild the distribution whenever you change something, run...

yarn dev

Publishing 📦

To release a new version to NPM, run...

yarn release

The script will hold your hand through the rest of the process. Remember to use semantic versioning.

Using Tailwind with Rainbow in Cloud

To use rainbow-tailwind

In order to use tailwind with the raibow-tailwind, some classes name need to be adapted when you will have to code some UI using rainbow-tailwind

Prefix '_' to use Tailwind in Cloud:

To be able to use Tailwind classes, they need to be call with the prefix '_' For instance, if you want to set a fixed width, you will see in the Tailwind's documentation the following syntax:

<div class="w-8 ..."></div>

In cloud, you will have to write:

<div class="_w-8 ..."></div>

Responsive classes:

Rainbow has its own breakpoint delimiters. If you want to use the responsive classes described in Tailwind's documentation, you will have to use the matching syntax in Rainbow:

Tailwind Breakpoint prefix | Rainbow-tailwind equivalent | Minimum width -- | -- | -- ❌| s2 | 368px ❌| s3 | 480px sm | m | 640px md | m2| 768px ❌| m3| 960px lg | l | 1024px xl | l2 | 1280px 2xl | l3 | 1536px

Font classes:

Font classes used in Rainbow are matching the ones used in Tailwind except text-base:

Taiwind class | Rainbow-tailwind class -- | -- text-base | _text-md

Width: Taiwind class | Rainbow-tailwind class | Properties -- | -- | -- w-| _w-0 | width: 0px; w-0.5| ❌| 0.125 rem; w-1 | _w-1 | width: 0.25rem; w-1.5 |❌ | width: 0.375rem; w-2 | _w-2 | width: 0.5rem; w-2.5 |❌ | width: 0.625rem; w-3 | _w-3 | width: 0.75rem; w-3.5 | ❌| width: 0.875rem; w-4 | _w-4 | width: 1rem; w-5 | _w-5 | width: 1.25rem; w-6 | _w-6 | width: 1.5rem; w-7 |❌ | width: 1.75rem; w-8 | _w-8 | width: 2rem; w-9 | ❌| width: 2.25rem; w-10 | _w-8 | width: 2.5rem; w-11 | ❌| width: 2.75rem; w-12 | _w-12 |width: 3rem; w-14 | ❌| width: 3.5rem; w-16 | _w-16 | width: 4rem; w-20 | _w-20 |width: 5rem; w-24 | _w-24 | width: 6rem; w-28 | ❌| width: 7rem; w-32 | _w-32 | width: 8rem; w-36 | ❌| width: 9rem; w-40 | _w-40 | width: 10rem; w-44 |❌| width: 11rem; w-48 | _w-48 | width: 12rem; w-52 |❌| width: 13rem; w-56 | _w-56 | width: 14rem; w-60 | ❌| width: 15rem; w-64 | _w-64 | width: 16rem; w-72 | ❌| width: 18rem; w-80 | _w-80 | width: 20rem; w-96 |_w-96 | width: 24rem; ❌| _w-112 | 28rem ❌| _w-128 | 32rem ❌| _w-160 | 40rem ❌| _w-192 | 48rem ❌| _w-224 | 56rem ❌| _w-256 | 64rem ❌| _w-320 | 80rem ❌| _w-384 | 96rem w-auto | _w-auto | width: auto; w-px |_w-px| width: 1px; w-1/2 | _w-1/2 | width: 50%; w-1/3 | _w-1/3 | width: 33.333333%; w-2/3 |_w-2/3| width: 66.666667%; w-1/4 |_w-1/4| width: 25%; w-2/4 | _w-2/4 | width: 50%; w-3/4 | _w-3/4| width: 75%; w-1/5 |_w-1/5 | width: 20%; w-2/5 | _w-2/5 | width: 40%; w-3/5 |_w-3/5 | width: 60%; w-4/5 |_w-4/5 | width: 80%; w-1/6 |_w-1/6 | width: 16.666667%; w-2/6 | _w-2/6 | width: 33.333333%; w-3/6 |_w-3/6 | width: 50%; w-4/6 | _w-4/6 | width: 66.666667%; w-5/6 | _w-5/6| width: 83.333333%; w-1/12 |_w-1/12 | width: 8.333333%; w-2/12 |_w-2/12| width: 16.666667%; w-3/12 | _w-3/12 | width: 25%; w-4/12 | _w-4/12 | width: 33.333333%; w-5/12 | _w-5/12 | width: 41.666667%; w-6/12 | _w-6/12 | width: 50%; w-7/12 | _w-7/12 | width: 58.333333%; w-8/12 |_w-1/2 | width: 66.666667%; w-9/12 | _w-8/12 | width: 75%; w-10/12 |_w-10/12 | width: 83.333333%; w-11/12 |_w-11/12 | width: 91.666667%; w-full | _w-full |width: 100%; w-screen | _w-screen |width: 100vw;

Max-width:

Taiwind class | Rainbow-tailwind class | Properties -- | -- | -- max-w-0 | _w-max-0 | max-width: 0rem; max-w-none | _max-w-none | max-width: none; max-w-xs | _max-w-80 | max-width: 20rem; max-w-sm |_max-w-96 | max-width: 24rem; max-w-md | _max-w-112 | max-width: 28rem; max-w-lg | _max-w-128 | max-width: 32rem; max-w-xl | ❌| max-width: 36rem; max-w-2xl | ❌| max-width: 42rem; max-w-3xl | _max-w-128 | max-width: 48rem; max-w-4xl | _max-w-224 | max-width: 56rem; max-w-5xl | _max-w-256 |max-width: 64rem; max-w-6xl | ❌| max-width: 72rem; max-w-7xl | _max-w-320 | max-width: 80rem; max-w-full | _max-w-full | max-width: 100%; max-w-min | ❌| max-width: min-content; max-w-max | ❌| max-width: max-content; max-w-prose | ❌| max-width: 65ch; max-w-screen-sm | ?tbd| max-width: 640px; max-w-screen-md | ? | max-width: 768px; max-w-screen-lg | ? tbd| max-width: 1024px; max-w-screen-xl | ❌| max-width: 1280px; max-w-screen-2xl | ❌| max-width: 1536px;

Min-width: Taiwind class | Rainbow-tailwind class | Properties -- | -- | -- min-w-0 | _w-min-0 | min-width: 0rem; ❌| _min-w-none | min-width: none; ❌| _min-w-80 | min-width: 20rem; ❌|_min-w-96 | min-width: 24rem; ❌| _minw-112 | min-width: 28rem; ❌| _min-w-128 | min-width: 32rem; ❌| _min-w-128 | min-width: 48rem; ❌| _min-w-224 | min-width: 56rem; ❌| _min-w-256 |min-width: 64rem; ❌| _min-w-320 | min-width: 80rem; min-w-full | _min-w-full | min-width: 100%; ❌| _min-screen| screen: '100vw'

Height: Taiwind class | Rainbow-tailwind class | Properties -- | -- | -- h-0 | _h-0 | height: 0px; h-0.5 | ❌|height: 0.125rem; h-1 | _h-1 |height: 0.25rem; h-1.5 | ❌| height: 0.375rem; h-2 | _h-2 | height: 0.5rem; h-2.5 | ❌| height: 0.625rem; h-3 |_h-3 | height: 0.75rem; h-3.5 | ❌| height: 0.875rem; h-4 | _h-4 | height: 1rem; h-5 | _h-5| height: 1.25rem; h-6 | _h-6| height: 1.5rem; h-7 | ❌| height: 1.75rem; h-8 | _h-8| height: 2rem; h-9 | ❌|height: 2.25rem; h-10 |_h-10 | height: 2.5rem; h-11 | ❌| height: 2.75rem; h-12 | _h-12 |height: 3rem; h-14 | ❌| height: 3.5rem; h-16 | _h-16 |height: 4rem; h-20 |_h-20 | height: 5rem; h-24 | _h-24 |height: 6rem; h-28 | ❌| height: 7rem; h-32 | _h-32 |height: 8rem; h-36 | ❌|height: 9rem; h-40 | _h-40 |height: 10rem; h-44 | ❌| height: 11rem; h-48 | _h-48 |height: 12rem; h-52 | _h-52 |height: 13rem; h-56 |_h-56 | height: 14rem; h-60 | ❌| height: 15rem; h-64 |_h-64 | height: 16rem; h-72 | ❌| height: 18rem; h-80 | _h-80 |height: 20rem; h-96 |_h-96 | height: 24rem; h-auto |_h-auto | height: auto; h-px | _h-px | height: 1px; h-1/2 | _h-1/2 | height: 50%; h-1/3 | _h-1/3 | height: 33.333333%; h-2/3 |_h-2/3 | height: 66.666667%; h-1/4 | _h-1/4 |height: 25%; h-2/4 | _h-2/4 | height: 50%; h-3/4 | _h-3/4 | height: 75%; h-1/5 | _h-1/5 | height: 20%; h-2/5 | _h-2/5 | height: 40%; h-3/5 | _h-3/5 | height: 60%; h-4/5 | _h-4/5 | height: 80%; h-1/6 | _h-1/6 | height: 16.666667%; h-2/6 | _h-2/6 | height: 33.333333%; h-3/6 | _h-3/6 | height: 50%; h-4/6 | _h-4/6 | height: 66.666667%; h-5/6 |_h-5/6 | height: 83.333333%; h-full | _h-full | height: 100%; h-screen | _h-screen |height: 100vh;

Max-height: Taiwind class | Rainbow-tailwind class | Properties -- | -- | -- max-h-0 | _max-h-0 | max-height: 0px; max-h-0.5 |❌ | max-height: 0.125rem; max-h-1 | _max-h-1 |max-height: 0.25rem; max-h-1.5 |❌ | max-height: 0.375rem; max-h-2 | _max-h-2 | max-height: 0.5rem; max-h-2.5 |❌ | max-height: 0.625rem; max-h-3| _max-h-3 |max-height: 0.75rem; max-h-3.5|❌ | max-height: 0.875rem; max-h-4 | _max-h-4 |max-height: 1rem; max-h-5 | _max-h-5 |max-height: 1.25rem; max-h-6 | _max-h-6 |max-height: 1.5rem; max-h-7 |❌ | max-height: 1.75rem; max-h-8 | _max-h-8 |max-height: 2rem; max-h-9|❌ | max-height: 2.25rem; max-h-10| _max-h-10 |max-height: 2.5rem; max-h-11|❌ | max-height: 2.75rem; max-h-12| _max-h-12|max-height: 3rem; max-h-14 |❌ | max-height: 3.5rem; max-h-16| _max-h-16 |max-height: 4rem; max-h-20| _max-h-20 |max-height: 5rem; max-h-24| _max-h-24 |max-height: 6rem; max-h-28 |❌ | max-height: 7rem; max-h-32| _max-h-32 |max-height: 8rem; max-h-36 |❌ | max-height: 9rem; max-h-40| _max-h-40 |max-height: 10rem; max-h-44 |❌ | max-height: 11rem; max-h-48| _max-h-48 |max-height: 12rem; max-h-52 |❌ |max-height: 13rem; max-h-56| _max-h-56 |max-height: 14rem; max-h-60 |❌ | max-height: 15rem; max-h-64| _max-h-64 |max-height: 16rem; max-h-72 |❌ | max-height: 18rem; max-h-80| _max-h-80 |max-height: 20rem; max-h-96| _max-h-96 |max-height: 24rem; max-h-px| _max-h-px |max-height: 1px; max-h-full| _max-h-full |max-height: 100%; max-h-screen| _max-h-screen |max-height: 100vh;

Min-height: Taiwind class | Rainbow-tailwind class | Properties -- | -- | -- min-h-0 | _w-0 | min-width: 0rem; ❌| _min-h-none | min-width: none; ❌| _min-h-80 | min-width: 20rem; ❌|_min-h-96 | min-width: 24rem; ❌| _min-h-112 | min-width: 28rem; ❌| _min-h-128 | min-width: 32rem; ❌| _min-h-128 | max-width: 48rem; ❌| _min-h-224 | min-width: 56rem; ❌| _min-h-256 |min-width: 64rem; ❌| _min-h-320 |min-width: 80rem; min-h-full | _min-h-full | min-width: 100%; ❌| _min-screen| screen: '100vw'

MEMO: REM/PX equivalents 1rem = 16px by default REM | PIXELS | -- | -- | 0rem| 0px 0.125 rem|2px 0.25rem|4px 0.375rem|6px 0.5rem|8px 0.625rem|10px 0.75rem|12px 0.875rem|14px 1rem|16px 1.25rem|20px 1.5rem|24px 1.75rem|28px 2rem|32px 2.25rem|36px 2.5rem|40px 2.75rem|44px 3rem|48px 3.5rem|56px 4rem|64px 5rem|80px 6rem|96px 7rem|112px 8rem|128px 9rem|144px 10rem|160px 12rem|192px 13rem|208px 14rem|224px 15rem|240px 16rem|256px 18rem|288px 20rem|320px 24rem|384px 28rem|448px 32rem|512px 40rem|640px 48rem|768px 56rem|896px 64rem|1024px

Colors:

use rainbow colors described at official Rainbow colors

Kitchen sink

You will find in installerweb a file named kitchen-sink.html that shows different rainbow components developped with Tailwind/Jinja2 : kitchen sink in installerweb