Minifying Tailwind.css with Create React App

Tailwind.css, my favorite CSS framework, has a pretty good section on how to minify for production builds. The workflow with CreateReactApp, however, needs some polish. This is a quick post demonstrating the integration.

1. Eject from the Create React App framework

npm run eject

Create React App obfuscates the complexity of webpack and babel by wrapping everything in a set of scripts particular to the CRA environment. Tailwind’s minification, which relies on PurgeCSS under the hood, needs to modify those complex webpack configs that CRA works so hard to hide.

2. Install postcss-purgecss

npm install --save-dev @fullhuman/postcss-purgecss

3. Follow the remaining Tailwind minification steps

a. Enable purging in the tailwind.js file

b. Add the purgeCSS config to the top of webpack.config.js

c. Add the new purgecss style loader to the list of filters in line 16

Be sure to run du -ch on your build directory to make sure we’re actually minifying our build!