juvoni / tailwind-storybook

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.

Example of Storybook published to GitHub pages.

Installation

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

cd tailwind-storybook

yarn install

Running Storybook

yarn start-storybook

Running the React application

yarn start

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.css	Imports the main index.css file, which contains classes from Tailwind CSS. You don't have to add anything here if you're just going to use Tailwind's classes directly in your components.
Button.js	The Button component, which will be used by your React application and documented by Storybook.
Button.stories.js	Contains the Storybook component documentation (called "stories"), and is used when the Storybook is generated.
Button.test.js	Tests for the Button component that you can run with yarn test.
index.js	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.js.

Deploy to Github Pages

Change the repository URL in package.json to your own repository:

  "repository": {
    "type": "git",
    "url": "https://github.com/johnshickson/epic-storybook"
  },

Run:

yarn deploy-storybook

Background

To get Tailwind CSS working with Storybook and Create React App, you can setup Tailwind CSS as a postcss plugin in Storybook's webpack.config.js and Craco's craco.config.js. That's what this starter does, in case you were wondering.