CSS 框架通过提供预置组件和样式,改变了开发人员的网络开发方式。然而,许多框架都带有主观设计和臃肿的样式表,从而限制了定制。
尾风 CSS 采用了不同的方法。作为一个实用工具优先的 CSS 框架,它提供了低级实用工具类,允许开发人员构建自定义设计,而不受预定义组件的限制。
目前已有超过 675,375 个网站使用了 Tailwind CSS,依赖库数量超过 861 万个,Tailwind 已不仅仅是另一个 CSS 框架。
在本文中,我们将介绍 Tailwind CSS 的概念、设置过程和实际使用方法,让你无需学习 CSS 即可开始构建漂亮的自定义用户界面。
什么是 Tailwind CSS?
Tailwind CSS 是一个高度可定制的底层 CSS 框架,它提供了一组实用工具类,用于快速构建自定义用户界面。它由 Adam Wathan 于 2017 年首次开发并发布。
从那时起,使用 Tailwind 库构建的网站呈现出上升趋势。
虽然根据 BuiltWith 的图表,目前的增长速度似乎有所放缓,但该框架本身会定期更新,增加新功能、新类等。
根据 BuiltWith 的技术堆栈数据,仅在美国就有超过 10 万个网站使用 Tailwind 构建用户界面,英国、印度尼西亚、德国和其他国家也是该库的前 10 大用户。
Tailwind CSS 背后的核心理念是为开发人员提供一套构建模块,而不是预制组件。这些构建模块是小型、单一用途的实用工具类,它们可以组合起来创建复杂的响应式布局。
这种方法使设计更具灵活性和可控性,你可以定制用户界面的方方面面,而不会受到框架风格的限制。
Tailwind CSS 有何与众不同?
传统上,在使用 CSS 时,开发人员会在单独的样式表中编写自定义类,以便为 HTML 元素设计样式。这种方法会导致大量的 CSS 文件,并使整个项目中样式的维护和更新变得十分困难。
尾风提供了一整套可直接应用于HTML元素的实用工具类。这些类具有很强的可组合性,允许开发人员在不编写一行自定义 CSS 的情况下构建复杂的自定义设计。
例如,您可以使用尾风的预定义类,而无需编写自定义 CSS 类来设计按钮样式:
<button> Button </button>
这种方法有几个好处:
- 开发速度更快:预定义的类可帮助开发人员快速构建和迭代设计,而无需在 HTML 和 CSS 文件之间不断切换。
- 风格一致:Tailwind 提供了一套标准化的类,有助于在整个项目中保持设计的一致性。
- 更小的 CSS 文件:由于样式直接应用于HTML,因此不需要大型的自定义CSS文件。
- 更易于维护:由于样式是在 HTML 中定义的,因此可以更轻松地查看更改对特定元素的影响,而无需查找单独的 CSS 文件。
- 性能更佳:许多现代样式系统(如 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!
恭喜您,您已经建立了第一个 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>© 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>© 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 知识,即可开始创建精美的用户界面!
评论留言