vue项目引入tailwindcss

原创已于 2025-06-06 23:23:10 修改

· 1k 阅读

24 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2025-06-06 23:18:34 首次发布

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

3 篇文章

订阅专栏

tailwindcss 是什么？

tailwindcss 官网

Tailwind CSS 是一个 工具优先（Utility-First）的 CSS 框架，它提供了一组低级别的、可组合的 CSS 类（Utility Classes），让开发者可以直接在 HTML 中快速构建自定义设计，而无需手写 CSS。

核心特点

1、Utility-First（工具类优先）

提供大量细粒度的类名（如 text-blue-500、p-4、flex），直接在 HTML 中组合使用，避免手写 CSS。

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
  点击我
</button>

2、高度可定制

通过 tailwind.config.js 可以自定义颜色、间距、字体、断点等设计系统。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6', // 自定义品牌色
      },
    },
  },
};

3、响应式设计

内置响应式前缀（如 md:text-lg、lg:hidden），方便适配不同屏幕尺寸。

<div class="text-sm md:text-base lg:text-lg">
  响应式文本
</div>

4、JIT 模式（Just-In-Time）

按需生成 CSS，大幅减少文件体积（Tailwind v3+ 默认启用）。

5、无预定义组件

不同于 Bootstrap 或 Material UI，Tailwind 不提供现成的组件（如按钮、卡片），而是让开发者自由组合工具类构建 UI。

VS 传统 CSS 框架

VS Bootstrap

Bootstrap 是一个流行的 开源前端框架，用于快速构建响应式、移动优先的网站和 Web 应用。它由 Twitter 开发并开源，现由社区维护，提供了一套完整的 CSS 组件、工具类和 JavaScript 插件，帮助开发者快速搭建现代化 UI。

特性	Tailwind CSS	Bootstrap
设计哲学	提供工具类，自由组合样式。	提供预定义组件（如按钮、导航栏）。
灵活性	极高，适合定制化设计。	较低，需覆盖默认样式才能自定义。
CSS 体积	JIT 模式按需生成，较小。	包含所有组件样式，较大。
学习曲线	需记忆工具类，但熟练后效率极高。	更易上手，但定制复杂。

VS Normalize.css

Normalize.css一个轻量级的 CSS 重置（Reset）库，旨在使不同浏览器的默认 HTML 元素样式更加一致，而不是完全清除它们。

tailwind CSS 内置了一个现代化重置样式：Preflight 构建在 modern-normalize 之上，是 Tailwind 项目的一组基本样式，旨在消除跨浏览器的不一致性。

若项目已用 Tailwind，通常无需单独引入 Normalize.css；

vue3 vite tailwindcss@3 版本

初始化项目

npm create vite@latest  --template vue
cd vue
npm install
npm run dev

安装tailwindcss@3 和 postcss 引入

npm install -D tailwindcss@3  postcss autoprefixer 
// 初始化引用
npx tailwindcss init -p

以上配置后，会在根目录生成 postcss.config.js tailwind.config.js,src目录下创建index.css tailwind.css

postcss.config.js配置如下

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

tailwind.config.js配置如下

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.css配置如下

styles文件夹之下

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

index.css配置如下

styles文件夹之下的index.css

@import url('tailwind.css');

main.ts引入 index.css

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 注意此处
import "./index.css"

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

自定义配置

tailwind.config.js配置如下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 自定义宽度类
      width: {
        ...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义高度类
      height: {
        ...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 padding 类
      padding: {
        ...Array.from({ length: 150 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 margin 类
      margin: {
        ...Array.from({ length: 100 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 font-size 类
      fontSize: {
        ...Array.from({ length: 50 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      }
    },
  },
  plugins: [],
};

以上配置我们将fontSize margin 等改为了固定宽度，此时安装 postcss-px-to-viewport可以进行适配

npm install postcss-px-to-viewport

postcss.config.js配置如下

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: [], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      // replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  },
}

vue3 vite tailwindcss@4 版本

初始化项目

npm create vite@latest  --template vue
cd vue
npm install
npm run dev

tailwindcss 4版本采用插件安装

npm install tailwindcss @tailwindcss/vite

vite.config.js配置如下

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

一般在src文件夹下有一个styles文件夹，在其中的index.css中进行如下配置

@import "tailwindcss";

在main.js中或main.ts文件中引入上一个文件

import "./styles/index.css";

在app.vue文件中测试

<span class="flex text-red-400">tailwindcss4</span>