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.
Installation and building Tailwind for production in Vue
Installing the CLI package globally gives us access to the vue
command in our terminal, the vue create
command helps us create a new project:
First, create a new Vue project with the command:
vue create vue-tailwind
The project name “vue-tailwind” can be replaced with whatever name you deem fit.
Running this command gives you an interactive scaffolding experience, where you can choose the packages your app will need, you can also decide to save the configuration as a preset for your future projects.
Next, change the directory to the project folder:
cd vue-tailwind
Next, spin up the development server in the browser for the newly created app by running one of these commands:
yarn serve or npm run serve
Your app should be running on http://localhost:8080 by default after running the command:
Next, let’s install the Tailwind CSS library. To install Tailwind with Yarn package manager, type in the following:
yarn add tailwindcss
Then, create a default config file for your project with the Tailwind CLI utility which was included with the tailwindcss
package, this helps to customize your Tailwind installation:
npx tailwindcss init
This command creates a tailwind.config.js
file in your project’s base directory, the file houses all of Tailwind’s default configuration.
Next, create a styles
folder in the src/assets
folder then create a tailwind.css
file inside the folder, this is where we will be importing Tailwind’s base
, components
, and utilities
styles configurations.
Use the @tailwind
directive to inject Tailwind’s base
, components
, and utility
styles into your CSS, place the following content in your tailwind.css
file:
@tailwind base; @tailwind components; @tailwind utilities;
Next, create a postcss.config.js
in the root directory of your project and include the following:
module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ] }
Compile and build the styles generated from your tailwind.css
file with the Tailwind CLI utility tool, run this command:
npx tailwindcss build src/assets/styles/tailwind.css -o src/assets/styles/index.css
This command should yield something similar to this:
We can see the output size for the development build is 2.26MB uncompressed, now that’s huge.
Proceed to import your index.css
file into your app, place the following lines of code in your App.vue
file like this:
<style src="./assets/styles/index.css">
Open your App.vue
and add some random styles from the default styles provided by tailwind to the template.
The build step for our building our styles can be abstracted into an npm script, open your package.json
file and include a style
script in the scripts
object.
Place the following lines of code in the package.json
file:
"scripts": { "style": "tailwindcss build src/assets/styles/index.css -o src/assets/styles/tailwind.css", // other scripts }
Next, let’s build our app for production, we will be using the command:
yarn build
This command starts the vue-cli-service build
process which produces a production-ready super optimized bundle in the dist/
directory.
In your CLI you should get the following:
We can see the build for the CSS is quite huge for an app that only contains the default styles, imagine a scenario where we added new styles to extend the existing styles.
Reducing the file size with PurgeCSS
Next, let’s include the configurations for PurgeCSS. Open your tailwind.config.js
file and replace the purge
array between the module.exports
with the following:
purge: { enabled: true, content: [ './src/**/*.vue', './public/**/*.html', ] },
What we’ve done is, we’ve fed an array of paths for PurgeCSS to check, it goes through the files in the specified paths then purges
all classes that are not defined in any of the files provided in the array.
Running the Tailwind utility command to build the styles again and bundling for production will see a very significant drop in the CSS chunk size.
Run the following command:
yarn style && yarn build
When we run the production build we can see a massive size reduction of our CSS file and with this size reduction comes an improvement in how fast our app loads for users.
Installation and building Tailwind for production in React
First, create a new project with create-react-app, type in the following command into your terminal:
npx create-react-app react-tailwind
create-react-app is the official React build tool for bootstrapping and scaffolding React projects. Built on top of webpack, it is a tool that solves the hassles of configuring and setting up the build processes for projects and lets you focus on writing the code that powers your app.
Next, change your working directory to your project folder:
cd react-tailwind
Next, install Tailwind CSS in your project:
yarn add tailwindcss
Then proceed to initialize Tailwind CSS in your project with the Tailwind CLI utility tool, which was included with the tailwindcss
package, this help tool creates a tailwind.config.js
file in your project’s base directory, the file houses all of Tailwind’s default configuration. To customize your Tailwind installation:
npx tailwindcss init
Next, create a tailwind.css
file inside the /src
folder, this is where we will be importing Tailwind’s base
, components
, and utility
styles configurations.
Use the @tailwind
directive to inject Tailwind’s base
, components
, and utility
styles into your CSS, place the following content in your tailwind.css
file:
@tailwind base; @tailwind components; @tailwind utilities;
Next, create a postcss.config.js
in the root directory of your project and include the following:
module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ] }
Next, open your App.js
and add some random styles from the default styles provided by Tailwind to the template.
Then proceed to delete the contents of your index.css
file then compile and build the styles generated from your tailwind.css
file into the index.css
file with the Tailwind CLI utility tool, run this command:
npx tailwindcss build src/tailwind.css -o src/index.css
This command should yield a development build of 2.44 MB, which is very huge.
Run the command:
yarn build
Bundling our project for production also yields a CSS chunk size of 186.66 KB which is a very big size for an app of this size.
Reducing the file size with PurgeCSS
Next, let’s include the configurations for PurgeCSS, Open your tailwind.config.js
file and include the following between the module.exports
:
purge: { content: [ 'src/**/*.js', 'src/**/*.jsx', 'public/**/*.html', ] },
What we’ve done is, we’ve fed an array of paths for PurgeCSS to check, it goes through the files in the specified paths then purges
all classes that are not defined in any of the files provided in the array.
Running the Tailwind utility command to build the styles again and bundling for production will see a very significant drop in the CSS chunk size.
Run the following command:
npx tailwindcss build src/tailwind.css -o src/index.css && yarn build
You should get a development build of ~14KB and a production build size of less than 2KB.
Caveat: You should only use PurgeCSS in production environments, purging styles during development means you have to recompile Tailwind very often, especially in cases where you need utility classes not used in your previous build. Enabling production only purging can be set up by including the enabled
option in your PurgeCSS configuration and setting it to build based on what environment it is, include the following in your purge
object:
enabled: process.env.NODE_ENV === 'production'
Although using PurgeCSS solves most of your size control needs, another way to reduce your Tailwind CSS file size is by removing unused styles configuration values from your tailwind.config,.js
file such as:
- Removing unused colors from the default color palette to include only colors used in the project
- Removing unused media queries breakpoint
- Disabling unused utilities and variants
These other strategies improve our CSS build significantly but are not as effective as using purgeCSS to tree-shake our unused styles.
Conclusion
In this article, we’ve seen how to use Tailwind CSS in Vue and React, we’ve also seen how to conditional tree-shake our CSS styles based on what environment we’re building for. You can read more in the documentation.
LogRocket: Full visibility into your production React apps
Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?
Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.
No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
Thanks for this article,it was really helpful
Many thanks for the detailed tips – much appreciated.
“scripts”: {
“style”: “tailwindcss build src/assets/styles/index.css -o src/assets/styles/tailwind.css”,
// other scripts
}
isnt the index.css and tailwind.css need to be swapped in your package.json script?