A Design System using React + tailwindcss + Storybook
To build the common dependencies: npm run build
on the root folder
With turbo the tailwind instructions below are no longer necessary, just run npm run dev
on the root folder and evertyhing will start.
- To generate the css output file, cd into the packages/react folder and run
$ npx tailwindcss -i .\src\globals.css -o ./src/output.css
(optionally use the --watch argument at the end)
Solution below is no longer necessary with Turbo
While storybook is running, to view the changes in realtime, we need to run both the react and tailwind commands in separate terminals. For example, for me to see the changes reflect in storybook for a component inside packages/react.
Open three terminals, one runningnpm run dev
from packages/docs, another two terminals each running inside packages/reactnpm run dev
and the tailwind command above with --watch
Log into npm cli: npm login
To setup the changeset run:
$npm run changeset
To generate the version metadata file run:
$npm run version-packages"
To deploy to npm run:
$npm run release
Components
- Avatar
- Box
- Button
- Checkbox
- Heading
- Multistep
- Text
- Text Area
- Text Input