【Vue 3/Vite】Tailwind CSS稳定版安装替代CDN引入

芳草萋萋鹦鹉洲哦2026-01-25 10:26

CDN方式的缺点

<script src="https://cdn.tailwindcss.com"></script>

一行代码直接给项目埋雷。

1、该CDN服务宕机、被墙或网络不稳定，网站将无法加载这些关键资源。用户现场极有可能是断网环境哦！

2、有缓存失效风险，如果CDN服务商决定清理旧版本资源，或者更改了文件路径，你的网站会突然失效。我们也可以通过控制台--网络--禁用缓存，来观察后果。

所以正确的方式是使用npm/yarn/pnpm管理依赖，并通过构建工具打包，将关键依赖内联或打包到应用中，确保核心功能稳定。

Tailwind CSS v3 稳定版安装（Vue 3 + Vite）

安装依赖（固定 v3 版本）

npm install -D tailwindcss@3.4.1 postcss@8.4.38 autoprefixer@10.4.19

生成配置文件

javascript 复制代码

npx tailwindcss init -p

配置 tailwind.config.js

javascript 复制代码

// tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置 postcss.config.js（自动生成，无需改）

javascript 复制代码

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在 CSS 入口文件引入 Tailwind

javascript 复制代码

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

确保 main.js 引入 CSS

javascript 复制代码

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css' // ← 关键！

createApp(App).mount('#app')

✅ 验证（30秒）

在 App.vue 加：

javascript 复制代码

<div class="bg-green-500 text-white p-4">✅ Tailwind v3 稳定版</div>

显示绿底白字 → 成功！