Tailwind学习

coffee_nice

14人浏览 · 2026-03-31 14:53:56

coffee_nice · 2026-03-31 14:53:56 发布

Tailwind4.0 CSS 万字学习笔记：从基础到进阶

为什么学习 Tailwind CSS
CSS 学习路线与 Tailwind 的对应关系
Tailwind CSS 简介与核心概念
环境搭建与配置
基础样式：字体、颜色、背景、边框
盒模型与间距
定位与层叠上下文
Flexbox 布局
Grid 布局
响应式设计与断点
暗色模式与主题定制
交互状态与伪类
自定义指令与插件
最佳实践

为什么学习 Tailwind CSS

在如今ai时代，ai编写完代码后，只会有少量样式的错误。前端程序员一般在定位错误的时候会先找到出错的结构标签再去寻找css错误，引入Tailwind只需在对应标签写入类名。维护简单，页面简短。

ai时代的前端利器

CSS 学习路线与 Tailwind 的对应

传统 CSS 学习路线通常遵循以下顺序：

基础语法：选择器、属性、值
文本样式：字体、颜色、背景、边框
盒模型：宽高、内边距、外边距、边线
布局：浮动、定位、Flexbox、Grid
响应式设计：媒体查询、断点
高级特性：动画、变换、伪类、伪元素

本文与css路线完全相同，意在缓解各位的记忆压力，争取一小时拿下，简历中多描写一笔。

Tailwind CSS 简介与核心概念

什么是 Tailwind CSS

Tailwind CSS 是一个实用工具优先的 CSS 框架，提供大量低级别的类名（如 text-center、bg-blue-500、p-4），开发者直接组合这些类来构建界面，无需编写自定义 CSS。

核心概念

实用工具类（Utility Classes）：每个类名只负责一个 CSS 属性，例如 text-center 对应 text-align: center。
设计令牌（Design Tokens）：通过配置文件集中管理颜色、间距、字体等，保证一致性。
响应式前缀（Responsive Prefixes）：使用 sm:、md:、lg: 等前缀控制不同屏幕尺寸下的样式。
状态前缀（State Prefixes）：hover:、focus:、active: 等处理交互状态。
暗色模式（Dark Mode）：使用 dark: 前缀轻松适配暗色主题。
自定义指令（@apply）：可在 CSS 文件中将多个实用类组合成一个自定义类，便于复用。

环境搭建与配置

安装方式

Tailwind 可以集成到各种前端项目中，最常用的是通过 npm 安装。

1.1 使用 npm 安装（推荐）

bash

npm install -D tailwindcss
npx tailwindcss init

1.2 配置文件

根目录新建名为postcss.config.cjs文件

#  ./postcss.config.cjs
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

创建main.css

# styles/main.css
@import "tailwindcss";

在main.js引入样式

main.js
import './styles/main.css'

新版tailwind对tailwind.config.cjs文件为可选项，配置后不应该后期结果。

方式2.快速体验（CDN）

若仅用于学习或原型开发，可通过 CDN 快速引入，但不推荐用于生产：

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

但这种方式无法自定义主题，且体积较大。

基础样式：字体、颜色、背景、边框

字体

字体族

Tailwind 提供默认字体栈，通过 font-sans、font-serif、font-mono 设置。

<p class="font-sans">菠萝</p>
<p class="font-serif">菠萝</p>
<p class="font-mono">菠萝</p>

字体粗细

font-thin、font-normal、font-bold。

<p class="font-thin">菠萝🍍</p>
<p class="font-normal">菠萝🍍</p>
<p class="font-bold">菠萝🍍</p>

网页示例：
在这里插入图片描述

文字颜色

通过 text-{color}-{shade} 设置颜色，如 text-red-500、text-blue-700。数值越大，颜色越深，
在实际工作环境不这样使用。

<p class="text-green-900">菠萝菠萝</p>
<p class="text-green-500">菠萝菠萝菠萝</p>

网页示例：
在这里插入图片描述

文字对齐

text-left、text-center、text-right、text-justify。

    <p class="text-center text-2xl">居中对齐菠萝菠萝</p>
    <p class="text-right text-lg">右对齐菠萝菠萝菠萝</p>
    <p class="text-left text-sm">左对齐菠萝菠萝菠萝</p>
    <p class="text-justify">
  这是一段较长的文本，当设置 text-justify 后，文本会在容器宽度内自动调整间距，使每行文字都左右对齐，视觉上更整齐。</p>

网页示例：
在这里插入图片描述

文字装饰

underline、line-through、no-underline。

<a href="#" class="underline text-2xl">菠萝菠萝</a>
<a href="#" class="line-through text-2xl">菠萝菠萝</a>
<a href="#" class="no-underline text-2xl">菠萝菠萝</a>

网页示例：
在这里插入图片描述

文字转换

uppercase、lowercase、capitalize、normal-case。

    <p class="text-2xl uppercase">Pineapple全部大写</p>

    <p class="text-2xl lowercase">PINEAPPLE全部小写</p>

    <p class="text-2xl capitalize">pineapple首字母大写</p>

    <p class="text-2xl normal-case">pineapple正常显示</p>

网页示例：
在这里插入图片描述

行高

leading-{size}，如 leading-none、leading-tight、leading-snug、leading-normal、leading-relaxed、leading-loose。

   <p class="text-2xl leading-none">大菠萝🍍行距正常</p>

   <p class="text-2xl leading-tight">大菠萝🍍行距紧凑</p>

   <p class="text-2xl leading-snug">大菠萝🍍行距稍松</p>

   <p class="text-2xl leading-normal">大菠萝🍍行距正常</p>

   <p class="text-2xl leading-relaxed">大菠萝🍍行距松</p>

   <p class="text-2xl leading-loose">大菠萝🍍行距宽松</p>

网页示例：
在这里插入图片描述

字间距

tracking-{size}，如 tracking-tighter、tracking-tight、tracking-normal、tracking-wide、tracking-wider、tracking-widest。

<p class="text-2xl tracking-tighter">Pineapple</p>

<p class="text-2xl tracking-tight">Pineapple</p>

<p class="text-2xl tracking-normal">Pineapple</p>

<p class="text-2xl tracking-wide">Pineapple</p>

<p class="text-2xl tracking-wider">Pineapple</p>

<p class="text-2xl tracking-widest">Pineapple</p>

网页示例：
在这里插入图片描述

颜色

Tailwind 的色彩系统基于设计令牌，默认包含颜色{color}如 slate、gray、zinc、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose，每个颜色有 50 到 950 的 11 个色阶{shade}。

背景颜色

bg-{color}-{shade}，如 bg-blue-100。

文本颜色

如上所述。

边框颜色

border-{color}-{shade}，需配合边框宽度使用。

自定义颜色

自定义文件结构，每个文件负责一块功能。在下方自定义章节有更详细介绍

然后使用 bg-brand、text-brand 等。

背景

背景图片

bg-{image}，例如 bg-none、bg-gradient-to-r（渐变）。

渐变方向：bg-gradient-to-t、bg-gradient-to-tr、bg-gradient-to-r、bg-gradient-to-br、bg-gradient-to-b、bg-gradient-to-bl、bg-gradient-to-l、bg-gradient-to-tl。略作了解

颜色停止点：from-{color}、via-{color}、to-{color}。

<div class="bg-gradient-to-r from-blue-500 to-purple-500">渐变背景</div>

网页示例：
在这里插入图片描述

背景尺寸

bg-auto、bg-cover、bg-contain。

背景位置

bg-bottom、bg-center、bg-left、bg-left-bottom 等。

背景重复

bg-repeat、bg-no-repeat、bg-repeat-x、bg-repeat-y。

背景附着

bg-fixed、bg-local、bg-scroll

<div class="border-2 w-1/2 h-[100px]  bg-center bg-no-repeat bg-[url('/public/favicon.ico')]">
</div>

网页示例：
在这里插入图片描述

边框

边框圆角

rounded-{size}：rounded-none、rounded-sm、rounded（默认）、rounded-md、rounded-lg、rounded-xl、rounded-2xl、rounded-3xl、rounded-full（圆形）。

还可以单独设置：rounded-t-lg（左上右上）、rounded-b-lg、rounded-l-lg、rounded-r-lg、rounded-tl-lg、rounded-tr-lg、rounded-bl-lg、rounded-br-lg。

 <div class="rounded-full bg-yellow-300 w-10 h-10"></div>

网页示例：
在这里插入图片描述

边框宽度

border、border-0、border-2、border-4、border-8。

单独方向：border-t、border-r、border-b、border-l。
分别是上右下左

边框样式

border-solid、border-dashed、border-dotted、border-double、border-none。

border-{方向}-{粗细\样式\圆角}

盒模型与间距

宽度与高度

宽度

w-{size}：w-0、w-px、w-0.5、w-1（对应 0.25rem）…w-96（24rem）。还有百分比：w-1/2、w-1/3、w-2/3、w-1/4、w-3/4、w-full、w-screen、w-min、w-max、w-fit
w-[px、vh] 中括号内接具体值

<div class="w-1/2">宽度50%</div>
<div class="w-[123px] bg-yellow-300">宽度123</div>

图片示例：
![[Pasted image 20260330224017.png]] 在这里插入图片描述

最小宽度

min-w-0、min-w-full、min-w-min、min-w-max、min-w-fit。

最大宽度

max-w-{size}：max-w-none、max-w-xs（20rem）、max-w-sm、max-w-md、max-w-lg、max-w-xl、max-w-2xl…max-w-7xl、max-w-full、max-w-screen-sm 等。

高度

与宽度同理

类似宽度：h-{size}、h-1/2、h-full、h-screen、h-auto。

最小/最大高度

min-h-0、min-h-full、min-h-screen；max-h-{size}。

内边距（Padding）

p-{size} 表示所有方向，px-{size} 表示左右，py-{size} 表示上下，pt-{size}上、pr-{size}右、pb-{size}下、pl-{size}左。

尺寸单位遵循比例：p-1 = 0.25rem (4px)，p-2 = 0.5rem，…p-96 = 24rem。

外边距（Margin）

类似内边距：m-{size}、mx-{size}、my-{size}、mt-{size}、mr-{size}、mb-{size}、ml-{size}。

还有负边距：-m-1、-mx-2 等。

盒模型

box-border（默认）和 box-content 控制盒模型。

    <div class="bg-yellow-300 w-1/2 h-[100px]  mx-auto">

    <div class="p-4 border-1">内边距</div>

    <div class="m-4 border-1">外边距</div>

    </div>

网页示例：
在这里插入图片描述

定位与层叠上下文

定位类型

static（默认）、relative、absolute、fixed、sticky。

  <div class="relative bg-yellow-400">

  <div class="absolute top-2 left-4">绝对定位的子元素</div>

  </div>

网页示例：
在这里插入图片描述

定位偏移

top-0、top-auto、top-1/2、top-px 等，同样适用于 right、bottom、left。

z-index

z-0、z-10、z-20、z-30、z-40、z-50、z-auto。

html

层级10

Flexbox 布局

启用 Flex

flex（inline-flex 对应 inline-flex）。

方向

flex-row（默认）、flex-row-reverse、flex-col、flex-col-reverse。

换行

flex-wrap、flex-wrap-reverse、flex-nowrap。

对齐与分布

主轴对齐（justify-content）

justify-start、justify-end、justify-center、justify-between、justify-around、justify-evenly。

交叉轴对齐（align-items）

items-start、items-end、items-center、items-baseline、items-stretch。

多行对齐（align-content）

content-start、content-end、content-center、content-between、content-around、content-evenly、content-stretch。

单个项目对齐（align-self）

self-auto、self-start、self-end、self-center、self-stretch、self-baseline。

//浮动盒子
<div class="flex justify-between w-1/2 m-10 border-1 border-solid">

    <div class="w-1/5 bg-red-500 text-white text-center">1</div>

    <div class="w-1/5 bg-green-500 text-white text-center">2</div>

    <div class="w-1/5 bg-blue-500 text-white text-center">3</div>

    <div class="w-1/5 bg-yellow-500 text-white text-center">4</div>

  </div>

在这里插入图片描述

Grid 布局

启用 Grid

网格模板列

grid-cols-{n} 定义列数，如 grid-cols-1、grid-cols-2…grid-cols-12。也可使用 grid-cols-none。

自定义列宽：grid-cols-[200px_minmax(0,1fr)_100px]。

网格模板行

grid-rows-{n}，类似列。

跨列与跨行

col-span-{n}、row-span-{n}。col-span-full 占满整行。

列起始与结束

网格对齐

类似 Flex 的对齐方式：

justify-items：justify-items-start、justify-items-end、justify-items-center、justify-items-stretch
justify-self：justify-self-start 等
align-items：items-start 等
align-self：self-start 等
place-items：同时设置 align-items 和 justify-items
place-self：同时设置 align-self 和 justify-self

间距（gap）

gap-{size} 用于行和列间距，gap-x-{size}、gap-y-{size} 分别设置列间距和行间距。

 <div class="grid grid-cols-4 w-1/2 m-10 border-1 border-solid">

    <div class=" bg-red-500 text-white text-center">1</div>

    <div class=" bg-green-500 text-white text-center">2</div>

    <div class=" bg-blue-500 text-white text-center">3</div>

    <div class=" bg-yellow-500 text-white text-center">4</div>

  </div>

在这里插入图片描述

响应式设计与断点

Tailwind 使用移动优先（mobile-first）的响应式设计理念：默认样式适用于小屏幕，通过断点前缀覆盖更大屏幕的样式。

默认断点

前缀	最小宽度	描述
`sm`	640px	小屏幕（手机横屏）
`md`	768px	中等屏幕（平板）
`lg`	1024px	大屏幕（笔记本）
`xl`	1280px	超大屏幕（桌面）
`2xl`	1536px	2倍超大屏幕

用法

在类名前添加前缀，如 md:text-center，表示在 md 及以上屏幕居中文本。

<div class="text-left md:text-center lg:text-right">响应式文本对齐</div>

响应式间距

<div class="p-4 md:p-8 lg:p-12">内边距随屏幕增大</div>

响应式布局

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <div>卡片1</div>
  <div>卡片2</div>
  <div>卡片3</div>
  <div>卡片4</div>
</div>

暗色模式与主题定制

启用暗色模式

在 Tailwind v4 中，dark: 变体默认就会响应用户的系统配色方案（prefers-color-scheme），你不需要做任何配置，直接使用即可。

使用暗色模式前缀

在类名前加 dark:，表示暗色模式下的样式。

暗色模式适配

自定义暗色模式切换

如果你需要一个用户可控制的明暗切换按钮（如点击月亮/太阳图标），只需两步

第一步：在全局 CSS 文件中声明 dark 变体

./ main.css
@import "tailwindcss";
/* 声明 dark 变体：当 .dark 类存在于 HTML 元素上时生效 */
@custom-variant dark (&:where(.dark, .dark *));

第二步：编写 JS 切换逻辑

// 切换主题的核心函数
const toggleTheme = () => {
  const htmlElement = document.documentElement
  if (isDark.value) {
    // 当前是暗黑，切换到明亮
    htmlElement.classList.remove('dark')
    localStorage.setItem('theme', 'light')
    isDark.value = false
  } else {
    // 当前是明亮，切换到暗黑
    htmlElement.classList.add('dark')
    localStorage.setItem('theme', 'dark')
    isDark.value = true
  }

}

主题定制

Tailwind 的主题系统非常灵活，可以覆盖或扩展所有设计令牌。4.0版本无需编写js进行定制操作。只需在css编写，main.css统一导入。
文件目录
`src/
├── styles/
│ ├── main.css # 入口文件，只负责导入
│ ├── theme.css # 自定义主题 (@theme 变量)
│ ├── components.css # 组件样式 (@layer components)
│ ├── utilities.css # 自定义工具类 (@utility)
│ └── overrides.css # 第三方库样式覆盖（可选）

自定义颜色

老版定义颜色需要在js编写

theme: {
  extend: {
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        // ...
        900: '#1e3a8a',
      }
    }
  }
}

新版定义方法 styles/

./ components.css
@layer components {
  .btn-primary {
    @apply rounded-lg px-4 py-2 text-yellow-500;
  }
}

./ theme.css
@theme {
  --color-primary: #ff0000;
  --color-secondary: #00ff00;
}

./main.css
@import "tailwindcss";
@import "./theme.css";
@import "./components.css";

网页示例：
在这里插入图片描述

自定义间距

自定义字体

@theme {
  /* 自定义颜色 */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  /* 自定义字体 */
  --font-display: "Inter", sans-serif;
  /* 自定义间距 */
  --spacing-18: 4.5rem;  
  /* 自定义断点 */
  --breakpoint-3xl: 1920px;
}

<div class="bg-primary font-display p-18">这是一个使用自定义主题的盒子</div>

交互状态与伪类

Tailwind 支持大量状态前缀，处理交互样式。

常用状态

hover:：鼠标悬停
focus:：获得焦点
active:：激活状态（鼠标按下）
disabled:：禁用状态
group-hover:：父元素悬停时，子元素变化（需要父元素有 group 类）
focus-within:：内部任意元素获得焦点时
first:、last:、odd:、even:：子元素位置伪类
visited:：链接已访问

示例

<button class="bg-blue-500 hover:bg-yellow-700 focus:outline-none focus:ring-4 focus:ring-red-300 disabled:opacity-50">
  按钮
</button>
<div class="group">
  <div class="group-hover:bg-gray-200">悬停时改变背景</div>
</div>

组合使用

可以多个前缀叠加，如 hover:focus:bg-red-500，但需注意顺序。

自定义指令与插件

@apply 指令

在 CSS 文件中，可以使用 @apply 将多个实用类组合成一个自定义类，便于复用。如下所示
然后在 HTML 中使用 <button class="btn-primary">。

但注意，过度使用 @apply 会背离实用工具优先的初衷，仅在需要复用的复杂组件时使用。

自定义组件类

在 @layer components 中定义自定义组件类：

./ components.css
@layer components {
  .btn-primary {
    @apply rounded-lg px-4 py-2 text-yellow-500;
  }
}

<div class="card">卡片</div>

网页示例：
在这里插入图片描述

插件系统

Tailwind 官方提供了许多插件，如 @tailwindcss/forms、@tailwindcss/typography、@tailwindcss/aspect-ratio 等。

安装插件：

bash

npm install @tailwindcss/forms

在配置中引入：

plugins: [
  require('@tailwindcss/forms'),
]

编写自定义插件

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

最佳实践

直接在 HTML 中组合类：保持样式与结构在一起，便于理解和维护。
避免过度使用 @apply：除非是高度复用的组件，否则不要将实用类打包成自定义类，否则会失去 Tailwind 的灵活性。
使用响应式前缀：先写移动端样式，再用断点覆盖，符合移动优先。
利用状态前缀：将交互样式内联在元素上，避免在 CSS 中分散管理。
配置设计令牌：通过配置文件统一管理颜色、字体、间距，保持品牌一致性。
使用官方插件：@tailwindcss/forms 重置表单样式，@tailwindcss/typography 美化富文本内容。
利用编辑器插件：安装 Tailwind CSS IntelliSense 插件，获得类名自动补全和提示。
代码组织：在组件化框架（如 React）中，将样式类定义在组件内部，避免全局污染。

总结

Tailwind CSS 通过实用工具优先的理念，彻底改变了 CSS 的编写方式。它让开发者能够以极高的效率构建一致、响应式、可维护的用户界面，同时借助按需构建保证了生产环境的性能。

本文按照传统 CSS 学习路线，从字体、颜色等基础样式开始，逐步深入到盒模型、定位、Flexbox 和 Grid 布局，再到响应式、暗色模式、状态处理、自定义扩展等高级主题，全面覆盖了 Tailwind CSS 的核心知识。

掌握 Tailwind CSS，不仅是一门技术，更是一种高效的前端开发思维。希望这份笔记能帮助您快速上手并熟练运用 Tailwind CSS，在实际项目中发挥其强大威力。

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

AI大模型产品经理学习路线图！从入门到实战，非常详细收藏我这一篇就够了

AtomGit开源社区

一文看懂 Transformer

摘要本文系统介绍了自然语言处理（NLP）中Transformer模型的演进过程。首先指出文本处理的特殊性在于顺序和上下文关系，早期采用RNN（循环神经网络）按顺序处理文本但存在训练慢、长距离依赖困难等问题。LSTM（长短期记忆网络）通过记忆控制机制改进RNN，但仍无法解决串行处理的根本限制。Transformer革命性地采用自注意力机制（Self-Attention），使每个词能直接关注全句相关

AtomGit开源社区

「码动四季·开源同行」go实战案例：如何在 Go 微服务中实现负载均衡？

AtomGit开源社区

所有评论(0)

查看更多评论

coffee_nice

@coffee_nice

已为社区贡献1条内容

Tailwind学习

coffee_nice

Tailwind4.0 CSS 万字学习笔记：从基础到进阶

目录

为什么学习 Tailwind CSS

CSS 学习路线与 Tailwind 的对应

Tailwind CSS 简介与核心概念

什么是 Tailwind CSS

核心概念

环境搭建与配置

安装方式

1.1 使用 npm 安装（推荐）

1.2 配置文件

方式2.快速体验（CDN）

基础样式：字体、颜色、背景、边框

字体

字体族

字体大小

字体粗细

文字颜色

文字对齐

文字装饰

文字转换

行高

字间距

颜色

背景颜色

文本颜色

边框颜色

自定义颜色

背景

背景图片

背景尺寸

背景位置

背景重复

背景附着

边框

边框圆角

边框宽度

边框样式

盒模型与间距

宽度与高度

宽度

最小宽度

最大宽度

高度

最小/最大高度

内边距（Padding）

外边距（Margin）

盒模型

定位与层叠上下文

定位类型

定位偏移

z-index

Flexbox 布局

启用 Flex

方向

换行

对齐与分布

主轴对齐（justify-content）

交叉轴对齐（align-items）

多行对齐（align-content）

单个项目对齐（align-self）

Grid 布局

启用 Grid

网格模板列

网格模板行

跨列与跨行

列起始与结束

网格对齐

间距（gap）

响应式设计与断点

默认断点

用法

响应式间距

响应式布局

暗色模式与主题定制

启用暗色模式

使用暗色模式前缀

自定义暗色模式切换