vue3使用 Tailwind CSS （4.多版本）

最新推荐文章于 2025-05-24 21:54:56 发布

shmily麻瓜小菜鸡

最新推荐文章于 2025-05-24 21:54:56 发布

阅读量301

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_49523082/article/details/148121578

版权

vue3使用 Tailwind CSS （4.多版本）

安装npm install tailwindcss @tailwindcss/vite

配置

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

创建一个普通的 CSS 文件（例如 src/tailwind.css） .css文件

@import "tailwindcss";

// main.js
import './tailwind.css';

使用 npm run dev
警告：如果vscode不按照这样提示

在vscode里使用快捷键 Ctrl + Shift + P

{
  "tailwindCSS.includePaths": [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./node_modules"
  ],
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.acceptSuggestionOnEnter": "on",
  "editor.tabCompletion": "on",
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}