Nested CSS not supported in Safari

[vemonet]

What version of Tailwind CSS are you using?

3.4.16

What build tool (or framework if it abstracts the build tool) are you using?

    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.16",
    "vite": "^6.0.3",
    "vite-plugin-solid": "^2.11.0",

What version of Node.js are you using?

v20.17.0

What browser are you using?

Safari 18.0.1 (that is not what I use to build the package, but it is the browser where the issue happens, I use ubuntu 22.04 to build)

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/zBXvzTRl77

Needs to be opened with Safari browser. Works all fine on firefox and chromium

Describe your issue

Using nested CSS to encapsulate Tailwind generated CSS does not work on Safari.

The Webkit team claims they are supporting nested CSS since 2023: https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://caniuse.com/css-nesting

I tried a really basic nested CSS without tailwind (just rendering background-color) and it is working with safari, so the problem is specifically with tailwind generated CSS

I have also tried to generate tailwind CSS manually, and encapsulate it myself in the component, but still does not work on Safari (it works on firefox and chromium though)

npx tailwindcss build -o temp.css && echo \".my-component {\" > src/style.css && cat temp.css >> src/style.css && echo \"}\" >> src/style.css && rm temp.css

Have you ever met this problem? Is there a known fix? Imo it seems more like an issue with Safari not properly implementing the latest nested CSS standard than TailwindCSS, but maybe Tailwind is doing some non standard things?

Note I have also open an issue on Webkit bugzilla: https://bugs.webkit.org/show_bug.cgi?id=284746

[RobinMalfait]

Hey!

Nesting is supported in all major browsers, however the big issue I notice is that you are using @import inside of another rule. @import is one of the rules that cannot be nested.

Is the goal of nesting the imports inside of a .my-component to scope Tailwind CSS?

[vemonet]

Hi @RobinMalfait , yes! I am using TailwindCSS inside a Light DOM web component. I don't use the shadow DOM because it's mostly broken everywhere, and it prevents apps from styling the web components

And I would like to prevent the tailwind CSS of my web component to impact the CSS of the apps in which my component is used

The most elegant solution I found was to just scope all of tailwind under my web component (which gives the best of both worlds: scoped styles for the component, like shadow DOM would do, and standard non shadow HTML generated)

Note that I have also tried to pre-generate the tailwind CSS and scope it manually, it gives exactly this CSS without @import: https://github.com/sib-swiss/sparql-llm/blob/2edd798f606e6bc837a0d3408418545da60f70a1/chat-with-context/src/style.css#L1

And this CSS still does not work in Safari, so I don't think @import is the issue