Skip to content

davidzzheng/tailwind-storybook

Repository files navigation

Better version: https://github.com/davidzzheng/s7orybook

TailwindCSS Storybook React Starter

This project is a component development environment that integrates the latest version of Storybook (6.2) with Tailwind (via @storybook/addon-postcss), TailwindCSS JIT compilation, and Webpack 5.

Why

Storybook is a tool for developing UI components in isolation using React (or any other UI framework supported by Storybook). Tailwind is a utility-first CSS framework that generates classes that can be composed to implement any design. Together, these libraries create a robust development environment that enables developers to rapidly implement UI components, no matter the complexity, in isolation with the advantage of atomic composability via Tailwind's utility classes.

Features

Setup

> yarn install
> yarn storybook

What's Next?

  • Extend the base Tailwind configuration to your liking
  • Build & publish your components with the bundler of your choice
  • Add a testing framework
  • Implement a CI/CD pipeline with tools like Chromatic

Resources