Snowtail: Snowpack & Tailwind Starter to Speed up Theme Dev

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.)

abhijit-kar/snowtail

Theme development starter, using Snowpack & Tailwind, meant to speed up theme development in initial stage. - abhijit-kar/snowtail

GitHubabhijit-kar

Usage

Visit the git repo pointed out above and:

1. Click use template on the website or use degit: npx degit <repo-url>
2. Install dependencies: npm install
3. Generate the whole tailwind css: npm init
4. Create new branch: git checkout -b <branch-name>
5. 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?

Snowpack - The faster frontend build tool

Snowpack is a lightning-fast frontend build tool, designed for the modern web.

The faster frontend build toolToggle mobile menu

• 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.

Snowpack: 5 Reasons it should be the Standard Build Tool for Front-End Web Dev

Introducing Snowpack, the fastest ESM powered front-end build tool, that takes the development process up a notch and makes it incredibly fast.

Derpy CoderAbhijit Kar

Why Tailwind CSS?

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Documentation for the Tailwind CSS framework.

Rapidly build modern websites without ever leaving your HTML.

• 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.

Why Use Tailwind CSS for Your Next Project

Learn the benefits of using Tailwind CSS on your next project and how it differs from other CSS solutions like Styled Components.

DEV CommunityJose Felix

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.