Step 4: Tailwind 0.6.2 and file size improvements

[stefanzweifel]

Tailwind 0.6.2 has been released and comes with a new feature: shadowLookup.

From the release notes:

You can now use @apply to apply classes that aren't defined but would exist if @tailwind utilities was included in the same CSS file. This is mostly useful on projects that are setup to process multiple styles independently, for example a Vue.js project where you are using the <style> block of your single file components.

These updates fix the core problem I was facing in this demo project. The @tailwind utilities; had to be added at the start of every <style> block in every Vue component. This caused the final JavaScript Bundle size to grow with every newly added component.
With Tailwind 0.6.2 this problem goes away. The previous minified Bundle clocked in at 1.9MB. The new minified Bundle is only 99kb in size. That's 95% smaller!

Another cool benefit of this approach: You don't need purgecss or any other tool that removes unused CSS.

---

So with the setup of this repo and the article I've written back in February, I think you start leveraging the power of Tailwind CSS in your Vue.js project (I certainly will).

It also closes #5.