Conflict with tailwind css, maybe?

tlerbao commented 1 year ago

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

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

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

azaleta commented 1 year ago

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

tlerbao commented 1 year ago

@azaleta No, it is similar to this question https://github.com/tailwindlabs/tailwindcss/discussions/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 commented 1 month ago

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

unplugin / unplugin-vue-components