Not all variables are used in the build

[yuriti]

What version of Tailwind CSS are you using? v3.0.23

What build tool (or framework if it abstracts the build tool) are you using? core-js 3.21.1, nuxt 2.15.8, @nuxtjs/tailwindcss 5.0.0, autoprefixer 10.4.2, tailwindcss 3.0.23, postcss 8.4.8

What version of Node.js are you using? v16.14.0

Describe your issue Not all variables are used in the build. Main problem is that the blur class is used, but it does not work due to the lack of variables.

CSS in development mode:

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

CSS in production mode:

*, :after, :before {
    --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-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,0.5);
    --tw-ring-offset-shadow: 0 0 transparent;
    --tw-ring-shadow: 0 0 transparent;
    --tw-shadow: 0 0 transparent;
    --tw-shadow-colored: 0 0 transparent;
}

Full list of classes in the block where blur does not work:

tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw--right-4 tw-h-full tw-w-full tw-scale-150 tw-object-cover tw-object-center tw-blur-md

Style tw-blur-md:

.tw-blur-2xl, .tw-blur-md {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.tw-blur-md {
    --tw-blur: blur(12px);
}

tailwind.config.js

module.exports = {
    cssPath: "~/assets/css/tailwind.css",
    prefix: "tw-",
    theme: {
        fontFamily: {
            montserrat: ["Montserrat", "sans-serif"],
        },
        extend: {
            animation: {
                dash: "dash 1.5s ease-in-out infinite",
            },
            keyframes: {
                dash: {
                    "0%": {
                        "stroke-dasharray": "1, 150",
                        "stroke-dashoffset": "0",
                    },
                    "50%": {
                        "stroke-dasharray": "90, 150",
                        "stroke-dashoffset": "-35",
                    },
                    "100%": {
                        "stroke-dasharray": "90, 150",
                        "stroke-dashoffset": "-124",
                    },
                },
            },
        },
    },
    corePlugins: {
        container: false,
    },
};

[adamwathan]

Hey! This looks like an issue with CSS minification in Nuxt removing variables that have empty values, which it shouldn’t do because as you’ve seen it breaks things. I believe this was recently fixed in cssnano, so I would try updating all dependencies and if that doesn’t solve it, open an issue on Nuxt. Tailwind isn’t removing those variables, something later in the build pipeline has a bug and is doing it mistakenly.