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:
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 thesrc
directory. Adjust the paths based on your project's structure.
- The
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.
- If you're using a templating engine like EJS or Pug, include those file types in the
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 thebg-blue-500
class.'text-center'
: Explicitly safelists thetext-center
class./^bg-/
: Uses a regular expression to safelist all classes that start withbg-
.
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 toproduction
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 whenmode
is set toproduction
.// 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'], }, ], }, }