Vue3 tailwindcss

原创已于 2025-07-11 15:45:38 修改 · 386 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-07-11 15:33:43 首次发布

vue3项目创建引入插件专栏收录该内容

3 篇文章

订阅专栏

1、安装tailwindcss

pnpm i -D tailwindcss postcss autoprefixer
# yarn add -D tailwindcss postcss autoprefixer
# npm i -D tailwindcss postcss autoprefixer

2、创建TailwindCSS配置文件

npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 匹配所有 Vue/JS/TS 文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3、在main.js同级创建style.css

/* src/style.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

4、在main.js中引入tailwindcss与style.css

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import "tailwindcss/tailwind.css";

const app = createApp(App);

app.mount('#app')

5、vite.config.js配置tailwindcss

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

//配置这个地方----------------------开始----------------------------
import tailwindcss from 'tailwindcss'
//配置这个地方----------------------结束----------------------------


export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [
      vue(),
    ],
    css: {
        //配置这个地方----------------------开始----------------------------
      postcss: {
        plugins: [
          tailwindcss,
        ]
      },
        //配置这个地方----------------------结束----------------------------
    },
  }
})

应该没漏配置了，有漏的话可以评论提醒下我