Tailwind CSS is one of the rising stars in the CSS framework world. It’s especially popular in the Laravel and Vue.js community. By Markus Oberlehner.
In this article, we learn how to set up Tailwind CSS to work with a Vue CLI powered application. Because Tailwind CSS is a utility-first CSS framework which provides a lot of utility classes out of the box, its file size without any optimizations is pretty massive. But luckily, we can use PurgeCSS to improve the final bundle size of our application tremendously.
The article focuses on the following:
- Using Tailwind with Vue CLI
- Customizing the Tailwind configuration
- Reducing file size with PurgeCSS
- Writing purgeable Vue components
You will also get code examples and plenty of links to further reading. Although setting up Tailwind CSS to work with Vue.js is rather straightforward, things become a little more tricky after also adding PurgeCSS into the mix. Short and sweet!
[Read More]