Tailwind CSS介绍：Tailwind CSS是什么？Tailwind CSS怎么用？Tailwind CSS入门最简单的教程 Tailwind CSS介绍：Tailwind CSS是什么？Tailwind CSS怎么用？Tailwind CSS入门最简单的教程
By 海外杂谈
2025-01-03

Tailwind CSS介绍：Tailwind CSS是什么？Tailwind CSS怎么用？Tailwind CSS入门最简单的教程


Tailwind CSS 介绍

什么是 Tailwind CSS？

Tailwind CSS 是一个功能强大的低级别 CSS 框架，旨在通过实用类（Utility Classes）快速构建自定义设计，而无需离开你的 HTML。与传统的 CSS 框架（如 Bootstrap 或 Foundation）不同，Tailwind 提供了大量的预定义类，这些类可以直接在 HTML 元素上应用，以实现样式化效果。这样，开发者可以更加灵活地控制设计，而无需编写大量的自定义 CSS。

Tailwind CSS: Revolutionizing Modern Web Design | VLEHELP.COM

Tailwind CSS 的主要特点

  1. 实用优先（Utility-First）：Tailwind 提供了大量的实用类，允许开发者通过组合这些类来构建复杂的设计，而无需编写自定义 CSS。

  2. 高度可定制：通过配置文件，开发者可以轻松地自定义颜色、间距、字体等，满足不同项目的需求。

  3. 响应式设计：内置响应式类，方便实现适配不同设备的设计。

  4. 模块化和可复用：由于样式直接应用于 HTML，组件化开发更加简便。

  5. 兼容性强：可以与各种前端框架（如 React、Vue、Angular）无缝集成。

  6. 优化构建：通过 PurgeCSS 等工具，Tailwind 可以在生产环境中移除未使用的 CSS 类，显著减小文件体积。

Tailwind CSS 怎么用？

使用 Tailwind CSS 可以通过多种方式，具体选择取决于你的项目需求和技术栈。以下是几种常见的使用方法：

1. 通过 CDN 引入（适合快速原型开发）

适用于小型项目或快速原型开发，但不推荐用于生产环境，因为无法去除未使用的 CSS 类，导致文件体积较大。

步骤：

在 HTML 文件的 <head> 标签中引入 Tailwind 的 CDN 链接：

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Tailwind CSS 示例</title>   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> </head> <body>   <div class="bg-blue-500 text-white p-4">     Hello, Tailwind CSS!   </div> </body> </html>

2. 使用 npm 安装（适合现代前端项目）

适用于使用构建工具（如 Webpack、Vite）的项目，可以充分利用 Tailwind 的全部功能，并通过配置文件进行自定义。

步骤：

a. 初始化项目

mkdir my-project cd my-project npm init -y

b. 安装 Tailwind CSS 及其依赖

npm install tailwindcss postcss autoprefixer npx tailwindcss init -p

这将生成 tailwind.config.js 和 postcss.config.js 两个配置文件。

c. 配置 Tailwind

在 tailwind.config.js 中指定要扫描的文件路径，以便 PurgeCSS 可以移除未使用的 CSS 类：

// tailwind.config.js module.exports = {   content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],   theme: {     extend: {},   },   plugins: [], }

d. 创建 CSS 文件

在项目中创建一个 CSS 文件（例如 src/styles.css），并引入 Tailwind 的基础、组件和工具类：

/* src/styles.css */ @tailwind base; @tailwind components; @tailwind utilities;

e. 构建 CSS

使用 Tailwind CLI 构建 CSS：

npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch

这将在 ./dist/styles.css 中生成最终的 CSS 文件，并且 --watch 参数会在你修改源文件时自动重新构建。

f. 在 HTML 中引入生成的 CSS

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Tailwind CSS 示例</title>   <link href="dist/styles.css" rel="stylesheet"> </head> <body>   <div class="bg-green-500 text-white p-4">     Hello, Tailwind CSS!   </div> </body> </html>

3. 与前端框架集成

Tailwind CSS 可以与各种前端框架（如 React、Vue、Angular）无缝集成。以下以 React 为例说明如何在 Create React App 中集成 Tailwind。

步骤：

a. 创建 React 项目

npx create-react-app my-react-app cd my-react-app

b. 安装 Tailwind CSS

npm install tailwindcss postcss autoprefixer npx tailwindcss init -p

c. 配置 Tailwind

编辑 tailwind.config.js：

// tailwind.config.js module.exports = {   content: [     "./src/**/*.{js,jsx,ts,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }

d. 引入 Tailwind 到 CSS

在 src/index.css 中添加：

/* src/index.css */ @tailwind base; @tailwind components; @tailwind utilities;

e. 使用 Tailwind 类

在 React 组件中使用 Tailwind 的类：

// src/App.js import React from 'react'; function App() {   return (     <div className="bg-purple-600 text-white p-6">       <h1 className="text-3xl font-bold">Hello, Tailwind CSS!</h1>       <p className="mt-4">这是一个使用 Tailwind CSS 构建的示例。</p>     </div>   ); } export default App;

f. 运行项目

npm start

Tailwind CSS 入门最简单的教程

下面通过一个简单的示例，带你快速上手 Tailwind CSS。

示例项目：创建一个响应式导航栏

目标：使用 Tailwind CSS 创建一个简单的响应式导航栏，包含品牌名称和几个导航链接，且在移动设备上具有汉堡菜单。

步骤：

1. 设置项目结构

创建一个基本的 HTML 文件结构：

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Tailwind CSS 导航栏示例</title>   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> </head> <body>   <!-- 导航栏 -->   <nav class="bg-white shadow">     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">       <div class="flex justify-between h-16">         <!-- 品牌 -->         <div class="flex-shrink-0 flex items-center">           <a href="#" class="text-xl font-bold text-gray-800">MyBrand</a>         </div>         <!-- 导航链接（桌面端） -->         <div class="hidden md:flex space-x-4">           <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">首页</a>           <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">关于</a>           <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">服务</a>           <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">联系我们</a>         </div>         <!-- 汉堡菜单（移动端） -->         <div class="flex items-center md:hidden">           <button id="menu-button" class="text-gray-700 hover:text-gray-900 focus:outline-none">             <!-- 汉堡图标 -->             <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />             </svg>           </button>         </div>       </div>     </div>     <!-- 移动端菜单 -->     <div id="mobile-menu" class="md:hidden hidden">       <a href="#" class="block text-gray-700 hover:text-gray-900 px-4 py-2">首页</a>       <a href="#" class="block text-gray-700 hover:text-gray-900 px-4 py-2">关于</a>       <a href="#" class="block text-gray-700 hover:text-gray-900 px-4 py-2">服务</a>       <a href="#" class="block text-gray-700 hover:text-gray-900 px-4 py-2">联系我们</a>     </div>   </nav>   <!-- 内容区域 -->   <div>     <h1 class="text-2xl font-bold">欢迎使用 Tailwind CSS!</h1>     <p>这是一个简单的响应式导航栏示例。</p>   </div>   <!-- JavaScript 控制菜单显示 -->   <script>     const menuButton = document.getElementById('menu-button');     const mobileMenu = document.getElementById('mobile-menu');     menuButton.addEventListener('click', () => {       mobileMenu.classList.toggle('hidden');     });   </script> </body> </html>

2. 代码解析

  • 导航栏容器：

    <nav class="bg-white shadow">   ... </nav>

    使用 bg-white 设置背景为白色，shadow 添加阴影效果。

  • 内部容器：

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">   ... </div>

    max-w-7xl 设置最大宽度，mx-auto 居中对齐，px-4 sm:px-6 lg:px-8 设置不同屏幕尺寸下的水平内边距。

  • 品牌名称：

    <div class="flex-shrink-0 flex items-center">   <a href="#" class="text-xl font-bold text-gray-800">MyBrand</a> </div>

    使用 flex 布局，text-xl 设置字体大小，font-bold 加粗，text-gray-800 设置文本颜色。

  • 导航链接（桌面端）：

    <div class="hidden md:flex space-x-4">   <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">首页</a>   ... </div>

    hidden md:flex 表示在中等及以上屏幕尺寸显示，较小屏幕隐藏。space-x-4 设置子元素之间的水平间距。

  • 汉堡菜单（移动端）：

    <div class="flex items-center md:hidden">   <button id="menu-button" class="text-gray-700 hover:text-gray-900 focus:outline-none">     <!-- 汉堡图标 -->     ...   </button> </div>

    md:hidden 在中等及以上屏幕尺寸隐藏，仅在较小屏幕显示。

  • 移动端菜单：

    <div id="mobile-menu" class="md:hidden hidden">   <a href="#" class="block text-gray-700 hover:text-gray-900 px-4 py-2">首页</a>   ... </div>

    初始状态下隐藏，点击汉堡菜单按钮时通过 JavaScript 切换 hidden 类实现显示和隐藏。

  • JavaScript 控制菜单显示：

    const menuButton = document.getElementById('menu-button'); const mobileMenu = document.getElementById('mobile-menu'); menuButton.addEventListener('click', () => {   mobileMenu.classList.toggle('hidden'); });

    监听汉堡菜单按钮的点击事件，切换 hidden 类以控制移动端菜单的显示和隐藏。

3. 运行效果

在浏览器中打开上述 HTML 文件，你将看到一个简洁的导航栏：

  • 桌面端：显示品牌名称和导航链接。

  • 移动端：显示品牌名称和汉堡菜单按钮，点击按钮后显示导航链接。

3. 常用 Tailwind CSS 类快速参考

为了更好地使用 Tailwind CSS，以下是一些常用的类及其功能：

  • 布局相关：

    • flex、inline-flex：设置为弹性容器。

    • grid、inline-grid：设置为网格容器。

    • block、inline-block、hidden：设置显示类型。

    • container：设置响应式容器宽度。

    • mx-auto、my-4、p-2 等：设置外边距和内边距。

  • 排版相关：

    • text-left、text-center、text-right：设置文本对齐方式。

    • font-sans、font-serif、font-mono：设置字体系列。

    • font-bold、font-semibold、font-light：设置字体粗细。

    • text-sm、text-lg、text-xl 等：设置字体大小。

    • text-gray-700、text-red-500 等：设置文本颜色。

  • 背景相关：

    • bg-white、bg-gray-100、bg-blue-500 等：设置背景颜色。

    • bg-cover、bg-contain：设置背景图像大小。

    • bg-no-repeat、bg-repeat：设置背景图像重复方式。

  • 边框相关：

    • border、border-2、border-4：设置边框宽度。

    • border-gray-300、border-red-500 等：设置边框颜色。

    • rounded、rounded-md、rounded-full：设置圆角。

  • 状态相关：

    • hover:bg-blue-700：悬停时改变背景颜色。

    • focus:outline-none：聚焦时移除默认轮廓。

    • active:text-red-500：激活时改变文本颜色。

  • 响应式设计：

    • md:flex：在中等及以上屏幕尺寸显示为弹性容器。

    • lg:text-lg：在大屏幕上设置较大的字体。

    • sm:、md:、lg:、xl:、2xl: 前缀用于在不同屏幕尺寸下应用不同的类。例如：

4. Tailwind CSS 配置文件介绍

Tailwind CSS 的配置文件 tailwind.config.js 允许你自定义 Tailwind 的默认设置，包括颜色、字体、断点等。以下是一个基本的配置示例：

// tailwind.config.js module.exports = {   content: [     "./src/**/*.{html,js,jsx,ts,tsx,vue}",   ],   theme: {     extend: {       colors: {         primary: '#1c64f2',         secondary: '#f43f5e',       },       spacing: {         '128': '32rem',         '144': '36rem',       },     },   },   plugins: [], }

5. 使用插件扩展 Tailwind CSS

Tailwind 提供了丰富的插件生态，允许你扩展其功能。例如，使用 @tailwindcss/forms 插件可以更好地样式化表单元素。

安装插件：

npm install @tailwindcss/forms

配置插件：

在 tailwind.config.js 中添加插件：

// tailwind.config.js module.exports = {   // ...   plugins: [     require('@tailwindcss/forms'),   ], }

6. 使用 Tailwind CSS 与自定义 CSS 结合

虽然 Tailwind 提供了丰富的实用类，但在某些情况下，你可能需要编写自定义 CSS。可以通过在项目中添加自定义 CSS 文件，并在 tailwind.config.js 中配置 @layer 来实现。

示例：

/* src/styles.css */ @tailwind base; @tailwind components; @tailwind utilities; /* 自定义组件 */ @layer components {   .btn {     @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;   } }

使用自定义类：

<button class="btn hover:bg-blue-700">点击我</button>

7. 优化生产环境中的 Tailwind CSS

在生产环境中，确保移除未使用的 CSS 类以减小文件体积。Tailwind 默认与 PurgeCSS 集成，只需在 tailwind.config.js 中正确配置 content 路径。

示例：

// tailwind.config.js module.exports = {   content: [     "./src/**/*.{html,js,jsx,ts,tsx,vue}",   ],   theme: {     extend: {},   },   plugins: [], }

然后，在构建过程中，Tailwind 会自动移除未使用的 CSS 类。例如，使用 Tailwind CLI 构建：

npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify

8. 学习资源

9. 常见问题解答

Q1：Tailwind CSS 是否适合大型项目？

A1：是的，Tailwind CSS 通过实用类和高度可定制的配置，非常适合构建大型项目。它允许开发者保持样式一致性，同时避免命名冲突和 CSS 冗余。

Q2：如何在现有项目中引入 Tailwind CSS？

A2：可以通过 npm 安装并配置 Tailwind CSS，或使用 CDN 快速引入。具体步骤取决于项目的构建工具和技术栈。

Q3：Tailwind CSS 是否与 Sass 或 Less 等预处理器兼容？

A3：是的，Tailwind CSS 可以与 Sass、Less 等预处理器结合使用。你可以在 Tailwind 的配置中使用 @apply 指令，将 Tailwind 的实用类应用到自定义的 Sass 类中。

Q4：如何自定义 Tailwind 的主题？

A4：通过编辑 tailwind.config.js 中的 theme 部分，可以自定义颜色、字体、间距等。例如，添加自定义颜色：

// tailwind.config.js module.exports = {   theme: {     extend: {       colors: {         brand: '#1c64f2',       },     },   }, }

然后在 HTML 中使用：

<div class="bg-brand text-white p-4">   自定义颜色背景 </div>

Q5：Tailwind CSS 是否支持暗黑模式？

A5：是的，Tailwind CSS 提供了内置的暗黑模式支持。可以在 tailwind.config.js 中启用：

// tailwind.config.js module.exports = {   darkMode: 'media', // 或 'class'   // ... }

然后在 CSS 中使用 dark: 前缀：

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">   这是一个支持暗黑模式的元素 </div>

10. 小结

Tailwind CSS 通过其实用类和高度可定制的配置，为前端开发提供了灵活、高效的样式解决方案。无论是快速构建原型，还是开发复杂的响应式应用，Tailwind 都能满足需求。通过掌握其基本用法和最佳实践，你可以显著提升开发效率，打造出色的用户界面。

推荐行动：

  1. 实践练习：尝试在一个小型项目中应用 Tailwind CSS，熟悉其类的使用。

  2. 深入学习：阅读官方文档，了解高级特性，如插件、变体等。

  3. 探索社区资源：利用社区提供的组件库和工具，提升开发效率。

希望这份入门指南能帮助你顺利开始使用 Tailwind CSS，打造美观、响应式的现代 Web 应用！


Tailwind CSS 是一种不同于 Bootstrap 和 Element 等框架的 CSS 库，它不提供像 btn 这样的组件样式，而是基于实用工具类（Utility）构建的一整套 CSS。

Tailwind CSS 的理念是为用户提供一套完整的、最小单位的工具类 CSS，设计师可以将这些工具类组合使用。例如，p-4 表示 padding: 1rem，bg-white 表示 background-color: #fff，flex 表示 display: flex。从类名可以直观地看出它们所定义的样式。

要创建一个自定义样式的按钮，需要组合使用多个 Tailwind CSS 的实用工具类。例如，一个带有自定义样式的按钮可能会写成：

<button class="px-4 py-2 m-4 text-bold bg-slate-200 border border-slate-300">Submit</button>

乍一看，这种写法没有 Bootstrap 的 <button class="btn"> 简洁。然而，通过指定的样式名称，很容易看出按钮的样式，并且可以简单直观地进行修改，而无需覆盖 Bootstrap 的预定义样式。

Tailwind CSS 的另一创新是对于 hover:、focus: 等状态类的简便扩展。例如，给按钮添加 hover 状态以改变背景色和边框：

<button class="bg-slate-200 hover:bg-slate-300 border border-slate-300 hover:border-slate-400">Submit</button>

或者，为了在深色模式下自动调整颜色，只需添加 dark: 修饰：

<button class="bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700">Submit</button>

Tailwind CSS 提供的命令行工具会根据 hover:、dark: 等前缀自动生成对应的 CSS 样式，这种方法比 SASS 和 LESS 更简单。

如果页面上有很多按钮需要统一样式，是不需要在每个按钮的 class 中重复一大串样式名的。为了重复使用一组样式，Tailwind 提供了一种简单的自定义方法，例如，可以将上述样式简化为 btn-submit：

<button class="btn-submit">Submit</button>

只需用 @apply 指令告诉 Tailwind CSS：

.btn-submit { @apply bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700; }

实际上，使用 Tailwind CSS 几乎不用手写原生的 Style，例如：

.foo { width: 123px; }

因为就算是 width: 123px 的样式，也可以用 w-[123px] 表示：

<div class="w-[123px] text-center">...</div>

Tailwind CSS 会自动将 w-[123px] 转换为 width: 123px。

理解了 Tailwind CSS 的设计理念以及如何组合和自定义样式后，可以快速定义出符合设计的样式。甚至在浏览器中打开开发者工具，查看 Bootstrap 的按钮样式，可以用 Tailwind CSS 快速复刻相同样式的按钮。

与像 Bootstrap 这样的直接提供组件的 CSS 框架相比，Tailwind CSS 介于组件和原生 CSS 之间，非常适合需要自定义 CSS 并希望展现自有风格的网站。越来越多的前端框架如 Next.js 都推荐使用 Tailwind CSS，它有望成为最流行的 CSS 框架


By 海外杂谈
Updated

By海外杂谈
2025-01-03

开源编辑器推荐：2025年最好用的富文本编辑器大全

作为一名前端开发工程师，富文本编辑器在日常工作中扮演着至关重要的角色，尤其是在构建B端管理系统和内容管理系统（CMS）时，富文本编辑功能是不可或缺的。市面上有许多优秀的富文本编辑器，它们各具特色，既有便于定制化的，也有功能强大的，开发者可以...