Vue3 - Solve the problem that the UI component library style is affected after using Tailwindcss. After introduction, it is found that the component style of the project component library is wrong (Element/Ant Design Vue/Naive UI/TDesign)

Problem Description

None of the online tutorials can solve it, but this article can help you solve the problem quickly.

After the project introduced Tailwind css, when using some components of the UI component library, it was found that some styles were lost, the display was misplaced, and the background color was lost.

Frequently occur in 【Button Component】The background color is lost|[Message Message Prompt Component] The style position is deformed, etc. Seriously, the entire component library style is messed up.

---

The solution in this article applies to any front-end framework (such as Element, Ant Design Vue, Naive UI, etc.), and whether you are using Vue2 or Vue3, as long as you follow the instructions in this article, you can solve the problem 100% quickly.

solution

Follow the steps below࿰