In this article, we’ll look at how to use Tailwind CSS in Vue and React, we’ll also learn how to conditional tree-shake our CSS styles.

Performance on the web is a pretty big deal nowadays as it can make or mar your product. It has moved from being something to be worked on after a product launches to being a very important part to be considered in any development process as web performance is a huge part of user experience(UX).

• According to this study, The average online user expects your pages to load in 4 seconds or less and 40% are more likely to abandon your site after three seconds
• This blog post shows how optimizing Pinterest’s website for performance saw a 15% increase in SEO traffic and a 15% increase in conversion rate to signup

What is a bundle size?

To understand what a bundle size means, we have to understand what bundling is.

Bundling is the process of a bundler(like webpack, parcel, or snowpack) to combine different groups of assets such as HTML, CSS, JavaScript, and images to produce a smaller file known as a bundle. Bundling is necessary to reduce the number of HTTP requests the browser has to make to serve content to users.

Bundle size is the size of any generated bundle and it affects how long it takes for our websites and web apps to load.

In this article, we’ll be exploring how to reduce our Tailwind CSS powered app bundle size by tree-shaking Tailwind CSS, we will also learn how to use PurgeCSS with Tailwind in production, we will explore how to do that in JavaScript frameworks such as Vue and React.

What is Tailwind CSS?

It’s a utility-first CSS library used to build custom designs, it offers no pre-configured styles and components to build with, rather it offers you a set of unopinionated building blocks known as utility/helper classes to help you style your components.

According to its official documentation:

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

What is PurgeCSS?

PurgeCSS is a development workflow tool for removing unused CSS in a project, it is the default library for controlling Tailwind CSS bundle sizes. It tree-shakes unused styles and optimizes CSS build sizes.

According to its official documentation:

PurgeCSS analyzes your content and your CSS files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your CSS, resulting in smaller CSS files.

Prerequisites

This tutorial assumes the reader has the following:

• Node.js 10x or higher installed on their PC
• Yarn / npm 5.6 or higher installed on their PC. This tutorial will be making use of Yarn
• Basic knowledge of JavaScript and how Vue.js and React works
• Vue CLI installed on your PC
• Basic knowledge of how CSS works
• Basic understanding of how atomic CSS architecture works

You can install Vue CLI with the following command using Yarn:

yarn global add @vue/cli

Verify the installation was successful by running vue in your terminal. You should see a list of the available commands.

#react #vue #javascript #tailwindcss #web-development