TailWindCss v4.1在Vue3里的使用

太空铃兰2025-08-29 10:16

tailwindcss v4比v3方便了不少，因此基本的安装配置和使用也不同，我写下我的学习笔记于此

安装及其配置

安装

powershell 复制代码

npm install tailwindcss @tailwindcss/vite

配置

js 复制代码

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

css 复制代码

/* ./src/style.css */
@import "tailwindcss";

将全局css文件引入index.html中

html 复制代码

<link rel="stylesheet" href="./src/style.css" />

测试现在是否可以使用tailwindcss:

html 复制代码

<!--App.vue-->
<template>
  <div class="flex flex-col min-h-screen ">
    <p class="text-red-600 text-3xl font-bold underline">Hello World</p>
  </div>
</template>

结果：

自定义工具类（utility classes）

Theme variables

我们可以自定义颜色，引入外部字体，可以自定义圆角，不过在定义前需要分类，颜色分为颜色类--color，字体则是--font其他同理可查看官方文档，这里以--color和--font为例。

Color

在全局样式文件里设置

css 复制代码

/*style.css*/
@import "tailwindcss";

@theme {
  --color-caomolihong: #ef475d;
}

在组件项目中使用：让背景变为草茉莉红：

html 复制代码

<!--App.vue-->
<template>
  <div class="bg-caomolihong min-h-screen ">
  </div>
</template>

让字体变为草茉莉红：

html 复制代码

<!--App.vue-->
<templete>
  <div>
    <p class="text-red-600 text-3xl font-bold underline">Hello World</p>
  </div>
</templete>

Font

引入goole font

html 复制代码

<!--index.html-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Libertinus+Keyboard&display=swap"
  rel="stylesheet"
/>

css 复制代码

/*style.css*/
@import "tailwindcss";

@theme {
  --color-caomolihong: #ef475d;
  --font-test: "Libertinus Keyboard";
}

使用

html 复制代码

<template>
  <div>
    <p class="font-test">Hello World</p>
  </div>
</template>