TailwindCSS v4 快速入门教程

TailwindCSS v4 快速上手

复制代码

前言：学习网址：https://www.runoob.com/tailwindcss/tailwindcss-tutorial.html

一、介绍

Tailwind CSS 是一个开放源代码 CSS 框架。Tailwind CSS 是一个功能丰富的、实用性优先的 CSS 框架，用于快速构建定制的设计。Tailwind CSS 由 Adam Wathan 和 Jonathan Reinink 于 2017 年创建，并于 2018 年发布。Tailwind CSS 的核心理念是提供大量的工具类（utility classes），这些类可以直接应用到 HTML 元素上，以实现设计。

Tailwind CSS 官网：https://tailwindcss.com/

Tailwind CSS 官方文档：https://tailwindcss.com/docs/

先简单体验一下：

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="bg-blue-500 text-white p-4 rounded-lg">
	  Hello, Tailwind CSS!
	</div>
</body>
</html>

Tailwind CSS 是一个实用优先的 CSS 框架，与传统的框架（如 Bootstrap、Foundation）不同，它没有预定义的组件，而是提供了一系列原子化的 CSS 类，允许你直接在 HTML 中应用样式。

Tailwind CSS 是一个工具优先的框架，意味着它提供了大量的预定义类，而不是预设的组件,这使得开发者可以构建几乎任何设计，而不需要编写 CSS。

Tailwind CSS 适合那些喜欢直接在 HTML 中使用类来控制样式的开发者，它使得快速原型制作和开发定制设计变得简单快捷。然而，它的这种"无预设"的方法也意味着需要更多的类名记忆和可能的陡峭学习曲线。

核心特点：

工具类优先（Utility-First）：遵循工具类优先的流程，使用具有约束性的基本工具类来构建复杂的组件。
响应式设计：使用响应式布局标识符（responsive modifiers），构建完全支持响应式布局的用户界面，以适应任何大小的屏幕。
鼠标悬停、聚焦以及其他状态：使用条件标识符（conditional modifiers），可以为处于交互状态（如鼠标悬停、聚焦等）中的元素设置样式。
夜间模式（Dark Mode）：通过在HTML代码中添加夜间模式标识符（dark mode modifier），直接让你的网站支持夜间模式。
重用样式：通过创建可重用的抽象来管理冗余并保持项目的可维护性。
自定义整个框架：通过自定义整个框架使其匹配你的需求，使用你的自定义样式对其进行扩展。

例子

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="bg-blue-500 text-white p-4 rounded-lg">
	  Hello, Tailwind CSS!
	</div>
</body>
</html>

说明：

bg-blue-500：设置背景颜色为蓝色（blue），具体是蓝色调色板中的第500级。
text-white：设置文本颜色为白色。
p-4：设置内边距（padding）为中等大小（16px）。
rounded-lg：设置圆角为大尺寸（8px）

Tailwind CSS 与传统的框架（如 Bootstrap、Foundation）不同，它没有预定义的组件，而是提供了一系列原子化的 CSS 类，允许你直接在 HTML 中应用样式。

特性	Tailwind CSS	Bootstrap
样式方式	原子化类名	组件化结构
定制化	强大且灵活	依赖变量，扩展较复杂
学习成本	较低，理解类名即可	需要熟悉组件和网格系统
社区生态	增长迅速，插件丰富	成熟但略显传统
体积优化	支持 PurgeCSS 移除未用样式	需手动优化

Tailwind CSS 的核心理念

实用类优先

每个类只完成一个具体任务，比如 text-center 是居中，mt-4 是添加上边距。
类名简单直观，几乎不用记忆复杂的 CSS 属性。

无组件限制

不提供像按钮、导航栏这样的现成组件。所有样式都通过类名组合实现。
提供极大的自由度，适用于自定义设计需求。

快速开发

在 HTML 中直接写样式，不需要频繁切换到 CSS 文件。
减少样式覆盖和冗余 CSS 的问题。

Tailwind CSS 的适用场景

快速原型开发
快速设计和调整页面，无需关心样式的重构问题。
团队协作
统一使用配置文件，避免样式冲突，维护成本低。
响应式布局
内置响应式设计支持，轻松实现多设备兼容。
大中型项目
配合工具（如 PurgeCSS）优化输出 CSS 文件，适应复杂项目需求。

三、Tailwind CSS 安装(CDN)

如果只想简单体验，可以直接引入 CDN 链接：

html 复制代码

<script src="https://cdn.tailwindcss.com"></script>

html 复制代码

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

使用这种方式使用：

**优点：**无需配置，适合快速开发和演示。
**缺点：**不能自定义样式，文件体积较大。

例子：

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

四、Tailwind CSS4 安装(NPM)

1.作为 Vite 插件安装

Vite 是一个现代化的前端构建工具，旨在通过利用现代浏览器的原生 ES 模块支持，提供快速的开发体验。

将 Tailwind CSS 作为 Vite 插件安装是将其与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最无缝的方式。

1.1、安装 Tailwind CSS

通过 npm 安装 tailwindcss 和 @tailwindcss/vite：

shell 复制代码

npm install tailwindcss @tailwindcss/vite

1.2、配置 Vite 插件

在 Vite 配置文件 vite.config.ts 中添加 @tailwindcss/vite 插件：

typescript 复制代码

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

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

1.3、导入 Tailwind CSS

在的 CSS 文件中添加 @import 以导入 Tailwind CSS：

css 复制代码

@import "tailwindcss";

1.4、启动构建流程

运行构建流程，使用 npm run dev 或你在 package.json 文件中配置的其他命令：

shell 复制代码

npm run dev

2.作为 PostCSS 插件安装

将 Tailwind CSS 作为 PostCSS 插件安装可以将其与 Next.js 和 Angular 等框架无缝结合。

2.1、安装 Tailwind CSS

通过 npm 安装 tailwindcss、@tailwindcss/postcss 和 postcss。

复制代码

npm install tailwindcss @tailwindcss/postcss postcss

2.2、将 Tailwind 添加到 PostCSS 配置中

在项目的 postcss.config.mjs 文件中（或任何配置 PostCSS 的地方）添加 @tailwindcss/postcss。

postcss.config.mjs 文件

javascript 复制代码

export default {
 plugins: {
  // 配置tailwindCSS相关
  "@tailwindcss/postcss": {},
  // // 自适应屏幕尺寸
  // "postcss-px-to-viewpoint": {
  // 	viewportWidth: 375
  // },
 }
}

2.3、导入 Tailwind CSS

在 CSS 文件中添加 @import 以导入 Tailwind CSS。

css 复制代码

@import "tailwindcss";

2.4、启动构建流程

运行构建流程，使用 npm run dev 或你在 package.json 文件中配置的其他命令。

shell 复制代码

npm run dev

2.5、在 HTML 中开始使用 Tailwind

确保编译后的 CSS 已包含在中（框架可能会自动处理），然后开始使用 Tailwind 的实用类来设置内容的样式。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

五、Tailwind CSS 基础概念

Tailwind CSS 是一个高度可定制的 CSS 框架，它提供了一套预定义的工具类，允许开发者快速构建和设计用户界面。

以下是 Tailwind CSS 的一些基础概念和用法：

概念	说明
工具类 (Utility-First)	Tailwind CSS 的核心是工具类，用于快速设置样式，直接应用到 HTML 元素上。
响应式前缀	使用如 `sm:`, `md:`, `lg:`, `xl:` 的前缀来控制不同屏幕尺寸下的样式。
颜色和尺寸	提供了预定义的颜色（如 `bg-red-500`）和尺寸（如 `text-lg`）来快速设置样式。
间距 (Spacing)	通过 `p-`, `m-`, `pt-`, `pr-` 等类控制内边距和外边距。
布局 (Layout)	提供 `flex`, `grid`, `float` 等类来实现布局控制。
文本样式	包括文本对齐、字体样式、颜色和转换的实用类，如 `text-center`, `font-bold`, `uppercase`。
背景和边框	提供背景颜色、背景图片、边框样式和颜色的工具类，如 `bg-gray-200`, `border-red-500`。
悬停和状态	使用 `hover:`, `focus:`, `active:` 等前缀为交互状态定义样式。
尺寸 (Sizing)	使用 `w-`, `h-` 类控制宽度和高度，如 `w-64`, `h-screen`。
可见性 (Visibility)	使用 `visible`, `invisible` 等类控制元素的可见性。
栅格系统 (Grid System)	提供基于 CSS Grid 的工具类，如 `grid`, `grid-cols-3`, `col-span-2`，实现响应式网格布局。
自定义配置	通过 `tailwind.config.js` 自定义颜色、间距、字体大小等，以适应项目需求。
暗色模式 (Dark Mode)	支持暗色模式，通过 `dark:` 前缀设置样式，并可在配置中启用暗色模式功能。
插件 (Plugins)	通过插件扩展功能，添加自定义的工具类或功能。
指令 (Directives)	在 CSS 文件中使用 `@tailwind` 指令引入不同层次的样式，如 `base`, `components`, `utilities`。

1. 工具类（Utility-First）

工具类（Utility Classes） 是 Tailwind CSS 的核心思想，指的是通过预定义的单一用途类名直接控制样式，而不是写传统的 CSS 规则。

Tailwind 的工具类可以让开发者快速定义样式，无需手动编写 CSS。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="text-center text-blue-500 font-bold">
	  Tailwind Utility Classes
	</div>
</body>
</html>

解析：

text-center：居中对齐。
text-blue-500：蓝色文字。
font-bold：加粗字体。

2. 响应式前缀

通过前缀设置不同屏幕尺寸下的样式。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
  		Responsive Example
	</div>
</body>
</html>

解析：

默认：红色背景。
小屏幕(sm: )（≥640px）：绿色背景。
中屏幕(md: )（≥768px）：蓝色背景。
大屏幕(lg: )（≥1024px）：黄色背景。

3. 颜色和尺寸

Tailwind 提供了丰富的预定义颜色和尺寸，便于快速应用。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<p class="text-center text-lg text-gray-600">
  		Text with pre-defined size and color
	</p>
</body>
</html>

解析：

text-lg：文字大小。
text-gray-600：灰色文字。
text-center：文字居中

4. 间距（Spacing）

通过间距工具类设置元素的内外边距。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="p-4 m-8 bg-pink-300">
	  Padding and Margin Example
	</div>
</body>
</html>

解析：

p-4：内边距为 1rem。
m-8：外边距为 2rem。

5. 布局（Layout）

提供的类可以快速实现灵活的布局方式，如 Flexbox 和 Grid。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="flex justify-between items-center">
	  <div>Item 1</div>
	  <div>Item 2</div>
	</div>
</body>
</html>

解释：

flex → display: flex;
这个你已经知道了，它创建一个 flex 容器。
justify-between → justify-content: space-between;
- 这个属性会让 flex 容器中的子元素沿着主轴（默认是水平方向）均匀分布，第一个元素在最左边，最后一个元素在最右边，剩余空间均匀分配在元素之间。
items-center → align-items: center;
- 这个属性会让 flex 容器中的子元素沿着交叉轴（默认是垂直方向）居中对齐。

6. 文本样式

控制文本的对齐、颜色、大小和其他样式。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<p class="text-center font-semibold text-red-500">
	  Centered Bold Text
	</p>
</body>
</html>

7. 背景和边框

通过工具类设置背景颜色、图片和边框样式。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="bg-yellow-200 border border-gray-400">
	  Background and Border Example
	</div>
</body>
</html>

8. 悬停和状态

为交互元素设置状态样式。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<button class="bg-blue-500 hover:bg-pink-300 text-white">
	  Hover Me
	</button>
</body>
</html>

9. 尺寸（Sizing）

设置元素的宽度和高度。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="w-[630px] h-[320px] bg-gray-300">
	  Width and Height
	</div>
</body>
</html>

Tailwind 的尺寸单位是：

每个数字单位 = 0.25rem（即 4px，当 1rem=16px 时）

如果你想设置 px，可以使用：

w-[640px]（任意值语法）

10. 可见性（Visibility）

控制元素的显示与隐藏。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="bg-pink-300 p-4 m-4 w-[300px] h-[300px] invisible sm:visible">
	  Visible only on small screens
	</div>
</body>
</html>

11. 栅格系统（Grid System）

使用 Tailwind 的 Grid 工具类创建网格布局。

html 复制代码

12. 自定义配置

通过配置文件自定义设计系统。

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // tailwind.config：Tailwind 的配置文件，用于自定义主题、颜色、间距等
    tailwind.config = {
      // theme.extend.colors：扩展 Tailwind 的颜色系统，添加自定义颜色
      theme: {
        extend: {
          colors: {
            // primary：自定义颜色名称（你可以改成 brand、main 等）
            primary: {
              // DEFAULT: '#1D4ED8'：设置 primary 的默认颜色（蓝色）
              DEFAULT: '#1D4ED8', // 设置默认色调
            },
          },
        },
      },
    };
    // 定义完成后就可以在 HTML 里使用 text-primary、bg-primary 等类
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-primary">
    Hello world!
  </h1>
</body>
</html>

13. 暗色模式

启用暗模式并定义样式。

html 复制代码

<div class="bg-white dark:bg-black text-black dark:text-white">
  Dark Mode Example
</div>

14. 插件

通过插件扩展 Tailwind 的功能。

javascript 复制代码

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.rotate-45': {
          transform: 'rotate(45deg)',
        },
      })
    }),
  ],
}

15. 指令（Directives）

通过 @tailwind 指令加载 Tailwind 的不同层。

css 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

六、结语

创作不易，如果您都看到这里了，可以给我一个点赞、收藏并关注一下么？您的支持与喜爱是激励我创作的最大动力！

如果内容有误请及时联系我进行修改！