vue3+vite项目中使用Tailwind CSS

官方文档:

使用 Vite 安装 Tailwind CSS - Tailwind CSS

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";

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

相关推荐
浩男孩2 分钟前
🍀【总结】使用 TS 封装几条开发过程中常使用的工具函数
前端
Mintopia8 分钟前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
晓得迷路了12 分钟前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
Mintopia13 分钟前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
GISer_Jing19 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞33 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多37 分钟前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪38 分钟前
CSS基础语法
前端
冰暮流星39 分钟前
css之box-sizing属性
前端·javascript·css
倚肆42 分钟前
CSS ::before 和 ::after 伪元素详解
前端·css