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, and then setup PostCSS to build only my custom tailwind configurations 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: []
};
Aucun commentaire:
Enregistrer un commentaire