Slow compile when using Tailwind CSS + Postcss + Nextjs

[animeshchat]

Hi there,

I just started using Tailwind CSS with my Nextjs project. Each change in css takes ~10 seconds to compile (hot reload).

I have a global.css file that is included in _app.js.

/* global.css */
@import "tailwindcss/base";
@import "./base.css";

@import "tailwindcss/components";
@import "./common.css";

@import "tailwindcss/utilities";
@import "./utilities.css";

/* package.json */
"dependencies": {
"next": "^9.5.2",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-import": "^12.0.1",
"postcss-preset-env": "^6.7.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"swr": "^0.3.1",
"tailwindcss": "^1.7.3"
}

base.css, common.css, and utilities.css are my files that are used to add custom classes.

Any changes made in any of these files takes a while to compile.

Am I doing something wrong?

[brandonpittman]

@animeshchat AFAIK, Next recompiling the CSS files triggers a whole recompile of Tailwind. So maybe don't write custom CSS (and use the utilities Tailwind provides).

[animeshchat]

Thanks for your help. I started to use a separate file for custom css (which is directly included in _app.js). Its not ideal, but the compile is fast.