How to set up tailwindcss with create-react-app + jit feature

Ako — Sun, 27 Jun 2021 08:19:13 +0000

If you used create react app + tailwindcss before, probably you noticed that website is slow to load in development mode or when you want to use inspect feature and debug things, Css takes time to load,or in worst scenario if you want to add some custom color pallets and also use dark mode, maybe browser unable to load the CSS file!whaaaat??? why??? Because tailwindcss creates a huge Css file under the hood in the size of megabytes, and max size the browser supports is about 20MB. Above that browser gives up to load the file. But there is a solution.
Recently tailwind introduced "jit" mode 😍. Just in time Css build, that generates CSS on demand and there will be no need to that huge Css file for your website to look good. But jit mode needs Postcss 8. As you know CRA 4 (that is the current version), uses Postcss 7 😞 .
Buuuuut! there is a workaround! lets see how to set up tailwindcss jit feature with CRA.

Create App

first create your app using CRA:



npx create-react-app my-app

Set up tailwindcss

Go to the my-app folder (or whatever you named it) and install tailwindcss and its peer-dependencies.
NOTE: postcss-cli version 9.0.1 is the current last version and have some problems and does not work correctly so use version 8.3.1 for now.



npm install -D tailwindcss@latest postcss-cli@8.3.1 autoprefixer@latest

Initialize tailwindcss:

Create talwindcss config file:



npx tailwindcss init

this creates a file named tailwind.config.js in the root of your project.to be able to use jit mode, you have to enable it inside your config file (here you can find more about jit feature and how to set it up in tailwind css). so your tailwind config file should look like this now, if its not, just copy and paste it:



// tailwind.config.js
module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Create tailwind.css file inside src folder and paste this lines:



/* ./my-app/src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

we are done with tailwindcss part.

Postcss config:

Create a file named postcss.config.js in the root of your project and add tailwindcss and autoprefixer to your PostCSS configuration.



// postcss.config.js
module.exports = {
  plugins: { tailwindcss: {}, autoprefixer: {} }
};

Automate CSS rebuild:

To automate css creation on file changes we need a package named chokidar. We also need concurrently to run two scripts at a time;



npm i -D chokidar-cli concurrently

Then edit package.json scripts as below:



  "scripts": {
    "start": "react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/tailwind.css -o src/index.css",
    "watch": "chokidar \"./src/**/*.js\" -c \"npm run watch:css\"",
    "dev": "concurrently \"npm run watch\" \"npm run start\""
  },

We must use npm run dev to run our app and also automate css build.

Test it

Paste below lines in your App.js file for the test:



import "./index.css";

function App() {
  return (
    <div className="bg-blue-400 h-screen grid">
      <div className="w-3/4 my-auto ml-20">
        <h1 className="text-5xl font-bold mb-10 text-white">JIT mode is cool</h1>
        <p className="text-white">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo officia earum ducimus neque obcaecati consequuntur ratione accusamus at officiis tempore,
          magnam non debitis fugit unde alias id quidem necessitatibus.
        </p>
      </div>
    </div>
  );
}

export default App;

now if you run your app using npm run dev you must see somehting like this:

Hooorayyy! 😃 👯👯 we made it. now we can use tailwindcss utility classes in our files and no more worried about large css files and loading issues.
here is a ready made project that you can clone and use it without doing all the steps:

https://github.com/ako-v/cra-tailwind-jit

Happy coding!