当前位置：首页 > news >正文

TailwindCss快速上手

news 来源：原创 2025/8/24 9:04:05

什么是`Tailwind Css`?

一个实用优先的 CSS 框架，可以直接在标记中组合以构建任何设计。

开始使用`Tailwind Css`

如何安装

下面是使用vite构建工具的方法

①安装 Tailwind CSS:

tailwindcss通过@tailwindcss/vitenpm安装。

npm install tailwindcss @tailwindcss/vite

②配置 Vite 插件：

将插件添加@tailwindcss/vite到您的 Vite 配置中。

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'  //这一部分
export default defineConfig({plugins: [tailwindcss(),  // 这一部分],
})

③ 导入 Tailwind CSS：

自定义一个css文件，并向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。

@import "tailwindcss";

在这里插入图片描述

④在main.js上引入这个css文件：

import '@/index.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

VS Code 的 IntelliSense

Visual Studio Code 的官方Tailwind CSS IntelliSense扩展通过为用户提供自动完成、语法突出显示和 linting 等高级功能增强了 Tailwind 开发体验。

在这里插入图片描述

自动完成——为实用程序类以及CSS 函数和指令提供智能建议。
Linting — 突出显示 CSS 和标记中的错误和潜在缺陷。
悬停预览— 将鼠标悬停在实用程序类上时显示其完整的 CSS。
语法高亮——以便正确高亮使用自定义 CSS 语法的 Tailwind 功能。

注意

在 Tailwind CSS v4 中，tailwindcss.config.js 配置文件已被移除，希望人们可以使用我们直接生成的 CSS 变量，这要简单得多，并且会显着减少您的捆绑包大小。

Preflight

Preflight 是 Tailwind CSS 的核心基础样式层，基于 modern-normalize 构建，旨在消除浏览器默认样式的不一致，并提供一个统一的样式起点。它自动注入到 base 图层中，确保项目在设计系统约束内一致运行。

关键样式重置

1. 边距移除

Preflight 删除所有元素的默认边距，避免意外依赖浏览器默认值：

*,
::after,
::before,
::backdrop,
::file-selector-button {margin: 0;padding: 0;
}

2. 边框样式重置

统一所有元素的边框样式，确保 border 类可直接使用：

*,
::after,
::before,
::backdrop,
::file-selector-button {box-sizing: border-box;border: 0 solid;
}

3. 标题无样式

标题元素默认不设置字体大小和粗细，需手动定义：

h1,
h2,
h3,
h4,
h5,
h6 {font-size: inherit;font-weight: inherit;
}

4. 列表无样式

默认移除列表项目符号和编号：

ol,
ul,
menu {list-style: none;
}

5. 图像与替换元素

图像默认为 block 布局，防止对齐问题：

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {display: block;vertical-align: middle;
}

图像和视频限制在容器宽度内，保持响应式：
```
img,
video {max-width: 100%;height: auto;
}
```

添加自定义样式

Tailwind 从一开始就被设计为可扩展和可定制的，因此无论您构建什么，您都不会感觉自己正在与框架作斗争。

注意，下述内容都应在你自定义的css文件内操作，因为最新版本去除了配置文件

自定义主题

如果您想要更改调色板、间距比例、排版比例或断点等内容，请使用@themeCSS 中的指令添加自定义内容：

@theme {--font-display: "Satoshi", "sans-serif";--breakpoint-3xl: 120rem;--color-avocado-100: oklch(0.99 0 0);--color-avocado-200: oklch(0.98 0.04 113.22);--color-avocado-300: oklch(0.94 0.11 115.03);--color-avocado-400: oklch(0.92 0.19 114.08);--color-avocado-500: oklch(0.84 0.18 117.33);--color-avocado-600: oklch(0.53 0.12 118.34);--ease-fluid: cubic-bezier(0.3, 0, 0, 1);--ease-snappy: cubic-bezier(0.2, 0, 0, 1);/* ... */
}

为什么`@theme`不是`:root`？

主题变量不仅仅是CSS变量 - 它们还指示 Tailwind 创建可在 HTML 中使用的新实用程序类。

由于主题变量的作用比常规 CSS 变量更多，Tailwind 使用特殊语法，以便始终明确定义主题变量。主题变量也必须在顶层定义，并且不能嵌套在其他选择器或媒体查询中，使用特殊语法可以强制执行此要求。

使用任意值

当你发现自己确实需要top: 117px在正确的位置获取背景图像时，请使用 Tailwind 的方括号表示法动态生成具有任意值的类：

<div class="top-[117px]"><!-- ... -->
</div>

这适用于框架中的所有内容，包括背景颜色、字体大小、伪元素内容等：

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']"><!-- ... -->
</div>

函数和指令

指令是您可以在 CSS 中使用的自定义 Tailwind 特定规则，它为 Tailwind CSS 项目提供特殊功能。

@import

使用@import指令内联导入 CSS 文件，包括 Tailwind 本身：

@import "tailwindcss";

@theme

使用@theme指令定义项目的自定义设计标记，如字体、颜色和断点：

@theme {--font-display: "Satoshi", "sans-serif";--breakpoint-3xl: 120rem;--color-avocado-100: oklch(0.99 0 0);--color-avocado-200: oklch(0.98 0.04 113.22);--color-avocado-300: oklch(0.94 0.11 115.03);--color-avocado-400: oklch(0.92 0.19 114.08);--color-avocado-500: oklch(0.84 0.18 117.33);--color-avocado-600: oklch(0.53 0.12 118.34);--ease-fluid: cubic-bezier(0.3, 0, 0, 1);--ease-snappy: cubic-bezier(0.2, 0, 0, 1);/* ... */
}

@variant

使用@variant指令将 Tailwind 变体应用于 CSS 中的样式：

.my-element {background: white;@variant dark {background: black;}
}

@apply

使用@apply指令将任何现有的实用程序类内联到您自己的自定义 CSS 中：

.select2-dropdown {@apply rounded-b-lg shadow-md;
}.select2-search {@apply rounded border border-gray-300;
}.select2-results__group {@apply text-lg font-bold text-gray-900;
}

当您需要编写自定义 CSS（例如覆盖第三方库中的样式）但仍想使用设计令牌并使用您在 HTML 中习惯使用的相同语法时，这很有用。

@reference

如果您想在 Vue 或 Svelte 组件的块中或 CSS 模块中使用@apply或，则需要导入主题变量、自定义实用程序和自定义变体，以使这些值在该上下文中可用。@variant``<style>

为了在输出中不重复任何 CSS，请使用@reference指令导入主样式表以供参考，而无需实际包含样式：

<template><h1>Hello world!</h1>
</template><style>@reference "../../app.css";h1 {@apply text-2xl font-bold text-red-500;}
</style>

如果您只是使用默认主题而没有进行任何自定义，则可以tailwindcss直接导入：

<template><h1>Hello world!</h1>
</template><style>@reference "tailwindcss";h1 {@apply text-2xl font-bold text-red-500;}
</style>

`--alpha()`

使用该--alpha()函数调整颜色的不透明度：

输入 CSS

.my-element {color: --alpha(var(--color-lime-300) / 50%);
}

编译后的 CSS

.my-element {color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

–spacing()

使用该--spacing()函数根据您的主题生成间距值：