vue3+vite项目中使用Tailwind CSS

荔枝吖2025-05-30 16:38

官方文档：

1. 安装相关的插件

javascript 复制代码

npm install -D tailwindcss @tailwindcss/vite postcss autoprefixer

2. 在页面中引用

vite.config.js

javascript 复制代码

import tailwindcss from '@tailwindcss/vite'
import autoprefixer from 'autoprefixer'
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
    autoprefixer(),
  ]
})

需要创建一个tailwind.config.js

javascript 复制代码

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    // 禁用preflight以避免与Element Plus样式冲突
    preflight: false
  }
}

postcss.config.js/postcss.config.cjs

注意：在tailwindcss4版本以上的时将@tailwindcss换成了@tailwindcss/postcss

javascript 复制代码

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {
      overrideBrowserslist: [
        '> 1%',
        'last 2 versions',
        'not dead',
        'chrome >= 80',
        'firefox >= 78',
        'safari >= 13',
        'edge >= 80',
      ],
    },
  },
}

创建一个main.css ，然后在main.js中引用即可，在页面中使用

javascript 复制代码

@tailwind utilities;
@import "tailwindcss";

如：实现元素垂直水平居中