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

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

相关推荐
sophie旭几秒前
一道面试题,开始性能优化之旅(6)-- 异步任务和性能
前端·javascript·性能优化
年少不知有林皇错把梅罗当球王1 分钟前
vue2、vue3中使用pb(Base64编码)
前端
FanetheDivine5 分钟前
常见的AI对话场景和特殊情况
前端·react.js
sophie旭7 分钟前
一道面试题,开始性能优化之旅(5)-- 浏览器和性能
前端·面试·性能优化
lypzcgf14 分钟前
Coze源码分析-资源库-编辑知识库-前端源码-核心组件
前端·知识库·coze·coze源码分析·智能体平台·ai应用平台·agent平台
小墨宝18 分钟前
web前端学习 langchain
前端·学习·langchain
北城以北888822 分钟前
Vue--Vue基础(一)
前端·javascript·vue.js
IT_陈寒1 小时前
Python 3.12新特性实战:5个让你的代码提速30%的性能优化技巧
前端·人工智能·后端
sniper_fandc1 小时前
Vue Router路由
前端·javascript·vue.js
excel2 小时前
为什么 Vue 组件中的 data 必须是一个函数?(含 Vue2/3 对比)
前端