Bug 284746
Summary: | Nested CSS does not work with tailwind generated CSS | ||
---|---|---|---|
Product: | WebKit | Reporter: | vincent.emonet |
Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
Status: | RESOLVED DUPLICATE | ||
Severity: | Normal | CC: | bfulgham, karlcow, koivisto, m_dubet, simon.fraser, webkit-bug-importer, zalan |
Priority: | P2 | Keywords: | BrowserCompat, InRadar |
Version: | Safari 18 | ||
Hardware: | Unspecified | ||
OS: | Unspecified |
vincent.emonet
**Describe your issue**
Using nested CSS to encapsulate Tailwind generated CSS does not work on Safari. But works exactly as expected on Firefox and Chromium.
I tried a really basic nested CSS without tailwind (just rendering background-color) and it is working with safari, so the problem seems to be specifically with tailwind generated CSS (all nested CSS generated by tailwind seems to be ignored though...)
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)
```bash
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 meet this problem? Is there a known fix? Imo it seems more like an issue with Webkit not properly implementing the nested CSS standard than TailwindCSS, but maybe Tailwind is doing some non standard things?
**What build tool are you using?**
```json
"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)
**Reproduction URL**
https://play.tailwindcss.com/zBXvzTRl77
Needs to be opened with Safari browser. Works all fine on firefox and chromium
You can find an example of fully generated problematic nested CSS (after tailwind CSS build) in my project: https://github.com/sib-swiss/sparql-llm/blob/2edd798f606e6bc837a0d3408418545da60f70a1/chat-with-context/src/style.css#L1
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/141639656>
Matthieu Dubet
*** This bug has been marked as a duplicate of bug 85114 ***
Matthieu Dubet
*** This bug has been marked as a duplicate of bug 285114 ***
Matthieu Dubet
Thank you for the detailed report