Vue3 tailwindcss

顾尘眠

已于 2025-07-11 15:45:38 修改

阅读量278

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue3项目创建引入插件文章标签：前端

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

本文链接：https://blog.youkuaiyun.com/zero_er/article/details/149275506

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,
        ]
      },
        //配置这个地方----------------------结束----------------------------
    },
  }
})

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