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
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
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
orsrc/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.