tailwind-storybook
tailwind-storybook copied to clipboard
Published
20 hours ago •
audunru
audunru
Starter for Tailwind CSS and Storybook. Uses Create React App.
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.
audunru