当前位置：首页 > 编程语言 > 正文内容

Tailwind CSS初学者入门指南

a811625532年前 (2024-04-22)编程语言15

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

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

目前已有使用了 Tailwind CSS，数量超过 861 万个，Tailwind 已不仅仅是另一个 CSS 框架。

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

什么是 Tailwind CSS？

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

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

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

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

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

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

Tailwind CSS 有何与众不同？

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

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

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

<button>
Button
</button>

这种 *** 有几个好处：

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

 

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

Tailwind CSS 入门

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

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

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="2345HAO9c5330aeb4f5d4eb 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!

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

Tailwind CSS Utility 类

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

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

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 使用的是移动优先的 *** ，即基础样式适用于所有屏幕尺寸，然后使用响应前缀针对较大的屏幕尺寸：

  • *** ：将样式应用于小屏幕及以上（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',
' *** ': '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 实用工具类直接应用于 *** X 元素：

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 *** :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="2345HAO37a82d50e0970d32 bg-blue-600 py-4 text-white">
<nav class="2345HAO2d50e0970d32e063 container mx-auto flex items-center justify-between">
<a href="#" class="2345HAOe0970d32e0630592 text-2xl font-bold">LearnHub</a>
<ul class="2345HAO0d32e06305922811 flex space-x-4">
<li><a href="#" class="2345HAOe06305922811e7cd hover:text-blue-200">Courses</a></li>
<li><a href="#" class="2345HAO05922811e7cd00c7 hover:text-blue-200">Pricing</a></li>
<li><a href="#" class="2345HAO2811e7cd00c7bc1a hover:text-blue-200">About</a></li>
</ul>
</nav>
</header>
<main class="2345HAOe7cd00c7bc1af37a container mx-auto mt-8">
<section class="2345HAO00c7bc1af37a521f rounded-lg bg-gray-100 p-6">
<h1 class="2345HAObc1af37a521f70a0 mb-4 text-3xl font-bold">Welcome to LearnHub</h1>
<p class="2345HAOf37a521f70a0a24c mb-6 text-gray-700">Discover a world of knowledge with our online courses.</p>
<a href="#" class="2345HAO9c5330aeb4f5d4eb rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Start Learning</a>
</section>
<section class="2345HAO30aeb4f5d4eb37a8 mt-8">
<h2 class="2345HAOb4f5d4eb37a82d50 mb-4 text-2xl font-bold">Featured Courses</h2>
<div class="2345HAOd4eb37a82d50e097 grid grid-cols-1 gap-4  *** :grid-cols-2 lg:grid-cols-3">
<!-- Course cards will go here -->
</div>
</section>
</main>
<footer class="2345HAO37a82d50e0970d32 mt-8 bg-gray-800 py-4 text-white">
<div class="2345HAO2d50e0970d32e063 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 CSS 工具类为我们虚构的在线课程平台创建了一个简单的登陆页面。

小结

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

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

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

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

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

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8240.html

分享给朋友：
返回列表

上一篇：如何使用Docker安装PHP依赖项和扩展

下一篇：将电子表格连接到云数据库的分步教程

“Tailwind CSS初学者入门指南” 的相关文章

PHP 8.1有哪些变化：新特性、改变及弃用等

PHP 8.1有哪些变化：新特性、改变及弃用等

不久前，PHP 8.0大张旗鼓地发布了。它带来了许多新特性、性能增强和变化——其中最令人兴奋的是新的JIT编译器。 技术世界总是在向前发展，PHP也是如此。 ，包含了几个令人兴奋的特性。它定于今年晚些时候于2021年11月25日发布。 在本文中，我们将详细介绍PHP 8.1将带来哪些新的东...

宝塔面板教程之主界面管理篇

宝塔面板教程之主界面管理篇

本章节主要是对宝塔面板的主界面的各个版本进行一个简单的说明。 宝塔面板主界面主要包括：服务器操作系统、服务器状态、站点信息、软件管理及网络流量几个部分。 Windows面板有部分功能未实现，其余部分与Linux面板同步。 系统操作...

静态与动态IP地址有何区别？

静态与动态IP地址有何区别？

每台连接到Internet的计算机都有一个Internet协议 (IP) 地址。但是，并非所有IP地址的外观或行为都相同。 如果您使用计算机网络或服务器，了解动态IP和静态IP之间的区别至关重要。通过详细了解每个协议，您可以选择最适合您需求的解决方案。 在本文中，我们将讨论静态和动态IP之间...

宝塔面板教程之计划任务篇

宝塔面板教程之计划任务篇

宝塔面板的计划任务，主要用于安排和管理需要定时执行的任务，如备份、内存清理等。其实对于大部分站长来说，主要使用该板块的备份网站、备份数据库及释放内存的三个定时任务计划。   Shell脚本的添加 输入任务名称，选择执行周期，输入执行的脚本内容。 注意事项： 输入脚本内容...

2022年Web开发人员的平均工资统计报告

2022年Web开发人员的平均工资统计报告

想成为一名网络开发人员或好奇工作的哪些子类型的薪水最高？Web开发是一个竞争激烈、多样化的行业，随着新语言和框架的出现而不断发展。 询问Web开发人员的薪水是一个难以解决的问题（尽管我们尝试）。有太多的因素需要考虑。 无论您是自由开发者还是有兴趣从事更传统的工作、喜欢前端或后端工作，或者想知...

揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架

揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架

近年来，Web应用程序和网站的开发变得越来越简单。即使是我们当中最受技术挑战的人也已经相当熟练地使用WordPress和Wix等产品。 对于更高级的开发人员，有许多工具可以帮助简化开发过程。这些工具中最有用的工具之一是Laravel。 本文回答了“什么是Laravel？”这个问题。通过将其分...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第469153名访客 今日有23篇新文章/评论