V4 Minification Issue with ::after

[xcrap]

In v4 beta 1

I had this...

.btn-menu::after {
    @apply absolute -bottom-1.5 block h-0.5 w-0 bg-neutral-200 dark:bg-neutral-700 transition-all content-[''];
}

When I compile the npm run build using laravel and vite...

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/styles.css',
                'resources/js/custom.js',
                'resources/css/admin.css',
                'resources/js/admin.js'],
            refresh: true,
        }),
    ],
});

I get this error:

vite v5.4.9 building for production...
✓ 27 modules transformed.
rendering chunks (1)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:2:62793:
      2 │ ...ion:absolute}.btn-menu:after:is(){background-color:var(--color-n...
        ╵                                    ^

This was fine with v3, any idea what I'm doing wrong?

[philipp-spiess]

Heya! I tried this in a fresh Vite playground with only the @tailwindcss/vite extension installed and the selector compiles correctly:

Is it possible that you share a minimal reproduction setup with us?

[xcrap]

This is so awkward, so if I disable the minification in vite it works fine.

build: {
minify: false,
},

So I've used the npx @tailwindcss/upgrade@next to upgrade this project, I noticed he did not installed the @tailwindcss/vite extension.

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/postcss": "^4.0.0-beta.3",
        "@tailwindcss/typography": "^0.5.15",
        "axios": "^1.7.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.45",
        "tailwindcss": "^4.0.0-beta.3",
        "vite": "^5.0"
    },
    "dependencies": {
        "filepond": "^4.31.4",
        "filepond-plugin-file-validate-size": "^2.2.8",
        "filepond-plugin-file-validate-type": "^1.2.9",
        "filepond-plugin-image-preview": "^4.6.12",
        "filepond-plugin-image-resize": "^2.0.10",
        "filepond-plugin-image-transform": "^3.8.7",
        "gsap": "^3.12.5",
        "install": "^0.13.0",
        "notiflix": "^3.2.7",
        "prismjs": "^1.29.0",
        "swapy": "^0.4.0"
    }
}

But even if I install I get the same error. If I switch those tailwind classes for regular CSS I have no issues. Strange, I'll try to figure out .

.btn-menu::after {
    @apply relative text-neutral-400 hover:text-black dark:text-neutral-600 transition-colors;
}

.btn-menu::after {
    @apply absolute -bottom-1.5 block h-0.5 w-0 bg-neutral-200 dark:bg-neutral-700 transition-all content-[''];
}

.btn-menu:hover::after {
    @apply bg-black dark:bg-neutral-600 w-5;
}

Having any of this classes is causing the issue.

[spaceemotion]

Not sure if it's related, but I also noticed some weird behavior around after in general: #15241

(Edit: moved to separate issue)

[xcrap]

Yeah the issue is with the postcss, Laravel is using postcss, so I'm pretty sure if you try that with the postcss with the default minification you'll find the same issue with the ::after elements.