Purging unused styles in Tailwind - Mini Project: Build & Apply

Purging Unused Styles with Tailwind CSS

📖 Scenario: You are building a simple webpage using Tailwind CSS. To keep your CSS file small and fast, you want to remove unused styles from the final build.

🎯 Goal: Create a basic HTML page with Tailwind CSS classes, then configure Tailwind to purge unused styles by specifying the correct content paths.

📋 What You'll Learn

Create an HTML file with Tailwind CSS classes

Add a Tailwind configuration file

Specify the content paths in the Tailwind config for purging

Build the final CSS with purging enabled

💡 Why This Matters

🌍 Real World

Purging unused CSS styles helps websites load faster by reducing file size, improving user experience especially on slow connections.

💼 Career

Web developers often optimize CSS delivery using tools like Tailwind's purge feature to create efficient, maintainable websites.

1

Create a simple HTML file with Tailwind classes

Create an HTML file named index.html with a <main> element that has the classes bg-blue-500 and text-white. Inside <main>, add a <h1> with the text Welcome to Tailwind and the class text-3xl.

Tailwind

  Welcome to Tailwind

Need a hint?

Use the class attribute to add Tailwind classes to your HTML elements.

2

Create the Tailwind configuration file

Create a file named tailwind.config.js and add a module.exports object with an empty content array.

Tailwind

module.exports = {
  content: [
    // Add your content paths here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Need a hint?

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

3

Add content paths to Tailwind config for purging

In tailwind.config.js, add the path './index.html' inside the content array to tell Tailwind to scan this file for used classes.

Tailwind

module.exports = {
  content: [
    // Add './index.html' here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Need a hint?

Put the exact string './index.html' inside the content array.

4

Build the final CSS with purging enabled

Run the Tailwind CLI command npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify to generate the final CSS file with unused styles removed. Assume your input CSS file ./src/input.css contains @tailwind base;, @tailwind components;, and @tailwind utilities;.

Tailwind

# Run the Tailwind CLI build command in your terminal
# Your code here

Need a hint?

Use the exact CLI command to build your CSS with purging.