蓝云博客 - Tailwind CSS 在 Vue + Vite 中的使用

在现代 Web 开发中，选择合适的技术栈可以极大地提高开发效率和用户体验。Tailwind CSS 和 Vue.js 是两个非常流行的工具，它们分别在前端样式和交互逻辑方面表现出色。本文将介绍如何将 Tailwind CSS 与 Vue.js 结合使用，以构建一个现代化的 Web 应用。

🧐 什么是 Tailwind CSS ？

Tailwind CSS 是一个功能优先的 CSS 框架，它提供了大量的实用类（utility classes），允许开发者直接在 HTML 中编写样式。与传统的 CSS 框架（如 Bootstrap）不同，Tailwind 不提供预定义的组件，而是通过组合实用类来构建自定义设计。

主要特点

实用类优先：通过组合实用类来构建复杂的 UI。
高度可定制：通过配置文件可以轻松定制颜色、间距、字体等。
响应式设计：内置了响应式设计支持，方便适配不同设备。

Tailwind CSS 在 Vue 中的使用 🔔

首先，确保你已经安装了 Node.js，如果没有，你可以在 Node.js 官网中获取合适你的版本并安装。

https://nodejs.org

在安装好 Node.js 后，建议国内用户将 npm 镜像源修改为阿里镜像源

shell 复制代码

npm config set registry https://registry.npmmirror.com

💎 创建 Vue.js 项目

shell 复制代码

npm init vue@latest

安装项目依赖 🎷

shell 复制代码

cd your-project-name

shell 复制代码

npm install

🐻‍❄️ 配置 Tailwind CSS

在你的 Vue.js 项目根目录下执行以下安装命令

shell 复制代码

npm install tailwindcss @tailwindcss/vite

配置 vite.config.js 🐣

如果为 TypeScript 项目，则为 vite.config.ts

js 复制代码

import { defineConfig } from 'vite'
...
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    ...
  ],
})

💐 在 src/assets 目录下创建 css 文件

在 src/assets 下创建 css 文件，文件名称随意，文件内容如下。

tailwind.css 复制代码

@import "tailwindcss";

随后在 main.js（或 main.ts）中引入。

js 复制代码

import './assets/tailwind.css';

随后启动 Vue 项目即可 🏵️

shell 复制代码

npm run dev

Tailwind CSS 的使用难度较低，基本上根据官方文档即可独立正常使用

https://tailwindcss.com

App.vue 复制代码

<template>
	<h1 class="text-center pt-50 text-3xl font-bold font-mono text-[#3498db]">
		Hello, Tailwind CSS!
	</h1>
</template>

<script setup>

</script>

<style>
html,
body,
#root {
	/* 
    此选择的元素为 #root，是因为 Tailwind CSS 最新版本（目前为 4.x）已经为 #app 设置了默认样式，
    为避免冲突，这里选择将 Vue.js 默认的 #app 改为 #root 
  */
	width: 100%;
	height: 100%;
}
</style>

效果

✨️ 补充

以上为 Tailwind CSS 4.x（截止文章发布，4.x目前是最新版本）在 Vue.js 中的配置教程，由于 Tailwind CSS 最新版（4.x）中，对部分默认样式进行了重置，如果在使用过程中出现了 样式类名没写错，但是效果出不来 那可能是因为该元素的样式被重置的样式覆盖了，且覆盖的样式优先级更高，所以导致效果无法呈现，目前我的解决方法是自己进行一次样式重置，或给目标元素指定类名样式，并添加important。

如果你使用的是 Tailwind CSS 3.x，配置方法如下 🎗️

🎀 安装 Tailwind CSS 相关依赖

shell 复制代码

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

生成配置文件 🖥️

shell 复制代码

npx tailwindcss init -p

配置文件生成成功的情况下，会多出两个文件：tailwind.config.js、_postcss.config.js，文件内容大致如下。

js 复制代码

// tailwind.config.js
module.exports = {
  content: [], // 如果你使用的是 2.x 的版本，content 应该为 purge
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

在 tailwind.config.js 配置文件中，需要修改 content 中的配置

js 复制代码

  // tailwind.config.js
  module.exports = {
   content: [], // 如果你使用的是 2.x 的版本，content 应该为 purge
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

js 复制代码

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

⚠️ 注意事项

如果在项目启动后出现以下错误，则可能是因为，你安装的 Tailwind CSS 为 4.x 版本，却使用了 3.x 的配置方式而导致的。

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin.