JungleJS + Storybook + TailwindCSS starter site
A starter site for:
- JungleJS — Svelte and GraphQL-based static site generator
- Storybook — UI development environment
- TailwindCSS — utility-first CSS framework
git clone https://github.com/ekafyi/junglejs-storybook-tailwind.git cd junglejs-storybook-tailwind # Install dependencies npm install # Start Jungle server npm run start # Start Storybook server npm run storybook
Jungle runs on
Storybook runs on
root ├── .storybook # Storybook config ├── src │ ├── # ... Jungle components & routes dir │ ├── stories # Storybook sample stories │ ├── tailwind.css # Tailwind source file │ └── template.html # Jungle template (with global.css swapped for tailwind.css) ├── static │ ├── # ... other Jungle assets │ ├── global.css # default Jungle CSS (not used) │ └── tailwind.css # Tailwind output/generated file ├── # ... default jungle & package files ├── postcss.config.js └── tailwind.config.js
This starter uses as much…
But as of now, Jungle does not have live reload yet. We have to restart the server any time we make a change. While only partially addressing the needs for live reload, we can use Storybook for developing UI components. Even in project with hot reloading/live reload, it’s useful to have an isolated UI development environment like Storybook, which also provides us with various addons, from accessibility to testing. Finally, Tailwind provides customizable, utility-first CSS, which helps us build our UI faster.
And thus this starter site was born.
For a quick start, you can click the “Use this template” button on the Github repository or run
git clone https://github.com/ekafyi/junglejs-storybook-tailwind.git.
Let me know if you're building anything with this!