How to setup Tailwind 3 + PostCSS + Storybook for fast refresh in dev mode?

Question

I am trying to create a standalone UI library using React and Tailwind. I am using Storybook to test the components. Specifically, there is no builder like Vite or Next.js involved.

Following the instructions in the docs, I was able to setup PostCSS to generate the final CSS. The only issue is that Storybook does not refresh when I make code changes (especially tailwind.config.js). I have postcss running with --watch, but I suspect it doesn't look for changes to tailwind.config.js. What's the best way to improve the developer experience? Ideally, I would like PostCSS to be triggered whenever tailwind.config.js changes or any of the React components change.

Here's my minimal repo: https://github.com/nareshbhatia/tailwindcss-storybook

Here are the relevant scripts in package.json. Running npm run dev starts up storybook, the bundler and postcss in watch mode:

{
  "scripts": {
    "dev": "run-p bundle generate-css storybook",
    "bundle": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
    "generate-css": "postcss src/styles/tailwind.css -o public/main.css --watch",
    "storybook": "start-storybook -p 6006"
  }
}

hey hey! Dear Naresh, I wonder if you could recommend your setup to anyone who wants to build UI library (and use it in projects without tailwind deps) — Vladislav Sorokin
– Vladislav Sorokin, Commented Mar 24, 2023 at 15:40

Naresh · Accepted Answer · 2022-08-28 18:57:23Z

1

I finally solved the issue by running chokidar and triggering a postcss run whenever any file of my choice changed. See the postcss-dev script below:

  "scripts": {
    "dev": "run-p postcss-dev storybook",
    "build": "rimraf dist && run-s run-postcss copy-css",
    "postcss-dev": "chokidar \"src/css/**/*\" \"public/theme-*.css\" --command \"npm run run-postcss\"",
    "run-postcss": "postcss src/css/index.css -o public/turbo-ds.css --verbose",
    "copy-css": "copyfiles --all --up 1 \"public/**/*\" dist",
    "storybook": "start-storybook -p 6006 --quiet",
    "build-storybook": "build-storybook",
    "clean": "rimraf .turbo node_modules dist public/turbo-ds.css storybook-static"
  },

answered Aug 28, 2022 at 18:57

Naresh

25.9k35 gold badges147 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to setup Tailwind 3 + PostCSS + Storybook for fast refresh in dev mode?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related