注册
> 资源中心>博客资讯>编程开发

Tailwind CSS初学者入门指南

WBOLT_COM 4 月 22, 2024 51 0

Tailwind CSS 初学者入门指南

CSS 框架通过提供预置组件和样式，改变了开发人员的网络开发方式。然而，许多框架都带有主观设计和臃肿的样式表，从而限制了定制。

尾风 CSS 采用了不同的方法。作为一个实用工具优先的 CSS 框架，它提供了低级实用工具类，允许开发人员构建自定义设计，而不受预定义组件的限制。

目前已有超过 675,375 个网站使用了 Tailwind CSS，依赖库数量超过 861 万个，Tailwind 已不仅仅是另一个 CSS 框架。

在本文中，我们将介绍 Tailwind CSS 的概念、设置过程和实际使用方法，让你无需学习 CSS 即可开始构建漂亮的自定义用户界面。

什么是 Tailwind CSS？

Tailwind CSS 是一个高度可定制的底层 CSS 框架，它提供了一组实用工具类，用于快速构建自定义用户界面。它由 Adam Wathan 于 2017 年首次开发并发布。

从那时起，使用 Tailwind 库构建的网站呈现出上升趋势。

Tailwind 网站使用量统计

虽然根据 BuiltWith 的图表，目前的增长速度似乎有所放缓，但该框架本身会定期更新，增加新功能、新类等。

根据 BuiltWith 的技术堆栈数据，仅在美国就有超过 10 万个网站使用 Tailwind 构建用户界面，英国、印度尼西亚、德国和其他国家也是该库的前 10 大用户。

用Tailwind技术的前 10 个国家

Tailwind CSS 背后的核心理念是为开发人员提供一套构建模块，而不是预制组件。这些构建模块是小型、单一用途的实用工具类，它们可以组合起来创建复杂的响应式布局。

这种方法使设计更具灵活性和可控性，你可以定制用户界面的方方面面，而不会受到框架风格的限制。

Tailwind CSS 有何与众不同？

传统上，在使用 CSS 时，开发人员会在单独的样式表中编写自定义类，以便为 HTML 元素设计样式。这种方法会导致大量的 CSS 文件，并使整个项目中样式的维护和更新变得十分困难。

尾风提供了一整套可直接应用于HTML元素的实用工具类。这些类具有很强的可组合性，允许开发人员在不编写一行自定义 CSS 的情况下构建复杂的自定义设计。

例如，您可以使用尾风的预定义类，而无需编写自定义 CSS 类来设计按钮样式：

<button>
Button
</button>

这种方法有几个好处：

  1. 开发速度更快：预定义的类可帮助开发人员快速构建和迭代设计，而无需在 HTML 和 CSS 文件之间不断切换。
  2. 风格一致：Tailwind 提供了一套标准化的类，有助于在整个项目中保持设计的一致性。
  3. 更小的 CSS 文件：由于样式直接应用于HTML，因此不需要大型的自定义CSS文件。
  4. 更易于维护：由于样式是在 HTML 中定义的，因此可以更轻松地查看更改对特定元素的影响，而无需查找单独的 CSS 文件。
  5. 性能更佳：许多现代样式系统（如 Emotion 或 Styled Components）都依赖于 javascript（通常在运行时，性能较慢）来呈现 CSS。Tailwind 最终只是一个 CSS。

 

Tailwind 把我变成了一个完整的堆栈开发者 🤝 — Boris Lepikhin

Tailwind CSS 入门

在开始举例之前，让我们先用 Tailwind CSS 建立一个基本项目。我们假设你对 HTML 和 CSS 有一定的了解。此外，你还需要在系统中安装 npm。完成后，就可以开始了！

为你的项目创建一个新目录，并导航进入：

mkdir my-tailwind-project
cd my-tailwind-project

初始化一个新的 npm 项目并安装 Tailwind CSS：

npm init -y
npm install -D tailwindcss

创建 tailwind.config.js 文件：

npx tailwindcss init

创建 input.css 文件并添加以下内容：

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

更新 tailwind.config.js 文件，以处理输入的 css：

module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}

在 src 目录中创建一个 index.html 文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-center mt-4">Welcome to Tailwind CSS!</h1>
</body>
</html>

创建 CSS：

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

现在，当你在浏览器中打开 index.html 时，你应该会看到一个粗体的大标题，上面写着 Welcome to Tailwind CSS!

Welcome to Tailwind CSS!

恭喜您，您已经建立了第一个 Tailwind 项目！

Tailwind CSS Utility 类

Tailwind CSS 提供了大量实用类，涵盖了样式设计的各个方面，如布局、间距、排版、颜色等。这些类遵循的命名规则可以让你直观地了解它们的用途。

让我们来探讨一下 Tailwind CSS 中的一些常用实用类。

Tailwind 布局类

  • flex：应用弹性容器。
  • grid：应用网格容器。
  • block：将元素显示为块级元素。
  • inline：将元素显示为内联级元素。

举例说明：

<div>
<div>Item 1</div>
<div>Item 2</div>
</div>

Tailwind 间距类

  • m-{size}：在所有边上应用页边距。
  • p-{size}：在所有边上应用 padding。
  • mx-{size}：在左右两侧应用页边距。
  • py-{size}：在顶部和底部应用填充。

举例说明：

<div>
Content with margin and padding
</div>

Tailwind 排版类

  • text-{size}：设置字体大小。
  • font-{weight}：设置字体重量。
  • text-{color}：设置文字颜色。
  • uppercase, lowercase, capitalize：转换文本大小写。

举例说明：

<p>
Styled text
</p>

Tailwind Colors

Tailwind CSS 提供了可自定义的默认调色板。颜色由颜色名称和阴影组合而成。

  • bg-{color}-{shade}：设置背景颜色。
  • text-{color}-{shade}：设置文本颜色。
  • border-{color}-{shade}：设置边框颜色。

举例说明：

<button>
Button
</button>

用于响应式设计的 Tailwind 类

Tailwind 通过为大多数实用工具类提供响应式变体，使创建响应式设计变得更加容易。这些变体允许您为不同的屏幕尺寸指定不同的样式。

Tailwind 使用的是移动优先的方法，即基础样式适用于所有屏幕尺寸，然后使用响应前缀针对较大的屏幕尺寸：

  • sm：将样式应用于小屏幕及以上（640px 及以上）。
  • md：将样式应用于中型及以上屏幕（768px 及以上）。
  • lg：将样式应用于大屏幕及以上（1024px 及以上）。
  • xl：将样式应用于超大屏幕及以上（1280px 及以上）。
  • 2xl：将样式应用于超大屏幕及以上（1536px 及以上）。

要使用这些响应式变体，只需在实用工具类前缀上所需的屏幕尺寸即可：

<div>
<!-- Content -->
</div>

在本例中，div 在小屏幕上的背景为蓝色，在中屏幕上的背景为绿色，在大屏幕上的背景为红色。

您还可以使用响应式变体来控制元素的布局：

<div>
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>

在这里，小屏幕上的列将垂直堆叠，中屏幕上显示为两列，大屏幕上显示为三列。

自定义 Tailwind CSS 的默认类

定制选项是 Tailwind CSS 的优势之一。你可以根据项目的设计要求，轻松定制默认配置。您可以通过 tailwind.config.js 文件扩展或覆盖默认设置。

以下是一些常见的自定义选项。您完全可以自定义 Tailwind 的每个部分，因此这并不是一个详尽的列表。

颜色

Tailwind CSS开箱即提供了丰富的调色板，但您也可以根据项目的品牌或设计要求进行轻松定制。通过 tailwind.config.js 文件，您可以扩展或覆盖默认调色板。要添加自定义颜色，可以使用 colors 对象中的 extend 属性：

// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#ff5a5f',
'brand-secondary': '#484848',
'brand-accent': '#ffcc00',
},
},
},
}

在本例中，我们添加了三种自定义颜色：品牌主色、品牌次色和品牌中心色。

这些颜色现在可以与 bg-brand-primary、text-brand-secondary、border-brand-accent 等实用工具类一起使用。您还可以修改现有色调，或在默认调色板中添加新的色调：

// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
blue: {
'100': '#e6f0ff',
'200': '#c3d9ff',
'300': '#a1c2ff',
'400': '#7eabff',
… and so on …
},
},
},
},
}

Font Family

Tailwind CSS 使用默认的字体家族堆栈，但与颜色类似，您可以更改这些默认值，以匹配您项目的排版风格。

您可以在 tailwind.config.js 文件中扩展或替换默认的 Font Family。要添加自定义 Font Family，请使用 fontFamily 对象中的 extend 属性：

// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
serif: ['Merriweather', 'serif'],
mono: ['Fira Code', 'monospace'],
},
},
},
}

您也可以省略 extend 属性，完全替换默认 Font Family：

// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'body': ['Open Sans', 'sans-serif'],
'heading': ['Montserrat', 'sans-serif'],
},
},
}

响应式断点

Tailwind CSS提供了开箱即用的响应式设计系统，但您还可以对其进行进一步定制，以满足您项目的特定断点和响应式要求。

通过修改 tailwind.config.js 文件中的 screens 对象，你可以定义自定义断点，并根据屏幕尺寸应用不同的样式。

例如，假设您在 1440px 处有一个独特的断点，您希望在该断点应用特定的样式：

// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1440px',
},
},
}

定义了自定义断点后，您就可以使用xl:text-lg、xl:flex、xl:w-1/2 等响应式实用工具类，为宽于 1440px 的屏幕专门应用样式。

间距

Tailwind CSS为 margins、paddings 和其他与间距相关的实用工具提供了一套全面的间距值。您可以自定义这些值，以满足项目的布局要求。要添加自定义间距值，请使用间距对象中的扩展属性：

// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'13': '3.25rem',
'15': '3.75rem',
'128': '32rem',
'144': '36rem',
},
},
},
}

集成第三方库

Tailwind CSS 可与 React、Vue 和 Angular 等流行的前端库和框架集成。在使用这些库时，您可以利用 Tailwind 的实用工具类来设计您的组件，以创建一致且可维护的用户界面。例如，在 React 组件中，您可以将 Tailwind 实用工具类直接应用于 JSX 元素：

import React from 'react';
const Card = () => {
return (
<div className="bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold mb-4">Card Title</h2>
<p className="text-gray-600">Card content goes here...</p>
</div>
);
};
export default Card;

这种多框架方法可以让您轻松汇集所有领域的精华，帮助您创建一个精美的应用程序，几乎不费吹灰之力。

使用 Tailwind CSS 创建一个简单的应用程序

假设你正在为一个名为 LearnHub 的虚构在线课程平台创建一个简单的登陆页面，并使用 Tailwind 为整个页面设计样式。

第 1 步：设置 HTML 结构

首先，让我们为登陆页面创建基本的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
<title>LearnHub - Online Course Platform</title>
</head>
<body>
<header>
<!-- Navigation menu will go here -->
</header>
<main>
<!-- Main content will go here -->
</main>
<footer>
<!-- Footer content will go here -->
</footer>
</body>
</html>

在这一步中，我们建立了 HTML 文档的基本结构。我们在 <head> 部分加入了必要的元标记，并链接到 CSS 文件(output.css)。在<body> 中，我们有<header>、<main> 和 <footer> 部分，我们将在其中添加内容。

第 2 步：创建导航菜单

现在，让我们使用 Tailwind CSS 工具类在 <header> 部分添加一个简单的导航菜单：

<header>
<nav>
<a href="#">LearnHub</a>
<ul>
<li><a href="#">Courses</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>

创建导航菜单

以下是每个类的作用：

  • bg-blue-600：将标题的背景颜色设置为蓝色。
  • text-white：将文字颜色设为白色。
  • py-4：为页眉的顶部和底部添加填充。
  • 容器 mx-auto：使导航菜单水平居中。
  • flexjust-between-items-center：使用 flexbox 均衡徽标和菜单项的间距，并使其垂直对齐。
  • text-2xl font-bold：使徽标文字变大并加粗。
  • flex space-x-4：使用 flexbox 在菜单项之间添加间距。
  • hover:text-blue-200：当鼠标悬停在菜单项上时，将文字颜色更改为浅蓝色。

第 3 步：添加主要内容

让我们在着陆页的 <main> 部分添加一些内容：

<main>
<section>
<h1>Welcome to LearnHub</h1>
<p>Discover a world of knowledge with our online courses.</p>
<a href="#">Start Learning</a>
</section>
<section>
<h2>Featured Courses</h2>
<div>
<!-- Course cards will go here -->
</div>
</section>
</main>

以下是每个类的作用：

  • container mx-auto：使主要内容水平居中。
  • mt-8：为主内容顶部添加边距。
  • bg-gray-100 rounded-lg p-6：为欢迎部分添加浅灰色背景、圆角和填充。
  • text-3xl font-bold mb-4：将标题文字放大、加粗，并在底部添加边距。
  • text-gray-700 MB-6：将文字颜色设置为深灰色，并在段落底部添加页边距。
  • bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700：将 “Start Learning” 按钮样式设置为蓝色背景、白色文本、衬垫、圆角，并在悬停时设置为深蓝色背景。
  • text-2xl font-bold mb-4：将 “Featured Courses” 标题放大、加粗，并在底部添加边距。
  • grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4：为课程卡片创建响应式网格布局。在小屏幕上显示一列，在中屏幕上显示两列，在大屏幕上显示三列，卡片之间留有间隙。

将标题和主代码放在一起，应该会有如下输出：

添加主要内容

第 4 步：添加页脚

最后，为我们的着陆页添加一个简单的页脚：

<footer>
<div>
<p>&copy; 2023 LearnHub. All rights reserved.</p>
</div>
</footer>

以下是每个类的作用：

  • bg-gray-800 text-white：将页脚的背景颜色设为深灰色，文字颜色设为白色。
  • py-4：为页脚顶部和底部添加填充。
  • mt-8：为页脚顶部添加边距。
  • container mx-auto：使页脚内容水平居中。
  • text-center：使页脚文本居中。

将所有内容放在一起

下面是最终的代码组合：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="output.css" rel="stylesheet" />
<title>LearnHub - Online Course Platform</title>
</head>
<body>
<header class="bg-blue-600 py-4 text-white">
<nav class="container mx-auto flex items-center justify-between">
<a href="#" class="text-2xl font-bold">LearnHub</a>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-200">Courses</a></li>
<li><a href="#" class="hover:text-blue-200">Pricing</a></li>
<li><a href="#" class="hover:text-blue-200">About</a></li>
</ul>
</nav>
</header>
<main class="container mx-auto mt-8">
<section class="rounded-lg bg-gray-100 p-6">
<h1 class="mb-4 text-3xl font-bold">Welcome to LearnHub</h1>
<p class="mb-6 text-gray-700">Discover a world of knowledge with our online courses.</p>
<a href="#" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Start Learning</a>
</section>
<section class="mt-8">
<h2 class="mb-4 text-2xl font-bold">Featured Courses</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Course cards will go here -->
</div>
</section>
</main>
<footer class="mt-8 bg-gray-800 py-4 text-white">
<div class="container mx-auto text-center">
<p>&copy; 2023 LearnHub. All rights reserved.</p>
</div>
</footer>
</body>
</html>

要向用户显示输出结果，您需要在项目中正确设置 Tailwind CSS。请确保您已经按照前面提到的安装步骤进行了设置，包括创建 tailwind.config.js 文件和使用 Tailwind 处理 CSS。

设置好 Tailwind CSS 后，就可以将代码保存到 HTML 文件（如index.html）中，并在网络浏览器中打开。浏览器将呈现使用 Tailwind CSS 实用工具类应用样式的登陆页面。如果你只是想测试一下 Tailwind，你可以使用 Tailwind 的小工具–Tailwind Play，在这里你可以玩转不同的类。

添加页脚

就是这样！我们使用 Tailwind CSS 工具类为我们虚构的在线课程平台创建了一个简单的登陆页面。

小结

既然你已经见识到了 Tailwind CSS 的强大功能和灵活性，你就会知道这里有无限的可能性。从简单的登陆页面到复杂的网络应用程序，它的灵活和可定制特性都能帮助你构建出简洁一致的设计。

以下是一些让你开始使用的想法：

  • 建立一个作品集网站：用令人惊叹的作品集展示你的技能和项目。
  • 创建博客：使用 Tailwind 设计的美观实用的博客，与世界分享您的想法和创意。
  • 开发网络应用程序：Tailwind CSS 是为各种网络应用程序构建用户界面的完美工具。

无论您创建什么网站，Tailwind CSS 都能帮助您创建一个令人惊叹且功能完善的网站。

只需掌握最基本的 CSS 知识，即可开始创建精美的用户界面！

评论收藏微海报
分享
分享到

相关推荐

评论留言

热门主题

热门插件

  • 什么是 Tailwind CSS？
  • Tailwind CSS 有何与众不同？
  • Tailwind CSS 入门
  • Tailwind CSS Utility 类
  • Tailwind 布局类
  • Tailwind 间距类
  • Tailwind 排版类
  • Tailwind Colors
  • 用于响应式设计的 Tailwind 类
  • 自定义 Tailwind CSS 的默认类
  • 颜色
  • Font Family
  • 响应式断点
  • 间距
  • 集成第三方库
  • 使用 Tailwind CSS 创建一个简单的应用程序
  • 第 1 步：设置 HTML 结构
  • 第 2 步：创建导航菜单
  • 第 3 步：添加主要内容
  • 第 4 步：添加页脚
  • 将所有内容放在一起
  • 小结