vue3+vite项目中使用Tailwind CSS

官方文档：

使用 Vite 安装 Tailwind CSS - Tailwind CSS

1. 安装相关的插件

npm install -D tailwindcss @tailwindcss/vite postcss autoprefixer  

2. 在页面中引用

vite.config.js

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

需要创建一个tailwind.config.js

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

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中引用即可，在页面中使用

@tailwind utilities;
@import "tailwindcss";

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