Open In App
Related Articles

Storybook-tailwind. How should I add tailwind to storybook

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

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

fig

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:

apple



Last Updated : 22 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads