Setup

This section will guide you through the initial steps required to integrate Tailwind CSS into your project. Tailwind CSS is a utility-first CSS framework that can be customized to fit the design needs of your project. Follow these instructions to ensure a smooth setup.

Install Steps

ℹ️

If you already have Tailwind installed, you can skip to step 3.

1. Installing Tailwind CSS

Open your terminal, navigate to your project’s root directory, and run the following command:

npm install tailwindcss @tailwindcss/cli

pnpm add tailwindcss @tailwindcss/cli

yarn add tailwindcss @tailwindcss/cli

bun add tailwindcss @tailwindcss/cli

2. Import Tailwind in your CSS

Add the @import “tailwindcss”; import to your main CSS file.

@import "tailwindcss";

3. Install Reablocks

npm install reablocks --save

pnpm add reablocks

yarn add reablocks

bun add reablocks

4. Add Reablocks to your CSS as a source to be used by Tailwind

After installing Tailwind CSS, you need to inject reablocks styles into your project.

Open or create your main CSS file. This file is typically located at src/index.css or src/styles.css.
Add the reablocks as a source to be used by Tailwind at the top of your CSS file:

@source "../node_modules/reablocks/index.css";

Result: The reablocks styles are now available to be used by Tailwind.

5. Configure Reablocks tokens for Tailwind

Configure default colors tokens (primary, secondary, success, etc) in your main stylesheet file:

  /* Color tokens */
  :root,
  :host {
    --reablocks-theme: dark;
 
    /* Primary colors */
    --primary: var(--color-blue-500);
    --primary-active: var(--color-blue-500);
    --primary-hover: var(--color-blue-400);
    --primary-inactive: var(--color-blue-200);
 
    /* Secondary colors */
    --secondary: var(--color-charade);
    --secondary-active: var(--color-charade);
    --secondary-hover: var(--color-gray-700);
    --secondary-inactive: var(--color-gray-600);
 
    /* Success colors */
    --success: var(--color-green-500);
    --success-active: var(--color-green-500);
    --success-hover: var(--color-green-400);
    --success-background: var(--color-green-950);
 
    /* Error colors */
    --error: var(--color-red-500);
    --error-active: var(--color-red-500);
    --error-hover: var(--color-red-400);
    --error-background: var(--color-red-950);
 
    /* Warning colors */
    --warning: var(--color-orange-500);
    --warning-active: var(--color-orange-500);
    --warning-hover: var(--color-orange-400);
    --warning-background: var(--color-orange-950);
 
    /* Info colors */
    --info: var(--color-blue-500);
    --info-active: var(--color-blue-500);
    --info-hover: var(--color-blue-400);
    --info-background: var(--color-blue-950);
 
    /* Panel colors */
    --panel: var(--color-black-pearl);
    --panel-accent: var(--color-charade);
 
    /* Surface colors */
    --surface: var(--color-charade);
    --surface-accent: var(--color-blue-500);
 
    /* Text colors */
    --text-primary: var(--color-athens-gray);
    --text-secondary: var(--color-waterloo);
 
    /* Custom Backgrounds */
    --bottom-border-glow: radial-gradient(
      circle at center,
      var(--color-anakiwa) 0,
      blue,
      transparent 100%
    );
    --button-gradient: linear-gradient(
      283deg,
      #0808a5 0%,
      rgba(8, 8, 165, 0) 100%
    );
    --button-gradient-hover: linear-gradient(
      283deg,
      #44f 0%,
      rgba(23, 23, 255, 0.1) 100%
    );
    --button-gradient-focus: linear-gradient(
      283deg,
      #0d0dd2 0%,
      rgba(23, 23, 255, 0.1) 100%
    );
 
    &.theme-light,
    &[data-theme="light"] {
      --reablocks-theme: light;
 
      /* Primary colors */
      --primary: var(--color-blue-500);
      --primary-active: var(--color-blue-500);
      --primary-hover: var(--color-blue-600);
      --primary-inactive: var(--color-gray-500);
 
      /* Secondary colors */
      --secondary: var(--color-blue-200);
      --secondary-active: var(--color-blue-200);
      --secondary-hover: var(--color-blue-300);
      --secondary-inactive: var(--color-waterloo);
 
      /* Success colors */
      --success: var(--color-green-500);
      --success-active: var(--color-green-500);
      --success-hover: var(--color-green-600);
      --success-background: var(--color-green-100);
 
      /* Error colors */
      --error: var(--color-red-500);
      --error-active: var(--color-red-400);
      --error-hover: var(--color-red-600);
      --error-background: var(--color-red-100);
 
      /* Warning colors */
      --warning: var(--color-orange-500);
      --warning-active: var(--color-orange-500);
      --warning-hover: var(--color-orange-600);
      --warning-background: var(--color-orange-100);
 
      /* Info colors */
      --info: var(--color-blue-500);
      --info-active: var(--color-blue-500);
      --info-hover: var(--color-blue-600);
      --info-background: var(--color-blue-100);
 
      /* Panel colors */
      --panel: var(--color-white);
      --panel-accent: var(--color-mystic);
 
      /* Surface colors */
      --surface: var(--color-gray-300);
      --surface-accent: var(--color-blue-500);
 
      /* Text colors */
      --text-primary: var(--color-vulcan);
      --text-secondary: var(--color-gray-700);
    }
  }
 
  /* Custom variants */
  @custom-variant dark (&:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *));
  @custom-variant light (&:where(.theme-light, .theme-light *, [data-theme=light], [data-theme=light] *));
  @custom-variant disabled-within (&:has(input:is(:disabled), textarea:is(:disabled), button:is(:disabled)));
 
  /* Define theme tokens */
  @theme {
    /* Fonts */
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: Fira Code, monospace;
 
    /* Font sizes */
    --text-xs: 0.625rem; /* 10px */
    --text-xs--line-height: 1rem;
    --text-sm: 0.75rem; /* 12px */
    --text-sm--line-height: 1rem;
    --text-base: 0.875rem; /* 14px */
    --text-base--line-height: 1.25rem;
    --text-lg: 1rem; /* 16px */
    --text-lg--line-height: 1.5rem;
 
    /* Primary colors */
    --color-primary: var(--primary);
    --color-primary-active: var(--primary-active);
    --color-primary-hover: var(--primary-hover);
    --color-primary-inactive: var(--primary-inactive);
 
    /* Secondary colors */
    --color-secondary: var(--secondary);
    --color-secondary-active: var(--secondary-active);
    --color-secondary-hover: var(--secondary-hover);
    --color-secondary-inactive: var(--secondary-inactive);
 
    /* Success colors */
    --color-success: var(--success);
    --color-success-active: var(--success-active);
    --color-success-hover: var(--success-hover);
    --color-success-background: var(--success-background);
 
    /* Error colors */
    --color-error: var(--error);
    --color-error-active: var(--error-active);
    --color-error-hover: var(--error-hover);
    --color-error-background: var(--error-background);
 
    /* Warning colors */
    --color-warning: var(--warning);
    --color-warning-active: var(--warning-active);
    --color-warning-hover: var(--warning-hover);
    --color-warning-background: var(--warning-background);
 
    /* Info colors */
    --color-info: var(--info);
    --color-info-active: var(--info-active);
    --color-info-hover: var(--info-hover);
    --color-info-background: var(--info-background);
 
    /* Panel colors */
    --color-panel: var(--panel);
    --color-panel-accent: var(--panel-accent);
 
    /* Surface colors */
    --color-surface: var(--surface);
    --color-surface-accent: var(--surface-accent);
 
    /* Text colors */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
 
    /* Base colors */
    --color-white: #ffffff;
    --color-black: #000000;
 
    /* Gray scale */
    --color-gray-*: initial;
    --color-gray-100: #f7f7fa;
    --color-gray-200: #e6e6f0;
    --color-gray-300: #c9c9d6;
    --color-gray-400: #77778c;
    --color-gray-500: #5c5c73;
    --color-gray-600: #3d3d4d;
    --color-gray-700: #242433;
    --color-gray-800: #1e1e2e;
    --color-gray-900: #11111f;
    --color-gray-950: #02020f;
 
    /* Magenta */
    --color-magenta-*: initial;
    --color-magenta-100: #fae5f6;
    --color-magenta-200: #f1bfe9;
    --color-magenta-300: #e480d3;
    --color-magenta-400: #d740be;
    --color-magenta-500: #c900a8;
    --color-magenta-600: #ab018f;
    --color-magenta-700: #8c0276;
    --color-magenta-800: #6e025c;
    --color-magenta-900: #4f0343;
    --color-magenta-950: #31042a;
 
    /* Pink */
    --color-pink-*: initial;
    --color-pink-100: #fde5f1;
    --color-pink-200: #f9bfdb;
    --color-pink-300: #f480b7;
    --color-pink-400: #ee4094;
    --color-pink-500: #de006b;
    --color-pink-600: #bb015a;
    --color-pink-700: #98014a;
    --color-pink-800: #740239;
    --color-pink-900: #510229;
    --color-pink-950: #2e0318;
 
    /* Lime */
    --color-lime-*: initial;
    --color-lime-100: #f4fae5;
    --color-lime-200: #e3f3bf;
    --color-lime-300: #c6e880;
    --color-lime-400: #aadc40;
    --color-lime-500: #8ed000;
    --color-lime-600: #78b001;
    --color-lime-700: #628f01;
    --color-lime-800: #4c6f02;
    --color-lime-900: #364e02;
    --color-lime-950: #202e03;
 
    /* Teal */
    --color-teal-*: initial;
    --color-teal-100: #e5fbf9;
    --color-teal-200: #bff6f0;
    --color-teal-300: #80ede0;
    --color-teal-400: #40e5d1;
    --color-teal-500: #00dcc2;
    --color-teal-600: #00c2ab;
    --color-teal-700: #019a88;
    --color-teal-800: #017365;
    --color-teal-900: #024b42;
    --color-teal-950: #02231f;
 
    /* Cyan */
    --color-cyan-*: initial;
    --color-cyan-100: #e5f9fe;
    --color-cyan-200: #bff0fb;
    --color-cyan-300: #80e2f8;
    --color-cyan-400: #40d3f4;
    --color-cyan-500: #00c5f0;
    --color-cyan-600: #01a7cb;
    --color-cyan-700: #0289a6;
    --color-cyan-800: #036b82;
    --color-cyan-900: #044d5d;
    --color-cyan-950: #052f38;
 
    /* Violet */
    --color-violet-*: initial;
    --color-violet-100: #f0e8fd;
    --color-violet-200: #dac5f9;
    --color-violet-300: #b58bf3;
    --color-violet-400: #9152ee;
    --color-violet-500: #6c18e8;
    --color-violet-600: #5b14c5;
    --color-violet-700: #4b10a1;
    --color-violet-800: #3a0d7e;
    --color-violet-900: #2a095b;
    --color-violet-950: #190537;
 
    /* Purple */
    --color-purple-*: initial;
    --color-purple-100: #f3e5fc;
    --color-purple-200: #e2bff7;
    --color-purple-300: #c580f0;
    --color-purple-400: #a840e8;
    --color-purple-500: #8b00e0;
    --color-purple-600: #7501bc;
    --color-purple-700: #5f0298;
    --color-purple-800: #490274;
    --color-purple-900: #330350;
    --color-purple-950: #1d042d;
 
    /* Red */
    --color-red-*: initial;
    --color-red-100: #fce5e6;
    --color-red-200: #f7bfc1;
    --color-red-300: #f08083;
    --color-red-400: #e84045;
    --color-red-500: #e00007;
    --color-red-600: #b70006;
    --color-red-700: #8e0005;
    --color-red-800: #660104;
    --color-red-900: #3d0103;
    --color-red-950: #200204;
 
    /* Orange */
    --color-orange-*: initial;
    --color-orange-100: #fef3e5;
    --color-orange-200: #fde1bf;
    --color-orange-300: #fbc280;
    --color-orange-400: #f8a340;
    --color-orange-500: #f68500;
    --color-orange-600: #cb6e00;
    --color-orange-700: #9f5701;
    --color-orange-800: #743f01;
    --color-orange-900: #482802;
    --color-orange-950: #251602;
 
    /* Yellow */
    --color-yellow-*: initial;
    --color-yellow-100: #fff9e5;
    --color-yellow-200: #fff1bf;
    --color-yellow-300: #ffe380;
    --color-yellow-400: #ffd440;
    --color-yellow-500: #ffc600;
    --color-yellow-600: #d2a300;
    --color-yellow-700: #a58001;
    --color-yellow-800: #785e01;
    --color-yellow-900: #4b3b02;
    --color-yellow-950: #261f03;
 
    /* Green */
    --color-green-*: initial;
    --color-green-100: #eef8e9;
    --color-green-200: #d5efc8;
    --color-green-300: #aadf91;
    --color-green-400: #80ce5b;
    --color-green-500: #55be24;
    --color-green-600: #469d1d;
    --color-green-700: #377c16;
    --color-green-800: #275c10;
    --color-green-900: #183b09;
    --color-green-950: #091a02;
 
    /* Blue */
    --color-blue-*: initial;
    --color-blue-100: #e7efff;
    --color-blue-200: #c3d7ff;
    --color-blue-300: #87aeff;
    --color-blue-400: #4c86ff;
    --color-blue-500: #105eff;
    --color-blue-600: #0d4ed2;
    --color-blue-700: #0a3da6;
    --color-blue-800: #082d79;
    --color-blue-900: #051c4c;
    --color-blue-950: #041028;
 
    /* Named colors */
    --color-black-pearl: #02020f;
    --color-athens-gray: #f7f7fa;
    --color-mystic: #e6e6f0;
    --color-vulcan: #11111f;
    --color-charade: #242433;
    --color-waterloo: #77778c;
    --color-anakiwa: #93b6ff;
  }

6. Initialize Theme Provider

Wrap your application with the ThemeProvider component from reablocks.

import { ThemeProvider, theme } from 'reablocks';
 
// NOTE: You can extend 'theme' with your own custom theme tokens.
 
export const App = () => (
  <ThemeProvider theme={theme}>
    <YourComponents />
  </ThemeProvider>
);

You can learn more about the ThemeProvider here.

7. Setup Storybook

Optionally: If you are using Storybook, you can setup the reablocks in Storybook by adding the following code to .storybook/preview.js:

import type { Preview } from "@storybook/react";
import { ThemeProvider, theme } from "reablocks";
 
export const decorators = [
  Story => (
    // NOTE: You can extend 'theme' with your own custom theme tokens.
    <ThemeProvider value={theme}>
      <Story />
    </ThemeProvider>
  )
];
 
const preview: Preview = {
  // Your other configurations here too
  decorators: [withProvider],
};

You can learn more about the Storybook setup here.

Example Repository

You can use the following repository to get started with Reablocks.

Developing Locally

If you want to run the project locally, its really easy!

The project uses Storybook for its demos and development environment. To run it locally:

Clone the repository. First, clone the repository to your local machine using Git:

git clone git@github.com:reaviz/reablocks.git

Install dependencies. Navigate to the project directory and install the necessary dependencies:

npm install

Start Storybook. Once the installation is complete, start the Storybook development server:

npm start

Result: This command runs Storybook locally and opens it in your default web browser at http://localhost:9009. You can now view your components, experiment with their properties, and see changes in real-time.

Building for Distribution with Rollup

Our project uses Rollup for bundling and preparing the package for distribution. To build the project, simply run:

npm run build

Result: This command generates a dist folder containing the bundled JavaScript, CSS files, and type definitions, ready for deployment or distribution.

👋 ⏐ Introduction Philosophy