Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[CSS] class was overwritten by tailwindcss3 Preflight
See original GitHub issueTuSimple/naive-ui version (版本)
2.24.6
Vue version (Vue 版本)
3.2.29
Browser and its version (浏览器及其版本)
Chrome Version 97.0.4692.99 (Official Build) (x86_64)
System and its version (系统及其版本)
macOS 12.1 (21C52)
Node version (Node 版本)
v16
Reappearance link (重现链接)
https://github.com/uruz-7/tailwindcss3-naive-ui-reproduction
Reappearance steps (重现步骤)
pnpm install
pnpm vite
Expected results (期望的结果)
background color is not overwritten
Actual results (实际的结果)
background color is overwritten
Remarks (补充说明)
This issue (#1808) still occurs with latest version “naive-ui”: “2.24.6”, “tailwindcss”: “3.0.16”. 这个issue(#1808)在最新版本里仍可重现。
Tailwind css preflight: https://tailwindcss.com/docs/preflight
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Preflight - Tailwind CSS
Built on top of modern-normalize, Preflight is a set of base styles for ... simply adding the border class, Tailwind overrides the default...
Read more >Easier overwrite of @tailwind base · Discussion #7496 - GitHub
Example of overwriting preflight.css without having to know Tailwind CSS's variable names. Another approach would be to use @layer , so that ...
Read more >Tailwind CSS breaking existing styles - Stack Overflow
I was hoping to just use Tailwind classes (like mb-3 ) for shortcuts. I didn't expect it to overwrite existing styles, like changing...
Read more >Tailwind styles are being overwritten by css classes - Reddit
In this case, tailwind's p-4 class will be overwritten by custom-padding . Is there a way to prioritize tailwind's classes?
Read more >How and Why to Un-Reset Tailwind's CSS Reset
Tailwind CSS comes with a great CSS Reset, called Preflight. It starts with the awesome Normalize.css project, and then nukes all default margins,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
you can use the following solution. 可以尝试一下这个解决方案。 https://www.naiveui.com/en-US/os-theme/docs/style-conflict https://www.naiveui.com/zh-CN/os-theme/docs/style-conflict
还有一招，从tailwind入手，不引入@base的preflight.css，单独下载一份修改需要修改的地方。 https://unpkg.com/tailwindcss@3.2.4/src/css/preflight.css