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!
Top comments (16)
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...
hm! it seems to work fine for me, I just created a repository and using
cracoinstead 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 servebuildand openhttp://localhost:3000in your browser.I get error:
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
github.com/postcss/postcss/wiki/Po...
probably you have not appended
@latestat the end of packages. reinstall them with this exact command:npm install -D tailwindcss@latest postcss@latest postcss-cli@latest autoprefixer@latest
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.
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.
Thanks for adding the repo! It's working now but I for me I had to install
postcss@latestand I also had to addstart": "react-scripts startback into package.json file. Kudos!I also realized the postcss package is not necessary at all, the postcss-cli is enough.
and if you use craco in package.json is better
If you want to override some configurations, yes, you have to use craco.
Getting this error while running npm start
'TAILWIND_MODE' is not recognized as an internal or external command,
operable program or batch file.
sorry for late response, I think you are on windows. just install
cross-envand change the start script in package.json to this:"start": "cross-env TAILWIND_MODE=watch craco start"
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?
install postcss-cli using
npm i -D postcss-cli@latest, then run your app usingnpm run dev.Sorry I forgot to include postcss-cli in installation part.
it works!! thanksss live saverr
Your welcome 😃