This post is about Snowtail, a starter template made using Snowpack & Tailwind, that can help speed up the theme development process.
It's simple really, you can create this from scratch, if you just read the Snowpack documentation.
However to save time of everyone involved, I have created this starter template.
N.B. It's just to speed up development, and not for production build!
Feel free to clone it and create separate branches and start converting those PSDs or design specs, to functional & responsive websites.
Demo
You can interact with the starter directly here, Β or visit Snowtail Website.
Development
There are so many steps involved, I forgot most of them. Pardon my Google Amnesia. π
Here's what I could recall.
Source Code
For the people who like to get down to code, you can see the source for Snowtail directly in the browser.
See: Snowtail VSCode Online.
Steps
I'm not adding the exact steps as each of them are a topic of their own, also following official guide will get you the right result.
Besides, technology changes so fast, whatever I mention will be outdated by the end of this year!
So here's a overview of what I did:
- Initialized git, npm, snowpack, tailwind. (They generated their respective configs.)
- Created index html, js, & css files.
- Wired them together.
- Made the design using Tailwind CSS.
- Added Dark / Light theme switcher, along with Gradients.
- Added Canvas Confetti π to show how easy it is to use an npm package with Snowpack.
- And finally Deployed to GitHub pages. (Optional of course.)
Usage
Visit the git repo pointed out above and:
- Click use template on the website or use degit:
npx degit <repo-url>
- Install dependencies:
npm install
- Generate the whole tailwind css:
npm init
- Create new branch:
git checkout -b <branch-name>
- Start the Snowpack server:
npm start
Instead of using a router, just keep adding html files to the root, and navigate to those pages manually and keep developing.
Do the same for modals, notification and every other component you can think of.
A development environment doesn't need any complexity like a router or a bloat like a single page application.
And once you are done, you can pick up the template and drop it where it's supposed to be used in the main theme or application.
Follow the KISS principle and Keep it Simple Silly!
Reason
Why Use This?
I can think of several reasons to use a starter like this:
- Refreshing the tab after every little change is a massive time suck.
- Setting up the dev environment is a hassle.
- Configuring build tools gets old fast.
- Project has progressed half way through and you have to design a pop up, and you can't just keep opening that after every change.
- Production environment might have unnecessary optimization or plugins that slow down development.
- Hot Module Replacement or Fast Refresh of existing build environment might be broken. (Ejected Angular or React Webpack might have this issue!)
I have had all of the above issues happen to me, and I wished there was a better way.
Why Snowpack?


- It starts in under 15ms.
- It's a stripped out version, with no plugins, no bloat.
- Comes with Hot Module Replacement.
- Has support for JSX & TypeScript.
- Doesn't do unnecessary optimization in development stage.

Why Tailwind CSS?


- Styles are directly present on HTML, so no fumbling about the css file to find them.
- Easy to move both the markup and style, as they are glued together nicely.
- Extracting components is much easier. See: Extracting Components Docs.
- Built in Dark Mode support!
- Tons of Free Components and Resources to use:
- Tailwind Components
- Tailwind Toolbox
- Tailwind UI - Official UI Components from Tailwind.
- Awesome Tailwind - For an Exhaustive & Extensive list.


Conclusion
After spending several years converting design specs to responsive websites, and countless hours of pain, I finally came across tools that truly alleviates all of the issues encountered during initial theme development.
I hope this helps you, as it helps me.
Let me know your thoughts, down in the comments below.
- Experiments
- Tips
- Web Development
- Tutorials
- #JavaScript
Abhijit Kar
I bring 5 years worth of industry experience to the table and everything I learnt from countless hours of experimentation over a decade.
Checkout :
Leave a Comment