While utilizing Tailwind with a PostCSS configuration that generates a CSS file for production, only the necessary CSS classes are included in the file. However, upon inspecting the CSS file, I came across numerous empty CSS variables that seem unnecessary and my IDE is flagging them as errors. One example of such a class is:
*, ::before, ::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
...
}
How can I remove these unnecessary classes? More importantly, how can I prevent Tailwind from automatically generating these classes? Am I missing something in my setup?
This is my tailwind.config.js:
module.exports = {
content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
colors: {
"primary-darker": "#45622E",
...
},
plugins: [],
};
This is the command I use to auto-generate the file with Tailwind:
"tailwinds:build": "npx tailwindcss -i src/assets/sass/tailwind.scss -o ./public/output.css --watch"