< Back

Light-speed frontend prototyping with create-vite-tailwind

Sun, 11 Sep 2022

(tl;dr: create-vite-tailwind on npm)

As someone trying to get into pivot into full stack web development following a recent job loss, I knew I would have to spend time building some frontend to prove myself to prospective employers. Frontend Mentor seemed like a great addition to the portfolio - professional grade designs that look great and offer a wide range of opportunities to learn various frontend techniques, on top of getting a little practice in a designer-developer workflow, albeit a very one-sided one. So I set out to build some of these projects.

I’ve spent a lot of time building web apps using the old “save a change, restart the server, refresh the browser” loop. And if you have too, I don’t have to tell you how hard it is to go back to that once you’ve seen the light of browser sync/hot reload/etc. One of the fastest build tools out right now is Vite, which is an absolute treat to use and I recommend you try it out if you haven’t.

But something else I (and a lot of other people) have been really excited about is TailwindCSS, which (among other things) offers fantastic developer experience. You rarely, if ever, have to write bespoke CSS, instead using Tailwind’s plethora of utility classes to style your elements however you want. Writing frontend with Tailwind really feels like hitting the ground running - there’s a lot of friction in writing CSS classes that for the most part is completely taken care of by Tailwind.

The problem, though, is getting them to work together. While it’s true that Tailwind really shines with a component-based framework like React or Vue, sometimes that isn’t what you want, and I found that they were unnecessary for the Frontend Mentor flow, where you really focus on design and less on functionality. I don’t know if I’m the only person who thought this was a missing piece, but even the official Tailwind docs only offer guides on installing with Vite when using React or Vue.

As an aside, Tailwind does have a play CDN that you can link in your HTML and use most of Tailwind, but it’s still missing some important details like modifier classes (hover:, active:, responsive widths, etc.) so it really didn’t solve my problem.

Since this was something I could see a lot of use for, I created an npm initializer package to suit the use case. On top of automatically installing and configuring Tailwind, it’s extremely minimal, containing only those files necessary for a quick prototype. This package is very much aimed at prototypes and other simple use cases.

To jumpstart a project using this package, just run:

$ yarn create vite-tailwind <name>
$ cd <name>
$ yarn dev

And you’re up and running in less than 30 seconds, with all the fast refresh and Tailwind magic you could want. (You can also use the corresponding npm commands, but I recommend yarn, again for its speed.)

It’s a pretty simple package that I haven’t noticed any issues with yet, but it’s major version 0 for now. If you do notice an issue, or have a suggestion, I welcome all sorts of issues on GitHub (I did get a comment about optionally including UI frameworks like Daisy, which I’m super open to if people would use it) - or PRs!

Bonus: while writing this post, caniuse-lite made a breaking change that completely broke this package, among many others. Thanks to Andrey of PostCSS and autoprefixer for fixing so quickly!

Note: This post was originally published on dev.to.

  • npm
  • webdev
  • vite
  • tailwindcss