https://github.com/theodorusclarence/storybook-tsnext-tw
Storybook documentation of https://tsnext-tw.thcl.dev
https://github.com/theodorusclarence/storybook-tsnext-tw
Last synced: 3 months ago
JSON representation
Storybook documentation of https://tsnext-tw.thcl.dev
- Host: GitHub
- URL: https://github.com/theodorusclarence/storybook-tsnext-tw
- Owner: theodorusclarence
- Created: 2021-11-15T01:28:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-15T06:20:21.000Z (almost 4 years ago)
- Last Synced: 2025-02-10T13:21:58.626Z (8 months ago)
- Language: TypeScript
- Homepage: http://sb.tsnext-tw.thcl.dev/
- Size: 869 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storybook Configuration with TypeScript, Next.js, Tailwind CSS, and Webpack5
## Installation Guide (From empty repository)
1. Clone https://github.com/theodorusclarence/ts-nextjs-tailwind-starter
2. Init Storybook
```bash
npx sb init --builder webpack5
```
3. Install additional package for postcss config
```bash
yarn add -D @storybook/addon-postcss
```
4. On .storybook/main.js, change it to [this file](https://github.com/theodorusclarence/storybook-tsnext-tw/blob/main/.storybook/main.js)
5. On .storybook/preview.js, change it to [this file](https://github.com/theodorusclarence/storybook-tsnext-tw/blob/main/.storybook/preview.js)
Your Tailwind css file is supposed to be imported in preview.js
6. Add this to package.json as a requirement to fix bug of Webpack 5
```json
"resolutions": {
"webpack": "5"
},
```
then run `yarn` to install deps
7. Add this to package.json to allow accessing public folder
```json
"storybook": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s public",
```
## Vercel Deployment
Deploy to vercel with this additional config
