Setting up tailwind css to avoid big file sizes

Setting up tailwind css to avoid big file sizes

14 minutes 28s
Tailwind css generates very big files by default. With simple changes in tailwind.config.js we can make tailwind remove all the unused css classes and utilities.

On Tailwind css configuration

Tailwindcss has a lot of options to be configured. Enough to be confusing. If configured improperly, it can generate very big sizes — almost 4MB — so the wrong config can be pretty bad.

Let's go through a simple setup to avoid this problem and make sure the file sizes are not excessively big.

Install Nodejs >= v11 (if not already in the system)


# we are using Ubuntu
sudo apt-get update
# add nodesource, we need at least nodejs v11
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install nodejs

Check the version


node -v




Welcome to Node.js v14.17.1.

Installing Tailwind and Postcss

Tailwind uses postcss, so we will need to install it, in addition to tailwindcss and any plugins we are using.

For now feel free to not install the plugins until you need them. If you use a component that requires a plugin, the compilation step will break and give you a message of which plugin you are missing.


mkdir myproject
cd myproject
npm init
# tailwind and postcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli
# also install any tailwind plugins
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/forms

The package.json created by npm init now has all the dependencies we installed listed. It will look similar to the one below.


# package.json
{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "postcss": "^8.3.5",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.4"
  }
}

Tailwind.css

We need to create one more configuration file, specifying which parts of tailwind we want to use.

For this, we create a tailwind.css with the following contents.


@tailwind base;
@tailwind components;
@tailwind utilities;

The directives in this file will, on compilation, be replaced but the contents of the tailwindcss library.

The default config

We are ready to create a default tailwind.config.js file


npx tailwindcss init

We get a file with these contents


// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

The default build

To build a version from tailwind css for our project we need to pass the path to tailwind.css, and an output file — here named tailwind-styles.css.

It is this last file that we will include in our website.


NODE_ENV=production npx tailwindcss-cli@latest build tailwind.css -o tailwind-styles.css

We can see here the produced size (3.81MB!). Including a file this big could make our website very slow (and, in mobile connections, might quickly deplete our uses mobile data plan)


npx: installed 123 in 5.888s

   tailwindcss 2.1.4

   🚀 Building: tailwind.css

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

   ✅ Finished in 4.27 s
   📦 Size: 3.81MB
   💾 Saved to tailwind-styles.css

The solution: purge to reduce build size

Let's go back to the tailwind.config.js. We will use the purge option to add our html, js files. We want to add any files where we are using tailwind css classes.

Tailwind example — in the documentation — asumes a src folder, but you should customize. If you only use html files on the root folder, for instance, './*.html' might be a valid option.


// tailwind.config.js
module.exports = {
  // Use one or more paths that works for your project
  // example: '*.html'
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Let's test it

We create a test html file to test it

<!DOCTYPE html>
<head>
    <link href="tailwind-styles.css" rel="stylesheet" />
</head>
<body>
<!--
We use a tailwind class.
Only this will be included in the output.
The rest will be purged.
 -->
<div class="text-red-500">Hello Tailwind</div>
</body>
</html>

With our config


// tailwind.config.js
module.exports = {
  purge: ['*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

And we compile it with:


NODE_ENV=production npx tailwindcss-cli@latest build tailwind.css -o tailwind-styles.css

The result is a much more (10.86KB) compressed file, only including the utility classes we used.


npx: installed 123 in 6.252s

   tailwindcss 2.1.4

   🚀 Building: tailwind.css

   ✅ Finished in 3.44 s
   📦 Size: 10.86KB
   💾 Saved to tailwind-styles.css
Notes See transcript

Notes

• Nodesource binary distributions
https://github.com/nodesource/distributions

• Tailwindcss installation options
https://tailwindcss.com/docs/installation

• Tailwindcss configuration
https://tailwindcss.com/docs/configuration

• Tailwindcss optimzing for production
https://tailwindcss.com/docs/optimizing-for-production