audunru/tailwind-storybook

Starter for Tailwind CSS and Storybook

Tailwind CSS + Storybook

This is a starter for Tailwind CSS and Storybook with React components.

It's written in Typescript and uses Vite. Tests are written with Vitest and React Testing Library.

Example of Storybook published to GitHub pages.

Installation

git clone https://github.com/audunru/tailwind-storybook
cd tailwind-storybook
npm i

Running Storybook

npm run storybook

Running the React application

npm run dev

Creating components

Take a look at the Button or Card component. You can duplicate this directory and its contents to get started making your own components.

Each component directory contains the following files:

File	Contains
Button.stories.tsx	Contains the Storybook component documentation (called "stories"), and is used when the Storybook is generated.
Button.test.tsx	Tests for the Button component that you can run with npm run test.
Button.tsx	The Button component, which will be used by your React application and documented by Storybook.
index.ts	Export for the Button component so you can import it in your app with import Button from "./components/Button".

Customizing Tailwind CSS

Take a look at tailwind.config.ts.