Tailwind CSS |
| 原作者 | Adam Wathan, Steve Schoger |
|---|
| 开发者 | Tailwind Labs |
|---|
| 当前版本 |
|
|---|
| 源代码库 | - github.com/tailwindlabs/tailwindcss
|
|---|
| 编程语言 | Javascript |
|---|
| 平台 | Node.js |
|---|
| 语言 | English |
|---|
| 许可协议 | MIT许可证 |
|---|
| 网站 | tailwindcss.com |
|---|
Tailwind CSS是一个开放源代码CSS框架。这个工具库的主要特点是，Bootstrap5 utilities 概念接近，与jQuery UI等其他 CSS 框架不同，没有为按钮或表格等元素提供一系列预定义类。相对的，会创建一个“工具程式型（Utility）”CSS 类别列表，这些类别可用于通过混搭和媒合来设定每个元素的样式。
例如，在其他传统系统中，会有一个message-warning类型并套用黄色背景颜色和粗体文字。要在 Tailwind 中实作如此结果，就必须套用由工具库建立的一组类别：bg-yellow-200font-bold。
特征
由于与 Bootstrap 等预处理CSS概念不同，因此了解 Tailwind 后处理如何建立的理念及其基本用法非常重要。
工具程式类别（Utility Classes）-
工具程式优先概念是指 Tailwind 的主要差异化特征。 而非围绕在组件（按钮、面板、选单、文字框...）类别，而是围绕特定样式元素（黄色、粗体、非常大的文本、中心元素...）类别。这些类别内的每一个都称为工具程式类别。TailwindCSS 中有许多工具程式类别，可以控制大量 CSS 属性，如颜色、边框、显示类型（显示）、字体大小和字体、排版、阴影......
示例：黄色告示
| 结果
|
Tailwind 提供了仅在某些情况下通过媒体查询（Media Query）工具程式类别的可能性，这称为变数。变数的主要用途是为各种萤幕尺寸设计响应式使用者界面。 元素可以具有的不同状态也有变数，例如鼠标悬停时hover:，键盘选择时focus:或按下鼠标时active:， 或者当浏览器或操作系统开启了暗模式（dark mode）时。
变数有两个部分：要满足的条件和满足条件时套用的类型。例如，如果萤幕尺寸大于为 md定义的值，则使用变数 md:bg-yellow-400 将会应用类别 bg-yellow-400。
Tailwind CSS 使用 Javascript 开发，通过 Node.js 执行，使用环境包装管理工具（如 npm 或 yarn）安装。
设定和布景
可以通过名为 tailwind.config.js的设定档案设定 Tailwind 提供的工具程式类别和变数。在设定中，您可以设定工具程式类别的值，例如调色板或边距元素之间的大小。
全部建置与消除
Tailwind 的预设模式是系统根据专案设定产生所有可能的 CSS 组合。然后，通过另一个工具程式（如 PurgeCSS），走访所有档案，并从产生的 CSS 档案中删除未使用的类别。由于变数的数量与其组合可以产生的类别的数量，这种方法的缺点是等待时间长，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。
即时编译（JIT）
即时编译模式 (Just-In-Time) 是产生 CSS 的另一种方法，此方法并不是生成所有可能的类别，再删除所有未使用的类别，而是解析 HTML 文件的内容（或设定的副档名或路径位置）和立即只产生那些所需要使用的类别。因为不再产生所有可能的变数，因而大幅减少了产生的 CSS 的等待时间和大小。这种技术改良使得引入许多新的变数和工具程式类别成为可能，以及使用未在设定中设定的任意值动态建立工具程式类别的能力。
从 Tailwind CSS 版本 3 开始，即时编译模式将成为预设模式。
版本
Tailwind CSS 使用语义版本控制来识别其版本兼容性。
著名使用
- GitHub
- Firefox
- Netlify
- NBA
- NASA
- Netflix
Tailwind CSS | | 原作者 | Adam Wathan, Steve Schoger |
|---|
| 开发者 | Tailwind Labs |
|---|
| 当前版本 |
|
|---|
| 源代码库 | - github.com/tailwindlabs/tailwindcss
|
|---|
| 编程语言 | Javascript |
|---|
| 平台 | Node.js |
|---|
| 语言 | English |
|---|
| 许可协议 | MIT许可证 |
|---|
| 网站 | tailwindcss.com |
|---|
Tailwind CSS是一个开放源代码CSS框架。这个工具库的主要特点是，Bootstrap5 utilities 概念接近，与jQuery UI等其他 CSS 框架不同，没有为按钮或表格等元素提供一系列预定义类。相对的，会创建一个“工具程式型（Utility）”CSS 类别列表，这些类别可用于通过混搭和媒合来设定每个元素的样式。
例如，在其他传统系统中，会有一个message-warning类型并套用黄色背景颜色和粗体文字。要在 Tailwind 中实作如此结果，就必须套用由工具库建立的一组类别：bg-yellow-200font-bold。
特征
由于与 Bootstrap 等预处理CSS概念不同，因此了解 Tailwind 后处理如何建立的理念及其基本用法非常重要。
工具程式类别（Utility Classes）-
工具程式优先概念是指 Tailwind 的主要差异化特征。 而非围绕在组件（按钮、面板、选单、文字框...）类别，而是围绕特定样式元素（黄色、粗体、非常大的文本、中心元素...）类别。这些类别内的每一个都称为工具程式类别。TailwindCSS 中有许多工具程式类别，可以控制大量 CSS 属性，如颜色、边框、显示类型（显示）、字体大小和字体、排版、阴影......
示例：黄色告示
| 结果
|
Tailwind 提供了仅在某些情况下通过媒体查询（Media Query）工具程式类别的可能性，这称为变数。变数的主要用途是为各种萤幕尺寸设计响应式使用者界面。 元素可以具有的不同状态也有变数，例如鼠标悬停时hover:，键盘选择时focus:或按下鼠标时active:， 或者当浏览器或操作系统开启了暗模式（dark mode）时。
变数有两个部分：要满足的条件和满足条件时套用的类型。例如，如果萤幕尺寸大于为 md定义的值，则使用变数 md:bg-yellow-400 将会应用类别 bg-yellow-400。
Tailwind CSS 使用 Javascript 开发，通过 Node.js 执行，使用环境包装管理工具（如 npm 或 yarn）安装。
设定和布景
可以通过名为 tailwind.config.js的设定档案设定 Tailwind 提供的工具程式类别和变数。在设定中，您可以设定工具程式类别的值，例如调色板或边距元素之间的大小。
全部建置与消除
Tailwind 的预设模式是系统根据专案设定产生所有可能的 CSS 组合。然后，通过另一个工具程式（如 PurgeCSS），走访所有档案，并从产生的 CSS 档案中删除未使用的类别。由于变数的数量与其组合可以产生的类别的数量，这种方法的缺点是等待时间长，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。
即时编译（JIT）
即时编译模式 (Just-In-Time) 是产生 CSS 的另一种方法，此方法并不是生成所有可能的类别，再删除所有未使用的类别，而是解析 HTML 文件的内容（或设定的副档名或路径位置）和立即只产生那些所需要使用的类别。因为不再产生所有可能的变数，因而大幅减少了产生的 CSS 的等待时间和大小。这种技术改良使得引入许多新的变数和工具程式类别成为可能，以及使用未在设定中设定的任意值动态建立工具程式类别的能力。
从 Tailwind CSS 版本 3 开始，即时编译模式将成为预设模式。
版本
Tailwind CSS 使用语义版本控制来识别其版本兼容性。
著名使用
- GitHub
- Firefox
- Netlify
- NBA
- NASA
- Netflix
参见
外部链接
- Official Tailwind newlineation （页面存档备份，存于互联网档案馆）.
- Tailwind Play （页面存档备份，存于互联网档案馆）, real-time testing environment.
Tailwind CSS | | 原作者 | Adam Wathan, Steve Schoger |
|---|
| 开发者 | Tailwind Labs |
|---|
| 当前版本 |
|
|---|
| 源代码库 | - github.com/tailwindlabs/tailwindcss
|
|---|
| 编程语言 | Javascript |
|---|
| 平台 | Node.js |
|---|
| 语言 | English |
|---|
| 许可协议 | MIT许可证 |
|---|
| 网站 | tailwindcss.com |
|---|
Tailwind CSS是一个开放源代码CSS框架。这个工具库的主要特点是，Bootstrap5 utilities 概念接近，与jQuery UI等其他 CSS 框架不同，没有为按钮或表格等元素提供一系列预定义类。相对的，会创建一个“工具程式型（Utility）”CSS 类别列表，这些类别可用于通过混搭和媒合来设定每个元素的样式。
例如，在其他传统系统中，会有一个message-warning类型并套用黄色背景颜色和粗体文字。要在 Tailwind 中实作如此结果，就必须套用由工具库建立的一组类别：bg-yellow-200font-bold。
特征
由于与 Bootstrap 等预处理CSS概念不同，因此了解 Tailwind 后处理如何建立的理念及其基本用法非常重要。
工具程式类别（Utility Classes）-
工具程式优先概念是指 Tailwind 的主要差异化特征。 而非围绕在组件（按钮、面板、选单、文字框...）类别，而是围绕特定样式元素（黄色、粗体、非常大的文本、中心元素...）类别。这些类别内的每一个都称为工具程式类别。TailwindCSS 中有许多工具程式类别，可以控制大量 CSS 属性，如颜色、边框、显示类型（显示）、字体大小和字体、排版、阴影......
示例：黄色告示
| 结果
|
Tailwind 提供了仅在某些情况下通过媒体查询（Media Query）工具程式类别的可能性，这称为变数。变数的主要用途是为各种萤幕尺寸设计响应式使用者界面。 元素可以具有的不同状态也有变数，例如鼠标悬停时hover:，键盘选择时focus:或按下鼠标时active:， 或者当浏览器或操作系统开启了暗模式（dark mode）时。
变数有两个部分：要满足的条件和满足条件时套用的类型。例如，如果萤幕尺寸大于为 md定义的值，则使用变数 md:bg-yellow-400 将会应用类别 bg-yellow-400。
Tailwind CSS 使用 Javascript 开发，通过 Node.js 执行，使用环境包装管理工具（如 npm 或 yarn）安装。
设定和布景
可以通过名为 tailwind.config.js的设定档案设定 Tailwind 提供的工具程式类别和变数。在设定中，您可以设定工具程式类别的值，例如调色板或边距元素之间的大小。
全部建置与消除
Tailwind 的预设模式是系统根据专案设定产生所有可能的 CSS 组合。然后，通过另一个工具程式（如 PurgeCSS），走访所有档案，并从产生的 CSS 档案中删除未使用的类别。由于变数的数量与其组合可以产生的类别的数量，这种方法的缺点是等待时间长，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。
即时编译（JIT）
即时编译模式 (Just-In-Time) 是产生 CSS 的另一种方法，此方法并不是生成所有可能的类别，再删除所有未使用的类别，而是解析 HTML 文件的内容（或设定的副档名或路径位置）和立即只产生那些所需要使用的类别。因为不再产生所有可能的变数，因而大幅减少了产生的 CSS 的等待时间和大小。这种技术改良使得引入许多新的变数和工具程式类别成为可能，以及使用未在设定中设定的任意值动态建立工具程式类别的能力。
从 Tailwind CSS 版本 3 开始，即时编译模式将成为预设模式。
版本
Tailwind CSS 使用语义版本控制来识别其版本兼容性。
著名使用
- GitHub
- Firefox
- Netlify
- NBA
- NASA
- Netflix
参见
| | |
