unplugin-vue-components icon indicating copy to clipboard operation
unplugin-vue-components copied to clipboard

Conflict with tailwind css, maybe?

Open tlerbao opened this issue 1 year ago • 3 comments

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

  • [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.

tlerbao avatar Oct 24 '22 07:10 tlerbao