DEV Community

Cover image for How to set up tailwindcss with create-react-app + jit feature
Ako
Ako

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Initialize tailwindcss:

Create talwindcss config file:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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

/* ./my-app/src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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: {} }
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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\""
  },
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

result
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!

Discussion (16)

Collapse
pak11273 profile image
Isaac Pak

I get error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
github.com/postcss/postcss/wiki/Po...

Collapse
akov profile image
Ako Author

probably you have not appended @latest at the end of packages. reinstall them with this exact command:
npm install -D tailwindcss@latest postcss@latest postcss-cli@latest autoprefixer@latest

Collapse
pak11273 profile image
Isaac Pak

I copy/pasted everything. It would be nice if you had an example repo where we could just clone/install and ensure that it works.

Thread Thread
akov profile image
Ako Author

Oh! Sorry, I didn't think it would be necessary. here it is:
github.com/ako-v/cra-tailwind-jit
I will also add it into the post itself.

Thread Thread
pak11273 profile image
Isaac Pak • Edited on

Thanks for adding the repo! It's working now but I for me I had to install postcss@latest and I also had to add start": "react-scripts start back into package.json file. Kudos!

Collapse
akov profile image
Ako Author

I also realized the postcss package is not necessary at all, the postcss-cli is enough.

Collapse
jengaa profile image
ameyajangam22 • Edited on

What do I have to do differently with craco ? I have enabled mode:"jit" in tailwind.config.js . How should I write the build script for that? Here is my current build script . What should I add?

dev-to-uploads.s3.amazonaws.com/up...

Collapse
akov profile image
Ako Author • Edited on

hm! it seems to work fine for me, I just created a repository and using craco instead of react-scripts, you can try and see if it works for you.
github.com/ako-v/cra-tailwindcss-j...
after building, serve the build folder using npm run servebuild and open http://localhost:3000 in your browser.

Collapse
mizanmahi profile image
Mizan Mahi • Edited on

Getting this error while running npm start

npm start

cra-tailwindcss-jit-craco@0.1.0 start
TAILWIND_MODE=watch craco start

'TAILWIND_MODE' is not recognized as an internal or external command,
operable program or batch file.

Collapse
akov profile image
Ako Author

sorry for late response, I think you are on windows. just install cross-env and change the start script in package.json to this:
"start": "cross-env TAILWIND_MODE=watch craco start"

Collapse
cannon303 profile image
cannon303

I followed exactly but I dont get a blue screen, just an unstyled "JIT mode is cool" Lorem... page and none of the tailwind styles work. Any ideas?

Collapse
akov profile image
Ako Author • Edited on

install postcss-cli using npm i -D postcss-cli@latest, then run your app using npm run dev.
Sorry I forgot to include postcss-cli in installation part.

Collapse
hectorlopezv profile image
hector vinicio lopez

it works!! thanksss live saverr

Thread Thread
akov profile image
Ako Author

Your welcome 😃

Collapse
mohammadhassani profile image
mohammad hassani

and if you use craco in package.json is better

Collapse
akov profile image
Ako Author

If you want to override some configurations, yes, you have to use craco.