Docs
πŸš€ ⏐ Getting Started
Setup

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 -D tailwindcss postcss autoprefixer

2. Initialize Tailwind

Still in the terminal, initialize Tailwind CSS by running:

npx tailwindcss init -p

Result: This command creates a tailwind.config.js and a postcss.config.js file in your project root.

Add the reablocks package from your node modules to the content array in your tailwind.config.js file:

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/reablocks/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Configure Tailwind

Configure default colors tokens (primary, secondary, success, etc) in your tailwind.config.js file:

import colors from 'tailwindcss/colors';
import plugin from 'tailwindcss/plugin';
import { colorPalette } from 'reablocks';
 
const config: Config = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/reablocks/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: colorPalette.blue[500],
          active: colorPalette.blue[500],
          hover: colorPalette.blue[600],
          inactive: colorPalette.blue[200]
        },
        secondary: {
          DEFAULT: colorPalette.gray[700],
          active: colorPalette.gray[700],
          hover: colorPalette.gray[800],
          inactive: colorPalette.gray[400]
        },
        success: {
          DEFAULT: colorPalette.green[500],
          active: colorPalette.green[500],
          hover: colorPalette.green[600]
        },
        error: {
          DEFAULT: colorPalette.red[500],
          active: colorPalette.red[500],
          hover: colorPalette.red[600]
        },
        warning: {
          DEFAULT: colorPalette.orange[500],
          active: colorPalette.orange[500],
          hover: colorPalette.orange[600]
        },
        info: {
          DEFAULT: colorPalette.blue[500],
          active: colorPalette.blue[500],
          hover: colorPalette.blue[600]
        },
        background: {
          level1: colorPalette.white,
          level2: colorPalette.gray[950],
          level3: colorPalette.gray[900],
          level4: colorPalette.gray[800],
        },
        panel: colorPalette['black-pearl'],
        surface: colorPalette['charade'],
        typography: {
          DEFAULT: colorPalette['athens-gray'],
        },
        accent: {
          DEFAULT: colorPalette['waterloo'],
          active: colorPalette['anakiwa']
        },
      }
    }
  },
  plugins: [
    plugin(({ addVariant }) => {
      addVariant('disabled-within', '&:has(input:is(:disabled),button:is(:disabled))');
    })
  ]
};
 
export default config;

4. Include Tailwind

After installing Tailwind CSS, you need to inject its styles into your project. Do this by adding Tailwind's directives to your main CSS file. These directives include @tailwind base;, @tailwind components;, and @tailwind utilities;. Here's how:

  • Open or create your main CSS file. This file is typically located at src/index.css or src/styles.css.
  • Add the following Tailwind directives at the top of your CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;

Result: These directives inject Tailwind's base styles, component classes, and utility classes into your stylesheet, making them available throughout your project.

5. Install Reablocks

npm install reablocks --save

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 (opens in a new tab) 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.