Junglejs Storybook Tailwind
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
Branches
- master — JungleJS + Storybook + Tailwind CSS
- with-async-data — master + async data fetching example
Quick start
Or create a new repo with Github template.
Install and develop
# Install the global Netlify CLI package if you haven’t
npm install netlify-cli -g
# Clone and go to project directory
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 default settings & file structure as possible. Only custom configuration files are shown above.
Storybook
.storybook/main.js
In this starter, your Storybook files should have the extension .stories.js. The default sample stories are in src/stories, but you can move it anywhere within the src directory. You can override this configuration and add further customization in .storybook/main.js. More info: https://storybook.js.org/docs/configurations/overview
.storybook/preview.js
This file contains decorators for the @storybook/addon-a11y addon.
.storybook/preview-head.html
This file adds the generated CSS file (tailwind.css). Tailwind by default includes normalize and base styles, so Jungle global CSS is not necessary; I leave it commented out.
More info: https://storybook.js.org/docs/configurations/add-custom-head-tags
Tailwind
This starter uses Tailwind with PostCSS on its own, NOT integrated to Storybook custom webpack config nor to Jungle config. We simply run and watch for changes during development (start and storybook commands), and generate an optimized build version in build and build-storybook.
- To modify the postcss commands (including source and output files), open
package.json. - To integrate Tailwind with Storybook, refer to this discussion.
src/tailwind.css
Source Tailwind file. Add your additional global styles here.
src/static/tailwind.css
Output/generated Tailwind file. You should not be modifying this. It is minified during production.
postcss.config.js
PostCSS configuration file. cssnano (PostCSS minifier) and autoprefixer are only run during production (npm run build:css). More info: https://tailwindcss.com/docs/using-with-preprocessors/#using-postcss-as-your-preprocessor
tailwind.config.js
Tailwind configuration file. The purge object defines what files are checked when “purging” (removing unused Tailwind classes in production).
More info:
Deploy
Run npm run build.
Your site is in the jungle/build directory, ready to publish anywhere that hosts static sites (Github Pages, Netlify, Vercel, any cPanel-based hosting).
Netlify CI/CD
Deploy your project to a Github or GitLab repo.
Run netlify init (or ntl init for short) to start the continuous deployment wizard. With this setup, Netlify will automatically build every time you push to your chosen branch.
More info: https://docs.netlify.com/configure-builds/get-started
Vercel CI/CD
(Similar feature is available on Vercel but I haven’t got round to trying it. PR welcome.)
Credits
Boilerplate code from Jungle template. Repo icon/logo by Freepik from Flaticon.
© 2020 Eka MIT License
