Tailwind css -- 学习记录

weixin_47475163

397人浏览 · 2026-05-14 11:18:46

weixin_47475163 · 2026-05-14 11:18:46 发布

简介

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

核心特点：工具类优先；响应式设计；鼠标悬停、聚焦以及其他状态；夜间模式；重用样式；自定义整个框架；

工具类优先的概念也就是，优先使用提供的工具类样式去组合想要的样式，而不是写复杂的自定义的css代码，这样能极大缩减代码冗余，而且灵活多变。

安装

第一种：CDN

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

第二种：npm

使用 Tailwind CLI 工具

//安装 Tailwind CLI 工具
npm install tailwindcss @tailwindcss/cli
//在css文件中导入 tailwindcss，添加下面一句代码，例如 input.css
@import "tailwindcss";
//运行工具构建 Css 
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
//使用
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

使用 Vite 插件

//安装插件
npm install tailwindcss @tailwindcss/vite
//在配置文件 vite.config.ts 添加该插件
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
//在css文件中导入 Tailwind CSS
@import "tailwindcss";
//启动构建流程
npm run dev
//使用
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/styles.css" rel="stylesheet"> //必须添加编译后的css文件
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

使用 PostCSS 插件

//安装插件
npm install tailwindcss @tailwindcss/postcss postcss
//在配置文件 postcss.config.mjs 添加插件
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}
//下面步骤和 vite 插件的步骤一模一样，包括使用步骤

使用

配置

使用 cli 工具可以快速生成一个基础的配置文件（ tailwind.config.js ）

npx tailwindcss init
//文件内容
module.exports = {
  content: ["./src/**/*.{html,js,vue}"], // 定义需要扫描的模板文件路径
  theme: {
    extend: {}, // 自定义扩展
  },
  plugins: [], // 配置插件
}

content 字段用于指定 Tailwind 的模板文件路径，Tailwind 会扫描这些文件以生成必要的样式，减少生成的 CSS 文件体积，只生成模板文件中使用的样式，防止未使用的样式被编译到最终输出中。
theme 字段，可以自定义颜色、字体、间距、边框大小等，扩展新的样式。
plugins 字段 ，添加自定义的工具类。

工具类

文本相关

通常是使用 text- 作为前缀，例如，text-center text-red-500 ；但是如果是字体相关则是 font- 前缀。

背景相关

使用 bg- 前缀。

间距相关

p- 前缀，内边距 padding；m- 前缀，外边距 margin，如果是想要只加上边距则是 mt- 前缀，同理可推其他方向。

<div class="m-8 p-4 mt-4"/>

布局相关

flex ，设置为弹性布局；grid ，设置为网格布局，需要设置行列；items-center：将 flexbox 容器中的子元素垂直居中；justify-between：在 flexbox 容器中，子元素之间的空间均等分布。

边框相关

border / border- ，可单独使用也可以作为前缀；rounded- 前缀，圆角功能。

阴影相关

shadow / shadow- ，阴影功能。

响应式相关

不同屏幕尺寸对应不同的样式，sm：，small 小屏，宽度>=640px；md：，midlle 中屏，宽度>=768px；lg：，large 大屏，宽度>=1024px；xl: ，超大屏，宽度>=1280px。

//sm，md，lg不仅是作为屏幕尺寸使用，在其他工具里也有相同的用法，只是作为大小使用，例如 rounded-lg
<div class="bg-blue-500 sm:bg-green-500 lg:bg-red-500 p-4"/>

状态相关

hover: ，鼠标悬停；focus: ，元素聚焦；active: ，元素激活；visited: ，访问过的链接样式；focus-within: ，父元素在子元素获得焦点时的样式。

<button class="hover:bg-blue-700 focus:outline-none active:bg-red-500"></button>
//可以使用多个状态组合
<div class="hover:focus:bg-blue-500"/>
//可以使用 group 让父元素状态变化时改变子元素样式
div class="group">
  <button class="px-4 py-2 bg-blue-500 text-white group-hover:bg-gray-300">
    将鼠标悬停在父级上
  </button>
</div>

颜色相关

我们常用的颜色的英文单词，red，yellow，white 等，后面跟着的数字代表颜色亮度。

<div class="bg-blue-500"/>

伪类

根据元素在 dom 中的位置或顺序来应用样式。

<ul class="space-y-4">
  <li class="first:font-bold">Item 1</li> //第一个样式
  <li class="odd:bg-gray-100">Item 2</li> //奇数样式
  <li class="even:bg-gray-200 last:font-light">Item 3</li> //偶数样式，最后一个样式
</ul>

表单样式

表单状态类，用于控制表单元素在不同状态下的样式变化，如必填（required）、无效（invalid）和禁用（disabled）状态。

<input class="border p-2 required:border-red-500 invalid:border-yellow-500 disabled:bg-gray-300" type="text" placeholder="输入内容">

重用样式

看了上面后知道了，我们虽然使用方便，但是需要在每个标签样式里都写上工具类，对于重复的那些组合样式，如果一旦修改就要手动全部修改，非常麻烦，所以提供了自定义类使用。

需要在 css 文件里定义工具类时，在工具类组合前面加上修饰符。

//在css里定义该工具类，使用 avatar 名字就可以了，修改直接在这里修改即可
.avatar {
  @apply w-16 h-16 rounded-full border-2 border-white;
}
//定义层级
@layer components {
  .avatar {
    @apply w-16 h-16 rounded-full border-2 border-white shadow-md;
  }
  .button {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
}