Storybook-tailwind. How should I add tailwind to storybook

In this article, we will guide you through the process of adding Tailwind CSS to Storybook to enhance your UI development. Storybook is an open-source UI that helps developers create reusable, organized UI components with proper documentation independently. Tailwind CSS is basically a utility-first CSS framework for building rapid custom UI.

Prerequisites

• React
• Node JS

Steps to add Tailwind in Storybook

Step 1: Start with creating a react application with the given command.

npx create-react-app story

Step 2: Move inside the directory(react-app) that you just created

cd story

Step 3: Install tailwindCSS via follwoing command

npm install -D tailwindcss postcss autoprefixer

Step 4: Create a file inside your src directory of project with the following name

 postcss.config.js

Step 5: Update the content of “postcss.config.js” with following code.

Javascript

//  postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

Step 6: Generate a configuration file via following command. This command will create a file named “tailwind.config.js”.

npx tailwindcss init

Step 7: Update the code of “tailwind.conifg.js” with the following code.

Javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

Step 8: All tailwind directories into the “index.css”. It is located in /src/index.css

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 9 :Now Install Storybook inside your computer via following command.

npx storybook@latest init

Step 10: Run the project via following command

npm run storybook

Project Structure

Step 11: To create a React app component, create a file in the ‘src’ folder called ‘Customtext.js’ and add the following code.

Javascript

// Customtext.js
function Customtext() {
    return (
        <div className="text-green-500
                        text-4xl
                        font-bold
                        tracking-wider
                        text-center">
            GeeksforGeeks
        </div>
    );
}
export default Customtext;

Step 12: Then make a storybook story and write the following code.

Javascript

import Customtext from "../Customtext";
import "../index.css";
export default {
    title: "Example/Customtext",
    component: Customtext,};

const Templateone = () => (
    <Customtext />);
const Templatetwo = () => (
    <Customtext />);
export const Primary = Templateone.bind(
    {});
export const Secondary =
    Templatetwo.bind({});

Output: