JungleJS + Storybook + TailwindCSS starter

📷 Cover image: Isaac Quesada

ekafyi / junglejs-storybook-tailwind

Starter site for JungleJS + Storybook + TailwindCSS

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

Installation

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 localhost:3000.

Storybook runs on localhost:6006.

Directory structure

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…

View on GitHub

JungleJS is a new static site generator. All Svelte goodness + GraphQL data layer = fast, performant static site. Jungle’s underlying philosophy seems to resemble Eleventy, except Jungle uses Svelte.

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!

---

Bonus track