unplugin-vue-components
unplugin-vue-components copied to clipboard
Conflict with tailwind css, maybe?
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.