DEV Community

loading...
Cover image for Configuring Tailwind CSS to be live reload friendly (feat. Create React App)

Configuring Tailwind CSS to be live reload friendly (feat. Create React App)

EnderShadow8
・2 min read

Firstly, I have to point out that this is not intended as a general guide to setting up a React project with Tailwind. There are already excellent resources here and here. I'm assuming you already know a bit about Tailwind and possibly React.

Recently I started learning Tailwind CSS and I decided to use it in a React project created using Create React App. CRA has a nice builtin development server command which watches for file changes and recompiles your code accordingly.

Tailwind has a neat feature which tree-shakes all unused styles (and there are a lot!) before compilation, to reduce the file size.

// tailwind.config.js
module.exports = {
  darkMode: false,
  purge: {
    enabled: true,
    content: [
      "./src/**/*.{js,jsx}",
    ]
  },
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}
Enter fullscreen mode Exit fullscreen mode

The Tailwind docs suggested using CRACO to compile Tailwind before launching the react-scripts server. This appears to work on the surface...

// App.js
import React from "react"

export default function() {
  return (
    <div className="text-blue-500">
      Hello world
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Hello world

But say if I change my mind and decide that the text should be red...

// App.js
import React from "react"

export default function() {
  return (
    <div className="text-red-500">
      Hello world
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Hello world

That's definitely not red.

What went wrong?

Tailwind compiles its styles before the development server is started. This means, unlike my React components, it can't be recompiled on file changes. It read my code, decided I didn't need the red style, and therefore got rid of it.

The solution seems simple enough: why not keep all the styles in the development build?

Easier said than done.

Tailwind only supports one configuration file, and besides, you want to keep your other configurations, such as custom themes, the same in both development and production builds.

After a lot of headaches, I found a solution so simple that it made me feel incredibly stupid.

Find and replace.

In Bash, the sed command can find and replace regexes in a specified input file. I'm using Windows Subsystem for Linux Ubuntu, but anything else like Git Bash could also work on Windows.

Using the npm pre-scripts, this little command solves the problem:

"prestart": "sed -i 's/enabled: true/enabled: false/' tailwind.config.js",
"start": "craco start",
"prebuild": "sed -i 's/enabled: false/enabled: true/' tailwind.config.js",
"build": "craco build",
Enter fullscreen mode Exit fullscreen mode

It simply tries to find an enabled option in the Tailwind config file, and sets it to either true or false. This works not only in Create React App, but any other live reloading service you happen to be using Tailwind with.

I hope this solves you a lot of headaches.

Discussion (0)