0
0
Tailwindmarkup~5 mins

Purging unused styles in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Purging unused styles helps make your website load faster by removing CSS you don't use.

When your website feels slow because of large CSS files.
When you want to reduce the size of your final CSS for better performance.
When you use Tailwind CSS and want to keep only the styles your pages actually need.
When preparing your website for production to improve loading speed.
When you want to avoid sending unnecessary code to users.
Syntax
Tailwind
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

The content array tells Tailwind where to look for class names to keep.

Only styles used in these files will be included in the final CSS.

Examples
This example purges unused styles by scanning only index.html.
Tailwind
module.exports = {
  content: ['./index.html'],
  theme: {},
  plugins: [],
};
This example scans all JavaScript and TypeScript files in the src folder.
Tailwind
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {},
  plugins: [],
};
This example scans HTML files in public and Vue/JS files in src.
Tailwind
module.exports = {
  content: ['./public/**/*.html', './src/**/*.{vue,js}'],
  theme: {},
  plugins: [],
};
Sample Program

This simple HTML page uses Tailwind classes for background color, padding, text size, font weight, and colors.

When you build your CSS with purge enabled, only these used styles will be included in output.css.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind Purge Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-6">
  <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind!</h1>
  <p class="mt-4 text-gray-700">This page uses only a few Tailwind styles.</p>
</body>
</html>
OutputSuccess
Important Notes

Make sure the content paths in your Tailwind config match where your HTML or JS files are.

If you forget to include a file, styles used there might get removed.

During development, you can disable purging for faster builds, then enable it for production.

Summary

Purging removes unused Tailwind CSS styles to make your site faster.

Set the content option in your Tailwind config to tell it where to look for used classes.

Always check your final CSS size and test your site after purging to avoid missing styles.