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

1. Initialize reablocks

Open your terminal, navigate to your project's root directory, and use the reablocks-cli to initialize reablocks in your project:

npx reablocks-cli@latest init

2. Include Tailwind

ℹ️

If you already have Tailwind included, you can skip this step.

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.

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

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

👋 ⏐ Introduction Philosophy