Optimize tailwind for a production ready React project

I have been working with tailwind for the past one year and it makes styling easier than ever. I am so spoiled by its flexibility that I cannot imagine working on a web application without using it. If you use tailwind for your projects, then you know how simple it is to work with it. You can make a div to look like a button with hover animation, shadow effects and every thing by throwing in just a few selectors.

A CSS file with all the tailwind classes can be generated easily using the tailwind build command.

$ npx tailwindcss build -o src/index.css

   tailwindcss 2.0.2

   🚀 Building from default CSS... 

   ✅ Finished in 2.72 s
   📦 Size: 3.75MB
   💾 Saved to src/index.css

The command will fill all the classes available in tailwind into the target index.css file. This CSS file can be imported to the index.js file of your react project to make it available globally for all the components.

If you take a look at the result of the build command, then you cannot miss but notice that the total size of the index.css file is 3.75MB. This is reasonable considering the fact that tailwind bundles more than 10,000 selectors but the question here is, "Do you really need all those classes in a production bundle?".

I have shipped 2 production ready react applications styled with tailwind and it hardly required more than 200 classes in total. Consider you are shipping a react application to production and if you import a complete tailwind CSS file, then it means that you are forcing the users to download 3.75MB of unnecessary data.

This is where the concept of purging comes into play. Instead of shipping your app with thousands of unwanted classes thereby increasing the application bundle's size, you can effectively leverage the tailwind purge feature to remove unused classes from the CSS file when bundling the final build of the application.

Let's see how it is done.

For this demo, I bootstrapped a sample react app with create-react-app. I have filled the default index.css file created by CRA with tailwind classes using the tailwind build command.

I have created a new component named DemoButtonComponent.js and this is going to hold just 3 divs in it, styled with tailwind selectors.

If you take a look at the above component, it uses only 25 tailwind classes in total. For these 25 classes, we obviously do not need a CSS file which weighs over 3.75MB in size. So let's trim it down to make it production ready.

The first step is to generate a tailwind.config.js file. This can be done easily by running npx tailwindcss init from the root of the react project. The generated config file will have a few key-value pairs which can be configured based on project needs.

For this demo, we are going to concentrate only on the purge: [] array. For a typical react project, I would recommend filling in the array with the following

 javascript
module.exports = {
  purge: [
    "./public/**/*.html",
    "./src/**/*.js",
    "./src/**/*.jsx",
    "./src/**/*.tsx",
  ],
};

This will look for the matching files within your project and will fill in only the required tailwind selectors into the index.css file (or the target CSS file you choose).

One important thing to keep in mind is that, tailwind will initiate purging only if the environment is production because in reality you will need the whole tailwind bundle during development. So the environment must be overridden to generate the optimized (or purged) CSS file.

 shell
# For linux / Mac / from git bash
$ export NODE_ENV=production && npx tailwindcss build -o src/index.css -c tailwind.config.js

# For windows 
$ set NODE_ENV=production 
$ npx tailwindcss build -o src/index.css -c tailwind.config.js

Setting the environment variable NODE_ENV to production will make tailwind to build the CSS file with only the required classes. After running the script, the following is the result I got,

 shell
   tailwindcss 2.0.2

   🚀 Building from default CSS... 

   ✅ Finished in 2.52 s     
   📦 Size: 12.43KB
   💾 Saved to src/index.css

The CSS file size has reduced significantly all the way from 3.75MB to 12.43KB and when you run npm run build after this, CRA will minify the CSS reducing the file size further.

⚠️One important thing to keep in mind is that the purgecss module used by tailwind will look for complete strings within the files. So if you have a scenario where the selectors are dynamically filled with partial strings, then those have to be avoided or modified to include the complete selector strings.

Example

This is not cool...

This is totally cool...

Read this article from tailwind docs to know more

That's is all for today... That is how you generate an optimized tailwind CSS for your production build.

Other reads

Building a doc Q&A chatbot with Next.js and GPT