CODEWITHSUNDEEP
cssvue.jstailwind-csspostcsstailwind-3
Kevin Garcia
Kevin Garcia

Reputation: 113

Tailwind autogenerated css file variables empty

I am using tailwind with postcss configuration that generates a CSS file to be used in production with only the needed CSS classes for the app. However, when the CSS file gets generated, I noticed many empty CSS variables that, in my opinion, are not serving any purpose and my IDE is recognizing them as an error. An example of one of these classes is the following:

    *, ::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:  ;
}

How can I get rid of those classes if they are not necessary? Most importantly how can I stop Tailwind from auto-generating these classes? Am I doing something wrong?

This is my 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: [],
};

and this is the command I use to auto generate file with tailwind:

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

Upvotes: 3

Views: 2416

Answers (1)

Kolya
Kolya

Reputation: 385

Tailwind uses the empty strings in these variables as placeholders. According to them it's a feature, not a bug. Because they use the variables later and would run into an error, if they were undefined.

Relevant issue on Github: https://github.com/tailwindlabs/tailwindcss/issues/7121

Upvotes: 4

Related Questions