Tailwind自动生成的css文件变量为空



我正在使用带有postpass配置的tailwind,该配置生成一个CSS文件,该文件将在生产中使用,并且只包含应用程序所需的CSS类。然而,当生成CSS文件时,我注意到许多空的CSS变量,在我看来,它们没有任何作用,我的IDE将它们识别为错误。其中一个类的例子如下:

*, ::before, ::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x:  ;
--tw-pan-y:  ;
--tw-pinch-zoom:  ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal:  ;
--tw-slashed-zero:  ;
--tw-numeric-figure:  ;
--tw-numeric-spacing:  ;
--tw-numeric-fraction:  ;
--tw-ring-inset:  ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur:  ;
--tw-brightness:  ;
--tw-contrast:  ;
--tw-grayscale:  ;
--tw-hue-rotate:  ;
--tw-invert:  ;
--tw-saturate:  ;
--tw-sepia:  ;
--tw-drop-shadow:  ;
--tw-backdrop-blur:  ;
--tw-backdrop-brightness:  ;
--tw-backdrop-contrast:  ;
--tw-backdrop-grayscale:  ;
--tw-backdrop-hue-rotate:  ;
--tw-backdrop-invert:  ;
--tw-backdrop-opacity:  ;
--tw-backdrop-saturate:  ;
--tw-backdrop-sepia:  ;
}

如果没有必要的话,我该如何摆脱这些课程?最重要的是,我如何才能阻止Tailwind自动生成这些类?我做错什么了吗?

这是我的顺风。config.js:

module.exports = {
content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
colors: {
"primary-darker": "#45622E",
"primary-dark": "#5A7B31",
"primary-med": "#76A340",
primary: "#96BA57",
"primary-light": "#F3F9EC",
white: "#FFFFFF",
"secondary-dark": "#202020",
secondary: "#262626",
"secondary-light": "#373737",
"active-gray": "#999999",
"inactive-grey": "#D8D8D8",
"background-grey": "#F8F8F8",
"background-light": "#F2F2F2",
success: "#83C117",
alert: "#B63A2F",
current: "currentColor",
},
extend: {
fontFamily: {
konnect: "Konnect, Helvetica, Arial, sans-serif",
"konnect-medium": "Konnect Medium, Helvetica, Arial, sans-serif",
"konnect-semibold": "Konnect SemiBold, Helvetica, Arial, sans-serif",
"konnect-light": "Konnect Light, Helvetica, Arial, sans-serif",
},
},
},
plugins: [],
};

这是我用来自动生成顺风文件的命令:

"tailwinds:build": "npx tailwindcss -i src/assets/sass/tailwind.scss -o ./public/output.css --watch"

Tailwind使用这些变量中的空字符串作为占位符。根据他们的说法,这是一个特性,而不是一个bug。因为它们稍后会使用这些变量,如果它们未定义,就会出现错误。

Github上的相关问题:https://github.com/tailwindlabs/tailwindcss/issues/7121

最新更新