@otovo/rainbow-tailwind

🌈 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

1. 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: '_',
};

1. 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