Tailwind Css Purgecss And Optimization Techniques Complete Guide

Step-by-Step Guide to Using Tailwind CSS with PurgeCSS and Optimization

1. Setting Up Tailwind CSS

First, you need to install Tailwind CSS in your project. This can be done using npm or yarn.

Step 1: Create New Project

Create a new directory for your project and navigate into it:

mkdir tailwind-purgecss-project
cd tailwind-purgecss-project

Step 2: Initialize the Project

Initialize a new Node.js project:

npm init -y
# OR
yarn init -y

Step 3: Install Tailwind CSS and Dependencies

Install Tailwind CSS along with postcss and autoprefixer:

npm install tailwindcss postcss autoprefixer
# OR
yarn add tailwindcss postcss autoprefixer

Step 4: Generate Configuration Files

Run the following command to generate tailwind.config.js and postcss.config.js:

npx tailwindcss init -p
# OR
yarn tailwindcss init -p

This will create two configuration files:

• tailwind.config.js: Tailwind's configuration file.
• postcss.config.js: PostCSS configuration file.

2. Configure Tailwind CSS

Edit the tailwind.config.js to include paths for all HTML and JS files where you want to use Tailwind classes. This helps PurgeCSS in identifying which classes to keep.

// tailwind.config.js
module.exports = {
 content: [
   "./src/**/*.{html,js}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

3. Setting Up PurgeCSS

PurgeCSS helps in removing unused CSS styles from your production build, thus reducing the final size of the CSS file.

Step 1: Install @fullhuman/postcss-purgecss

You already have postcss set up, so now you need to install @fullhuman/postcss-purgecss.

npm install @fullhuman/postcss-purgecss --save-dev
# OR
yarn add @fullhuman/postcss-purgecss --dev

Step 2: Update PostCSS Configuration

Now update the postcss.config.js to include PurgeCSS plugin only in the production environment.

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html', './src/**/*.js'],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
 plugins: [
   require('tailwindcss'),
   require('autoprefixer'),
   ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
 ]
}

4. Add Tailwind to Your Stylesheet

Create a CSS file that includes the Tailwind directives so that the utility classes are available.

/* src/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5. Compile CSS with PurgeCSS

To compile the CSS and apply PurgeCSS during the process, you can modify your scripts in package.json.

Add a production script:

{
  "name": "tailwind-purgecss-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:css": "postcss src/css/tailwind.css -o src/css/output.css",
    "watch:css": "postcss src/css/tailwind.css -o src/css/output.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.7"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.1"
  }
}

6. Optimize Tailwind CSS Output

You can optimize the output of Tailwind CSS in various ways such as:

• Tree shaking: Use the purge option in tailwind.config.js.
• Minifying CSS: During the production build, ensure you're minifying the CSS.
• Configuring variants: Disable unnecessary variants to reduce the CSS file size.
• Customizing themes: Only use necessary customizations.

Example: Minifying CSS

Install a plugin like cssnano:

npm install cssnano --save-dev
# OR
yarn add cssnano --dev

Modify postcss.config.js to add cssnano:

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html', './src/**/*.js'],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  safelist: ['html', 'body'], // List any selectors here that should not be purged
});

const cssnano = require("cssnano")({
  preset: "default",
});

module.exports = {
 plugins: [
   require('tailwindcss'),
   require('autoprefixer'),
   ...(process.env.NODE_ENV === 'production' ? [purgecss, cssnano] : [])
 ]
}

7. Write HTML and JavaScript Using Tailwind CSS

You can start writing HTML and JavaScript within the src directory utilizing the Tailwind CSS utility-first approach.

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS with PurgeCSS</title>
    <link rel="stylesheet" href="css/output.css">
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
    <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-md space-y-4">
      <h1 class="text-2xl font-bold text-center">Hello Tailwind!</h1>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Click Me</button>
    </div>
</body>
</html>

8. Run Development and Production Compiles

Running in Development Mode:

Use the watch command to automatically build whenever changes happen to your HTML or CSS files.

npm run watch:css
# OR
yarn watch:css

Running for Production:

Set the Node environment to production and build once to ensure everything is purged and properly minified.

NODE_ENV=production npm run build:css
# OR (for Windows)
set NODE_ENV=production && npm run build:css
# OR (for macOS/Linux)
NODE_ENV=production yarn build:css

Full Example Directory Structure

tailwind-purgecss-project/
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── src/
    ├── index.html
    └── css/
        ├── tailwind.css
        └── output.css (generated after build)

Conclusion

By following these steps and utilizing PurgeCSS effectively alongside Tailwind CSS, you can drastically reduce your CSS file size while maintaining the functionality and responsiveness of your web application. Tailwind CSS's flexibility combined with PurgeCSS's ability to remove unused styles provides an excellent workflow for both development and production environments.