Conflict with tailwind css, maybe?

[tlerbao]

Describe the bug

Using both tailwindcss and vant, it seems that tailwindcss will invalidate the styles of vant. It seems that this problem can be solved by manually introducing the vant style after the introduction of Tailwindcss, but this will increase the volume of CSS. What is the correct solution?

vite.config.ts

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [VantResolver()]
    })
  ],

main.ts

import App from './App.vue'
import router from './router'
// The main CSS file, which introduces tailwindcss (@tailwind base，@tailwind components;....)
import './assets/main.css'
// Manually introducing the vant style here can solve the problem, but it was originally unnecessary.
import 'vant/lib/index.css'

const app = createApp(App)

Reproduction

Reproduction

System Info

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 107.06 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Safari: 16.0

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[azaleta]

Do you mean this？
https://vant-ui.github.io/vant/#/en-US/quickstart#4.-style-of-function-components

[tlerbao]

@azaleta No, it is similar to this question tailwindlabs/tailwindcss#5969,

tailwindcss will cause the button of vant ui to have no background color (other conflicts are unknown). If you manually introduce the style file of vant ui after tailwindcss, this problem can be solved, but this violates the on-demand loading.

[r893803517]

corePlugins: { preflight: false, },

add this to your tailwind.config.js might solve your problem，preflight build on top of normalize.css so you can mannually add normalize.css before vant ui style file