Web Development

Tailwind Purge – Reduce Filesize

Overview

This will cover how to reduce the filesize of your generated Tailwind CSS stylesheet. We are going to use npm and javascript to do the work for us.

TLDR;

If you’re short for time, you can use the source code at https://github.com/jjowens/blog-examples/tree/main/tailwind-purge. It uses two config files and one tailwind.css file. You can use either use either config js file depending on what environment you plan to use; dev or production. The npm command can be found in the package.json.

The npm command you need is

npx tailwindcss-cli@latest build tailwind.css -c tailwind.prod.config.js -o default.css
Code language: PowerShell (powershell)


This command will use the tailwind.css to generate a new stylesheet file named as default.css. It will use settings from the tailwind.prod.config.js

The Long Version

Create a new folder “tailwind-purge” and go into the folder. Run the npm command below. Keep pressing ‘Y’ for Yes. Press OK to create the package.json file.

npm init
Code language: PowerShell (powershell)

You should see the package.json file laid out like this.

{ "name": "tailwind-purge", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
Code language: JavaScript (javascript)

Update the package.json with the following settings. You will have replaced the “main” line and added a few scripts “tailwind-dev” and “tailwind-prod”.

{   "name""tailwind-purge",   "version""1.0.0",   "description""",   "private"true,   "scripts": {     "tailwind-dev""npx tailwindcss-cli@latest build tailwind.css -c tailwind.dev.config.js -o default.css",     "tailwind-prod""npx tailwindcss-cli@latest build tailwind.css -c tailwind.prod.config.js -o default.css"   },   "author""",   "license""ISC" }
Code language: JavaScript (javascript)

Let’s install Tailwind CSS in the folder through npm. Use the following command.

D:\Development\throwaway\tailwind-purge> npm i tailwindcss
Code language: PowerShell (powershell)

It will start installing tailwindcss and will add the tailwindcss package details to the package.json file.

{   "name""tailwind-purge",   "version""1.0.0",   "description""",   "private"true,   "scripts": {     "tailwind-dev""npx tailwindcss-cli@latest build tailwind.css -c tailwind.dev.config.js -o default.css",     "tailwind-prod""npx tailwindcss-cli@latest build tailwind.css -c tailwind.prod.config.js -o default.css"   },   "author""",   "license""ISC",   "dependencies": {     "tailwindcss""^2.1.1"   } }
Code language: JavaScript (javascript)

Create a new file “tailwind.css”. Copy the CSS rules below and paste inside the “tailwind.css” file. Save it.

@tailwind base; @tailwind components; .main-menu-links a {     @apply text-white no-underline } .main-menu-links a:hover {     @apply text-white underline } .main-menu-links a:visited {     @apply text-white underline font-semibold } .main-menu-links a:active {     @apply text-white underline font-semibold } @tailwind utilities;
Code language: CSS (css)

Then add two new files “tailwind.dev.config.js” and “tailwind.prod.config.js” in the same directory. Copy and paste the following settings respectively into the new files.

module.exports = {   purge: {   enabledfalse,   content: ['index.html''dashboard.js']   },   darkModefalse,   theme: {     extend: {},   },   variants: {     extend: {},   },   plugins: [], }
Code language: JavaScript (javascript)
module.exports = {   purge: {   enabledtrue,   content: ['index.html''dashboard.js']   },   darkModefalse,   theme: {     extend: {},   },   variants: {     extend: {},   },   plugins: [], }
Code language: JavaScript (javascript)

Now we will create our mock webpage. Create two more new files, “index.html” and “dashboard.js”.

The file “Index.html” will contain Tailwind CSS classnames like mx-auto, bg-blue-600 or flex.

<!DOCTYPE html> <html lang="en"> <head>     <title>Mock Website</title>     <link rel="stylesheet" type="text/css" href="default.css" media="screen"/> </head> <body class="mx-auto w-9/12 mt-2">     <div class="rounded bg-blue-600 text-white p-2">         <h1 class="text-2xl">My Website</h1>     </div>     <div></div>     <div class="flex flex-wrap mt-2">         <div class="flex-shrink-0">             <div class="mr-2 mb-2">                 <div class="rounded-t-lg bg-blue-800 text-white p-2 text-center font-semibold">                     <h2>Main Menu</h2>                 </div>                 <div class="main-menu-links bg-blue-600 p-2">                     <p><a href="#">Menu Link</a></p>                     <p><a href="#">Menu Link</a></p>                     <p><a href="#">Menu Link</a></p>                     <p><a href="#">Menu Link</a></p>                 </div>             </div>         </div>         <div>             <h2 class="text-3xl font-semibold">Dashboard</h2>             <p>Welcome aboard, User#54321</p>             <div class="clear-both"></div>             <div class="flex no-wrap">                 <div id="stockStatus" class="flex">                     Product Stocks Good!                 </div>                 <div id="salesStatus" class="flex">                     Product Sales Bad!                 </div>             </div>           </div>     </div>     <script src="dashboard.js"></script> </body> </html>
Code language: HTML, XML (xml)

The file “dashboard.js” will contain Tailwind CSS classnames like text-white, p-3 or bg-green-500.

document.addEventListener("DOMContentLoaded", (event) => {     let stockStatusObj = document.getElementById("stockStatus");     let salesStatusObj = document.getElementById("salesStatus");     let commonCSS = ["text-white""text-2xl""font-semibold""m-2""p-3"]     for (let index = 0; index < commonCSS.length; index++) {         const className = commonCSS[index];         stockStatusObj.classList.add(className);         salesStatusObj.classList.add(className);     }     stockStatusObj.classList.add("bg-green-500");     salesStatusObj.classList.add("bg-red-600"); });
Code language: JavaScript (javascript)

You should see all of the files in the same directory.

Now let’s generate the CSS file. First use the tailwind-dev npm command.

D:\Development\throwaway\tailwind-purge> npm run tailwind-dev
Code language: PowerShell (powershell)

This will execute the command listed in the package.json.

npx tailwindcss-cli@latest build tailwind.css -c tailwind.dev.config.js -o default.css
Code language: PowerShell (powershell)

What it does, it grabs file contents from the file tailwind.css to be used as a template. It will read the tailwind.dev.config.js for settings. The purge “enabled” option is set to false, so it will export all Tailwind CSS classes to the file default.css. This will be a large file, almost 4mb.

This might be best used for a dev environment to experiment with Tailwind CSS. For a production server, you might wish to reduce the file size.

You use the npm command tailwind-prod command

D:\Development\throwaway\tailwind-purge> npm run tailwind-prod
Code language: PowerShell (powershell)

This will execute the command listed in the package.json.

npx tailwindcss-cli@latest build tailwind.css -c tailwind.prod.config.js -o default.css
Code language: PowerShell (powershell)

It’s almost the same as the tailwind-dev command, except it used the tailwind.prod.config.js settings to purge unused classes.

module.exports = { purge: { enabled: true, content: ['index.html', 'dashboard.js'] }, darkMode: false, theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
Code language: JavaScript (javascript)

In the settings as shown above, the purge option is enabled and will look through the index.html and dashboard.js files. It will export Tailwind classes that are used in the index.html and dashboard.js to the default.css file. Every other Tailwind class is purged or ignored. This will result in a smaller file, around 15kb or less.

You might have noticed that in the tailwind.css, that I’ve added “main-menu-links”. This shows that you can create your own CSS style combining Tailwind CSS classes into one. This might help if you have multiple divs that shares the same CSS styles. It would be helpful having a single CSS class.

Hope that helps!