How to build CSS/PostCSS only during CSS changes? - css

Question

Everytime I update .js code in my Ember App (components, tests, etc.) my app.css file is rebuilt, even though I'm not touching any CSS!
I am using PostCSS and TailwindCSS plugin. Every time I save a .js the entire TailwindCSS library is rebuilt and takes 1200-2000ms. This is really unnecessary and I would like to know how to avoid it. If I disable TailwindCSS the rebuild time of PostCSS drops to 191ms on every .js save.
There are a few solution ideas I'd like to explore:
Is it possible to configure Ember rebuild my CSS ONLY when I change
CSS?
Is it possible to configure PostCSS to rebuild only when CSS has
changed?
How can I configure TailwindCSS to use a static CSS file for the library, and then setup
PostCSS to build only my custom tailwind classes using the
tailwind plugin?
ember-cli-build.js
postcssOptions: {
compile: {
plugins: [
{
module: require("postcss-import"),
options: {
path: ["node_modules"]
}
},
require("tailwindcss")("./config/tailwind.config.js")
]
}
}
config/tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
"80": "20rem",
"screen-80": "80vh",
"screen-60": "60vh"
},
minWidth: {
"96": "24rem",
screen: "100vw"
},
maxWidth: {
"min-content": "min-content",
screen: "100vw"
},
screens: {
xxl: "1920px"
},
zIndex: {
"9999": 9999
},
colors: {
puke: {
100: "#fff5f7",
200: "#fed7e2",
300: "#fbb6ce",
400: "#f687b3",
500: "#ed64a6",
600: "#d53f8c",
700: "#b83280",
800: "#97266d",
900: "#702459"
}
},
backgroundColor: theme => theme("colors"),
textColor: theme => theme("colors"),
borderColor: theme => ({
...theme("colors"),
default: theme("colors.gray.300", "currentColor")
})
}
},
variants: {},
plugins: []
};