Purging Unused CSS for Production in Tailwind CSS


Purging Unused CSS for Production in Tailwind CSS

One of Tailwind CSS's strengths is its utility-first approach, which can lead to a large CSS file due to the sheer number of utility classes. To ensure that your production CSS file remains lean and only contains the styles you actually use, Tailwind CSS provides a mechanism for purging unused CSS.

How Purging Works

Purging in Tailwind CSS involves scanning your HTML, JavaScript, and other template files to identify which utility classes are used. Tailwind then removes any unused styles from the final CSS output. This process reduces the size of the CSS file and improves page load times.

Setting Up Purge in Tailwind CSS

1. Basic Purge Configuration

Tailwind CSS uses the content key in the tailwind.config.js file to specify which files to scan for class names. The purge process is integrated into this configuration.

Here's how to configure it:

  1. Create or Update tailwind.config.js

    // tailwind.config.js module.exports = { content: ['./src/**/*.{html,js,jsx,ts,tsx}'], // Paths to your template files theme: { extend: {}, }, plugins: [], }

    In this example:

    • The content key is set to scan all HTML, JavaScript, JSX, TypeScript, and TSX files in the src directory. Adjust the paths based on your project's structure.
  2. Specify Paths to Templates

    Ensure that the paths you provide cover all files where Tailwind utility classes are used. For instance:

    • If you're using a templating engine like EJS or Pug, include those file types in the content array.
    • For projects using component libraries or frameworks (e.g., Vue, React), include the relevant file extensions.

2. Advanced Purge Configuration

For more complex projects, you might need to refine your purge configuration to exclude certain files or handle dynamic class names.

  • Using Patterns

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

    Patterns allow you to include or exclude specific file types or directories.

  • Safelisting Classes

    Sometimes, classes are generated dynamically or used in ways that static analysis might miss. Use the safelist option to ensure these classes are not purged.

    // tailwind.config.js module.exports = { content: ['./src/**/*.{html,js,jsx,ts,tsx}'], safelist: [ 'bg-blue-500', 'text-center', /^bg-/ // Regular expression to safelist all background color classes ], theme: { extend: {}, }, plugins: [], }

    In this example:

    • 'bg-blue-500': Explicitly safelists the bg-blue-500 class.
    • 'text-center': Explicitly safelists the text-center class.
    • /^bg-/: Uses a regular expression to safelist all classes that start with bg-.

3. Purging in Production

When using build tools, ensure that purging is enabled only for production builds. Tailwind CSS purges automatically in production mode when using tools like Webpack or PostCSS.

  • Using PostCSS

    Ensure that the NODE_ENV environment variable is set to production during the build process.

    NODE_ENV=production npx postcss src/styles/tailwind.css -o dist/styles.css

    This command ensures that Tailwind CSS purges unused styles in production mode.

  • Using Webpack

    Webpack’s mode option controls the environment, and Tailwind CSS will automatically purge unused styles when mode is set to production.

    // webpack.config.js module.exports = { mode: 'production', // Set Webpack mode to production entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader', 'postcss-loader'], }, ], }, }