Bug 284746

Summary: Nested CSS does not work with tailwind generated CSS
Product: WebKit Reporter: vincent.emonet
Component: CSSAssignee: 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
Reported 2024-12-16 06:13:39 PST
**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
Radar WebKit Bug Importer
Comment 1 2024-12-17 14:16:14 PST
Matthieu Dubet
Comment 2 2025-01-22 08:31:38 PST
*** This bug has been marked as a duplicate of bug 85114 ***
Matthieu Dubet
Comment 3 2025-01-22 08:32:08 PST
*** This bug has been marked as a duplicate of bug 285114 ***
Matthieu Dubet
Comment 4 2025-01-22 08:33:20 PST
Thank you for the detailed report
Note You need to log in before you can comment on or make changes to this bug.