Support css @layer rules for Tailwind CSS v4

[jessedobbelaere]

Tailwind CSS v4 was released, which heavily relies on modern Cascade Layers with the @layer property

• Tailwind CSS v4 Designed for the modern web — built on cutting-edge CSS features like cascade layers
• https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

Sample of a generated css file using Tailwind v4:

/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties {
...
}
@layer theme {
    :root, :host {
        .. all css vars go here
    }
}
@layer base {
...
}
@layer utilities {
    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

This causes the Critical CSS for my Tailwind V4 site to be almost completely empty, because literally everything is wrapped inside the @layer property, which is not part of the safelist of penthouse, so it gets stripped out.

Given the popularity of Tailwind, could we get such fix merged in a reasonable timeframe? 🙏

[khalwat]

Would love to see this merged in

[khalwat]

It's possible we might need to fork the repo and apply the changes, or get some additional maintainers added.

[michtio]

@khalwat @jessedobbelaere also willing to help maintaining/forking this if necessary.