New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
scentra
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.
npm install scentra
Last updated 8 months ago
3
Downloads per week
Readme View on GitHub

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

Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI