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: https://github.com/tailwindlabs/tailwindcss/issues/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.

[n4bb12]

I'm getting a similar warning with ::selection using v4 with the vite plugin:

▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:2:8523:
      2 │ ...-color-white)}::selection:where(){background-color:var(--color-p...
        ╵                                    ^

caused by

@layer base {
  ::selection {
    @apply bg-pink-800;
    @apply text-white;
    @apply dark:bg-pink-200;
    @apply dark:text-black;
  }
}

[GodTamIt]

Has there been any work on or identification of where this issue comes from? If not, I may try and take a look, as it's blocking my adoption of v4.

[wongjn]

I think this is the same as #16582. Please see https://github.com/tailwindlabs/tailwindcss/issues/16582#issuecomment-2666747655 for exploration of the problem and a workaround.