维基百科

Tailwind CSS

Tailwind CSS是一个开放源代码CSS框架。这个工具库的主要特点是，Bootstrap5 utilities 概念接近，与jQuery UI等其他 CSS 框架不同，没有为按钮或表格等元素提供一系列预定义类。相对的，会创建一个“工具程式型（Utility）”CSS 类别列表，这些类别可用于通过混搭和媒合来设定每个元素的样式。[4][5]

Tailwind CSS
原作者Adam Wathan, Steve Schoger
开发者Tailwind Labs[1]
当前版本
  • 3.4.3 (2024年3月27日；稳定版本)[2]
编辑维基数据链接
源代码库
编辑维基数据链接
编程语言JavaScript
平台Node.js
语言English
许可协议MIT许可证 [3]
网站tailwindcss.com

例如，在其他传统系统中，会有一个message-warning类型并套用黄色背景颜色和粗体文字。要在 Tailwind 中实作如此结果，就必须套用由工具库建立的一组类别：bg-yellow-200font-bold。

特征

编辑

由于与 Bootstrap 等预处理CSS概念不同，因此了解 Tailwind 后处理如何建立的理念及其基本用法非常重要。

工具程式类别（Utility Classes）-

编辑

工具程式优先概念是指 Tailwind 的主要差异化特征。[6] 而非围绕在组件（按钮、面板、选单、文字框...）类别，而是围绕特定样式元素（黄色、粗体、非常大的文本、中心元素...）类别。这些类别内的每一个都称为工具程式类别。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）工具程式类别的可能性，这称为变数。变数的主要用途是为各种萤幕尺寸设计响应式使用者界面。[7] 元素可以具有的不同状态也有变数，例如鼠标悬停时hover:，键盘选择时focus:或按下鼠标时active:，[8] 或者当浏览器或操作系统开启了暗模式（dark mode）时。[9]

变数有两个部分：要满足的条件和满足条件时套用的类型。例如，如果萤幕尺寸大于为 md定义的值，则使用变数 md:bg-yellow-400 将会应用类别 bg-yellow-400。

Tailwind CSS 使用 JavaScript 开发，通过 Node.js 执行，使用环境包装管理工具（如 npm 或 yarn）安装。[10]

设定和布景

编辑

可以通过名为 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 使用语义版本控制来识别其版本兼容性。

著名使用

编辑

参见

编辑

外部链接

编辑

参考文献

编辑
  1. ^ Tailwind Labs. [2022-08-31]. （原始内容存档于2022-09-01）. 
  2. ^ 2.0 2.1 Release 3.4.3. 2024年3月27日 [2024年4月20日]. 
  3. ^ Github: tailwindlabs/tailwindcss, LICENSE. [2022-08-31]. （原始内容存档于2021-10-20）. 
  4. ^ Gerchev, Ivaylo. Tailwind CSS. Sebastopol: O'Reilly Media. 2022. ISBN 1-0981-4099-0. OCLC 1314257318. 
  5. ^ Rappin, Noel. Modern CSS with Tailwind flexible styling without the fuss. Raleigh. 2021. ISBN 978-1-68050-857-4. OCLC 1277046918. 
  6. ^ Utility-First - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）. 
  7. ^ Responsive Design - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）. 
  8. ^ Hover, Focus, & Other States - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）. 
  9. ^ Dark Mode - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-03） （英语）. 
  10. ^ Installation - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始内容存档于2022-09-09） （英语）. 
  11. ^ 11.0 11.1 Release v3.0.0-alpha.1 tailwindlabs/tailwindcss. GitHub. [2021-11-13]. （原始内容存档于2022-08-24） （英语）. 
  12. ^ GitHub Copilot · Your AI pair programmer. GitHub Copilot. [2021-10-18]. （原始内容存档于2022-04-23） （英语）. 
  13. ^ Firefox Accounts. accounts.firefox.com. [2021-10-18]. （原始内容存档于2022-09-08）. 
  14. ^ From semantic CSS to Tailwind - Refactoring the Netlify UI codebase. Netlify. [2021-10-28]. （原始内容存档于2022-03-01） （英语）. 
  15. ^ The official site of the NBA for the latest NBA Scores, Stats & News. | NBA.com. www.nba.com. [2021-10-18]. （原始内容存档于2020-12-08） （英语）. 
  16. ^ NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration. NASA Jet Propulsion Laboratory (JPL). [2021-10-18]. （原始内容存档于2011-02-24） （英语）. 
  17. ^ Netflix Top 10 - Global. top10.netflix.com. [2021-11-21]. （原始内容存档于2021-11-16） （英语）. 
取自“https://zh.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=78051543”