TailWindCss v4.1在Vue3里的使用

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

安装及其配置

安装

npm install tailwindcss @tailwindcss/vite

配置

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

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

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

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

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

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

结果：

自定义工具类（utility classes）

Theme variables

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

Color

在全局样式文件里设置

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

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

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

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

让字体变为草茉莉红：

<!--App.vue-->
<templete>
  <div>
    <p class="text-caomolihong">Hello World</p>
  </div>
</templete>

Font

引入goole font

<!--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"
/>

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

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

使用

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

一个重要的提醒

当我们使用css时，一般会在总样式文件比如style.css里添加下面的代码，目的是方便内外边距的管理：

* {
    padding: 0;
    margin: 0;
}

但是当我们使用了tailwindcss时，这样做会让之后的内外边距设置失效：

<div class="p-4 m-5"></div>

当然，添加!又复活了。

<div class="!p-4 !m-5"></div>

不推荐这样做，所以就别添加了 (❛◡❛✿)