Tailwind CSS
 | |
| 原作者 | Adam Wathan, Steve Schoger |
|---|---|
| 开发者 | Tailwind Labs[1] |
| 当前版本 | 3.4.14[2] （2024年10月15日） |
| 源代码库 | |
| 编程语言 | TypeScript, Rust, CSS[3] |
| 平台 | Node.js |
| 语言 | English |
| 许可协议 | MIT许可证 [4] |
| 网站 | tailwindcss.com |
Tailwind CSS是一个开放原始码CSS框架。这个工具库的主要特点是，Bootstrap5 utilities 概念接近，与jQuery UI等其他 CSS 框架不同，没有为按钮或表格等元素提供一系列预定义类。相对的，会创建一个“工具程式型（Utility）”CSS 类别列表，这些类别可用于通过混搭和媒合来设定每个元素的样式。[5][6]
例如，在其他传统系统中，会有一个message-warning类型并套用黄色背景颜色和粗体文字。要在 Tailwind 中实作如此结果，就必须套用由工具库建立的一组类别：bg-yellow-200font-bold。
特征
由于与 Bootstrap 等预处理CSS概念不同，因此了解 Tailwind 后处理如何建立的理念及其基本用法非常重要。
工具程式类别（Utility Classes）-
工具程式优先概念是指 Tailwind 的主要差异化特征。[7] 而非围绕在组件（按钮、面板、选单、文字框...）类别，而是围绕特定样式元素（黄色、粗体、非常大的文本、中心元素...）类别。这些类别内的每一个都称为工具程式类别。TailwindCSS 中有许多工具程式类别，可以控制大量 CSS 属性，如颜色、边框、显示类型（显示）、字体大小和字体、排版、阴影......
| 结果 | 
| |
|---|---|---|
| 程式码 | <div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
<p>Please be careful when feeding the birds.</p>
</div>
| |
| 类别 | Tailwind | CSS 对应 |
m-4
|
margin: 1rem;
| |
p-4
|
padding: 1rem;
| |
bg-yellow-200
|
background-color: rgba(229, 231, 235, 1);
| |
font-bold
|
font-weight: 700;
| |
rounded-lg
|
border-radius: 0.5rem;
| |
变数
Tailwind 提供了仅在某些情况下通过媒体查询（Media Query）工具程式类别的可能性，这称为变数。变数的主要用途是为各种萤幕尺寸设计响应式使用者界面。[8] 元素可以具有的不同状态也有变数，例如滑鼠悬停时hover:，键盘选择时focus:或按下滑鼠时active:，[9] 或者当浏览器或作业系统开启了暗模式（dark mode）时。[10]
变数有两个部分：要满足的条件和满足条件时套用的类型。例如，如果萤幕尺寸大于为 md定义的值，则使用变数 md:bg-yellow-400 将会应用类别 bg-yellow-400。
Tailwind CSS 使用 JavaScript 开发，通过 Node.js 执行，使用环境包装管理工具（如 npm 或 yarn）安装。[3]
设定和布景
可以通过名为 tailwind.config.js的设定档案设定 Tailwind 提供的工具程式类别和变数。在设定中，您可以设定工具程式类别的值，例如调色板或边距元素之间的大小。
全部建置与消除
Tailwind 的预设模式是系统根据专案设定产生所有可能的 CSS 组合。然后，通过另一个工具程式（如 PurgeCSS），走访所有档案，并从产生的 CSS 档案中删除未使用的类别。由于变数的数量与其组合可以产生的类别的数量，这种方法的缺点是等待时间长，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。[11]
即时编译（JIT）
即时编译模式 (Just-In-Time) 是产生 CSS 的另一种方法，此方法并不是生成所有可能的类别，再删除所有未使用的类别，而是解析 HTML 文件的内容（或设定的副档名或路径位置）和立即只产生那些所需要使用的类别。因为不再产生所有可能的变数，因而大幅减少了产生的 CSS 的等待时间和大小。这种技术改良使得引入许多新的变数和工具程式类别成为可能，以及使用未在设定中设定的任意值动态建立工具程式类别的能力。
从 Tailwind CSS 版本 3 开始，即时编译模式将成为预设模式。[11]
版本
Tailwind CSS 使用语义版本控制来识别其版本兼容性。
著名使用
参见
外部链接
- Official Tailwind Documentation （页面存档备份，存于互联网档案馆）.
- Tailwind Play （页面存档备份，存于互联网档案馆）, real-time testing environment.
参考文献
- ^ Tailwind Labs. [2022-08-31]. （原始内容存档于2022-09-01）.
- ^ Release 3.4.14. 2024年10月15日 [2024年10月27日].
- ^ 3.0 3.1 Installation - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）.
- ^ Github: tailwindlabs/tailwindcss, LICENSE. [2022-08-31]. （原始内容存档于2021-10-20）.
- ^ Gerchev, Ivaylo. Tailwind CSS. Sebastopol: O'Reilly Media. 2022. ISBN 1-0981-4099-0. OCLC 1314257318.
- ^ Rappin, Noel. Modern CSS with Tailwind flexible styling without the fuss. Raleigh. 2021. ISBN 978-1-68050-857-4. OCLC 1277046918.
- ^ Utility-First - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）.
- ^ Responsive Design - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）.
- ^ Hover, Focus, & Other States - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）.
- ^ Dark Mode - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-03） （英语）.
- ^ 11.0 11.1 Release v3.0.0-alpha.1 tailwindlabs/tailwindcss. GitHub. [2021-11-13]. （原始内容存档于2022-08-24） （英语）.
- ^ GitHub Copilot · Your AI pair programmer. GitHub Copilot. [2021-10-18]. （原始内容存档于2022-04-23） （英语）.
- ^ Firefox Accounts. accounts.firefox.com. [2021-10-18]. （原始内容存档于2022-09-08）.
- ^ From semantic CSS to Tailwind - Refactoring the Netlify UI codebase. Netlify. [2021-10-28]. （原始内容存档于2022-03-01） （英语）.
- ^ The official site of the NBA for the latest NBA Scores, Stats & News. | NBA.com. www.nba.com. [2021-10-18]. （原始内容存档于2020-12-08） （英语）.
- ^ NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration. NASA Jet Propulsion Laboratory (JPL). [2021-10-18]. （原始内容存档于2011-02-24） （英语）.
- ^ Netflix Top 10 - Global. top10.netflix.com. [2021-11-21]. （原始内容存档于2021-11-16） （英语）.