简介 Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计...简单的理解 tailwind css 是原 atom css 的升级版，提供更灵活的配置, 更系统的预设样式类, 更完整的配置体系 简单例子 [图片上传失败......// 模式1: 通过css文件按需引入 // index.css @tailwind base; // 基础预设样式 @tailwind components; // 组件样式 @tailwind..." rel="stylesheet"> // 模式3: 全引入 import "tailwindcss/tailwind.css" 功能 个人总结 tailwind css 功能主要包括三部分： 预设样式类...prefilght 自定义扩展函数与指令 @tailwind 自定义主题，功能扩展 tailwind.config.js 预设样式类 tailwind css 提供了一套以移动优先的，响应式样式类
在本文中，我们将探索6个令人信服的理由，解释为什么您应该考虑在下一个项目中使用Tailwind CSS。 1、快速的内联响应式设计 过去，我们需要编写复杂的媒体查询来使我们的界面具备响应式能力。... 这种内联的响应式设计方法节省了时间，并消除了编写和管理复杂媒体查询的需要。 2、内联伪类实现交互效果 Tailwind CSS允许您直接在类属性中应用伪类。...3、内联样式的简洁性 使用Tailwind CSS的一个重要优势是能够直接在元素内部定义其所有样式。这种方法消除了在多个CSS文件中搜索以了解元素样式的需求。...4、组件化的方法提高可重用性 在使用Tailwind CSS时，您可能会发现自己不断地应用一组类。为了避免代码重复，Tailwind CSS允许您使用@apply指令创建自定义样式类。...它的内联样式和组件化的方法使得开发更加简单、快速和可维护。同时，Tailwind CSS的定制能力和清除未使用样式的功能进一步增强了其实用性和生产效率。
在本文中，我们不会深入探讨 Tailwind，而是要探讨 Tailwind 中使用内联类的问题，以及触及一些改变我们处理这些问题的新的原生 CSS 功能。...内联类 内联类是 Tailwind 的一个备受赞誉的特性。在寻求关于 Tailwind 的反馈时，作者收到了各种各样的意见，但其中一个观点引起了作者的关注。...经过两个月后： 在级联层中包裹你想要调整的新样式 在嵌套作用域中使用新类 这两种方法都使用原生 CSS，并可以达到与 Tailwind 相同的效果，尽管对于某些人来说，可能需要进行一些范式转变才能习惯。...CSS 样式表是专门为在 HTTP 概念中进行缓存而设计的。Tailwind的内联类是HTML文档的一部分，而HTML文档的变化通常更为频繁，一般不会像CSS样式表那样被缓存。...重复的样式方言：Tailwind 将允许你定义内联类语法，这是一种类似 CSS 的简化方言。这些类链接到框架 CSS 规则。
HTML 转 JSX：将HTML代码转换为JSX格式，用于React开发。HTML 转 Pug：将HTML代码转换为Pug模板语言，简化前端开发过程。...JSON 转 Java 和 JSDoc：将JSON数据转换为Java类和JSDoc注释，提升代码的可读性和文档化。...JSON 转 Kotlin：将JSON数据转换为Kotlin数据类，适应Kotlin语言开发需求。JSON 转 Protobuf：将JSON数据转换为Protobuf格式，适用于高效的二进制数据传输。...CSS 转 JS 和 TailwindCSS是网页样式的定义语言，现代前端开发中，CSS-in-JS和Tailwind CSS逐渐流行。我们的工具可以帮助您将传统CSS代码转换为这些新兴的样式格式。...CSS 转 JS：将CSS代码转换为JavaScript对象格式，适用于CSS-in-JS解决方案。CSS 转 Tailwind：将CSS代码转换为Tailwind CSS实用类，简化样式管理。
将 Tailwind 替换为 React，或者几乎是当今任何其他流行的基于 JavaScript 的工具，你都会得到相似的相反意见。 争议点在哪里？...基本上，它允许你将 CSS 样式代码嵌入到你的 HTML 代码中，正如 Tailwind 的口号所说：“在不离开 HTML 的情况下快速构建现代网站。”...因此，它使开发者不必从 HTML 切换到 CSS 样式表。 Tailwind 自己的文档指出了对这种方法的常见反对意见：“这不就是内联样式吗？”...但根据 Tailwind 的说法，它的“实用类”方法提供了比内联样式更多的功能，包括响应式设计（适用于移动友好设计）。...因此，易于使用（特别是与编写和维护 CSS 文件相比）以及在 HTML 中进行样式设置的能力是许多开发者喜欢 Tailwind 的主要原因。
这里将使用示例来介绍其中一些： 内联 CSS 外部/引用 CSS Sass Bootstrap styled-components Tailwind # 内联 CSS 内联 CSS 是直接在 HTML...是一种流行的开源 CSS 框架，Bootstrap 已经内置了样式和类，可以立即应用于您的应用程序。...可以使用 props 更改样式，实现动态样式 可以使用 JavaScript 语法编写样式, React 原生支持 缺点： 可能会导致性能问题 # Tailwind CSS 现在许多开发人员都使用 Tailwind...Tailwind CSS 是一种实用型优先的框架，使用一种称为“原子类”的方法，通过提供大量的预定义类来帮助构建定制的、响应式的 UI 组件和页面。... ); } export default Example; # 样式规范 前面已经介绍了不同样式类型，现在我们将介绍编写样式的一些常见约定。
内联样式 内联样式也得写成对象 key-value 形式，遇到-连字符，则需要大写，如 function Hello() { return ( 内联样式显得组丑陋影响阅读，并且样式不易于复用，同时伪元素与媒体查询无法实现，但是封装成类样式，又会影响到全局作用域，所以便有了局部样式styles.module.css 。...，如果不喜欢将样式写在 render 里，styled-jsx 提供了一个 css 的工具函数： import css from 'styled-jsx/css' export default ()...原子类 简单说，就是将常用的 css 样式都封装完，只需要在 class 中引入即可 这里选用当红框架 Tailwind CSS 作为演示。...体验下来基本上就是在写内联样式 inline css 但是同时又不显得杂乱。
核心概念 功能类优先 在一组受约束的原始功能类的基础上构建复杂的组件。 使用Tailwind内置的功能类来实现下图的卡片样式： 实现基础元素准备： 使用Tailwind的优势： 省去了以外为了定义 class 名称带来的烦恼； 省去了重复定义 css 造成的样式文件增大； 避免了 css 修改造成了未知样式错乱带来问题...； 与传统内联样式相比的优势： 实现的 UI 全部基于一套预定义功能类实现，UI 更加一致； 使用内置的功能类可以轻松实现内联样式无法实现的响应式布局和元素状态等。...提高可维护性的办法： 从上面的例子可以看出，使用 Tailwind 后代码的风格趋于内联样式的编写，也带来的阅读的烦恼，解决这样的问题提供了下面两个常用的方法： 抽取相同、类似的布局为公共组件、模板，...提高复用性； 对于没有必要或不应该提取为组件的简单元素，可以使用@apply抽象CSS类，就跟我们以前编写 class 一样来组合 Tailwind 功能类； 响应式设计 下面的两张设计图是在不同浏览器尺寸的下分别应该显示的样式
虽然 React 本身组件提供 style 属性，可以让用户以对象、内联样式的方式，将样式应用于渲染后的 DOM 元素上，在一定程度上实现了样式的组件化封装。...为了解决这个问题，当时我们利用SCSS将全局样式镶嵌到bootstrap-scope类中，再用将会产生CSS污染的老代码隔离起来。...有些新方案选择将 CSS 在构建时输出为静态 CSS 文件，如Linaria【16】。不过这种方案有一些语法上的限制，比如不支持内联CSS样式【17】。...-500 hover:bg-blue-700 rounded 是 Tailwind 预定义的原子 CSS 类，每个类里面只有一条唯一的样式规则。...不过选择使用原子化 CSS，用户要么需要自己生成一系列原子化的功能性类（工程化成本），要么需要引入 Tailwind 方案（学习成本）。
当我们想写一个css样式时，我们不再需要给标签一个语义化类名，然后再给类名添加CSS规则，我们只需要给标签一个框架提供的类名就行，最后在编译过程中，会自动生成对应CSS规则，这就是原子类CSS，以及它和我们常用语义化标签的不同...TailWind CSS和很早之前的Bootstrap比较相似，他们都是给开发者提供了大量css类名，希望用类名代替CSS规则。...好在TailWind CSS提供了@layer指令，将任何现有的类名内联到自己的自定义CSS中。这点有点像css的mixin（混入）。...以上几点就是自己在开发过程中的主要体验了，下面自己将结合开发体验，归纳一下TailWind CSS的优缺点。 优点 提供了大量类名，减少了写style样式代码。...标签里面写大量的类名，显得丑陋，不符合css规则。 后期修改以及维护比较麻烦。 大量写类名，会降低开发者css能力。 封装业务组件带来的样式穿透问题。
你并不需要编写基础的 CSS 样式规则，只需要直接在 HTML 中应用已经事先定义好的类名。 这样的类名还有很多。...语法 正如上面所展示的，我们直接在 HTML 中书写工具类名。我们会很快想到这和内联 CSS 是非常相似的，这或许也能解释为什么 Tailwind 的开发者会在文档的开头部分就提及这个问题。...我可不想像找威利一样去找元素的字号（译者注：威利是儿童书籍《威利在哪里》中的人物，读者需要在一张人山人海的图片中找到威利） 我的观点是，部分 HTML 元素会使用非常多的样式，这种情况下应该考虑将样式与...这样，我们就可以组织样式并增强其可读性。你不能把 CSS 的所有功能”塞到“ class 这一个 HTML 标签属性里，Tailwind 也不能。这样做只会让 HTML 结构越发臃肿。...当我们使用 SASS 或者原生 CSS 的时候，我们不需要面对额外的一层复杂性，在编写 CSS 样式规则的时候，也不需要改变既已形成的习惯和语法。 使用 Tailwind 是有成本的。
不同于传统的CSS框架，它不提供预设计的组件和样式，而是提供小型的、单一目的的实用类，这些类可以组合起来创建自定义样式，为网站的外观提供了更多的灵活性和控制能力。...Angular: 尽管Angular有自己的样式管理方法，但将Tailwind CSS集成到Angular项目中可以为开发者提供更多的样式控制和灵活性。...JIT模式 按需生成CSS样式: JIT(即时)编译器在您编写模板时按需生成CSS样式，而不是在初始构建时预先生成所有类。...开发者没有完全依赖Tailwind的实用工具类，而是利用了CSS变量和辅助函数的强大功能。 这个辅助函数用于将HEX颜色值转换为RGB格式，这在创建动态主颜色的CSS变量时非常有用。...一旦转换为RGB格式，这些RGB值就可以和Tailwind CSS结合使用，产生不同的阴影效果，确保了透明度层的灵活性。
postcss-preset-env 根据 browserslist 指定的目标浏览器将一些 CSS 的新特性转换为目标浏览器所支持的语法。 cssnano 提供 CSS 压缩功能。...postcss-nested 提供 CSS 嵌套功能。 postcss-px-to-viewport 提供 px 转 vw 功能。...Tailwind 和 Utility-first CSS 近几年随着 Tailwind 的流行，功能类优先（Utility-first CSS）的理念也再次流行起来。...这里简单介绍一下 Tailwind CSS。 3.1 Tailwind[6] Tailwind CSS 是一个功能类优先的 CSS 框架，通过组合不同的类名实现页面设计。...Tailwind 主要优势如下： 不用考虑 class 的命名。 CSS 文件大小增长可控，通过 purge 可生成非常小的 CSS 文件。 统一设计系统下的样式与布局。 IDE 集成优秀。
（在这个例子中，就是这张卡片看起来如何）转移到标记中的类名上，而不是在我们的CSS中添加新的类名。...简而言之，我们的想法是用单个类为单个组件设计样式，用实用工具类在不同上下文中组成或修改组件，并提供布局以保持页面之间和页面内部的一致性。 酷酷的样子 让我们重构 Tailwind 网站上的卡片示例。...我假设这实际上是一个链接，在这种情况下，我们可以在全局样式中为链接应用 .cool-text-interactive 样式，这样我们就可以直接使用不带类的 。...示例简洁多少，直到你实际查看了 Tailwind 示例的源代码，看到了他们实际使用的所有实用类和内联样式，而这些在代码示例中并没有显示出来。...，更容易解析类的作用，而且在不同的上下文中重复使用这些样式时可以减少重复。
在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。...CSS 权重也不是什么问题，因为我们使用的是最简单的类选择器。 我们现在通过 html 标签来添加样式，发现了一些有趣的事儿： 我们增加新功能的时候，样式表的增长减缓了。...传统卡片样式写法： ? Tailwind 卡片样式写法： ? 它并不是真的为所有网站提供一些唯一的实用工具 CSS，取而代之的是，它提供了一些公用的命名约定。...这两种方法都提倡使用标签进行样式化。以某种方式试图模仿内联样式，这让它们有了很多相似的特性(比如在移动某些功能的时候更有信心)。...以这张图为例，我们期望的是书写在后的 blue 类覆盖前面的类，但实际上 CSS 会以样式表中的顺序来决定优先级，最后我们看到的是红色的文字。
在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。...CSS 权重也不是什么问题，因为我们使用的是最简单的类选择器。 我们现在通过 html 标签来添加样式，发现了一些有趣的事儿： 我们增加新功能的时候，样式表的增长减缓了。...传统卡片样式写法： Tailwind 卡片样式写法： 它并不是真的为所有网站提供一些唯一的实用工具 CSS，取而代之的是，它提供了一些公用的命名约定。...这两种方法都提倡使用标签进行样式化。以某种方式试图模仿内联样式，这让它们有了很多相似的特性(比如在移动某些功能的时候更有信心)。...以这张图为例，我们期望的是书写在后的 blue 类覆盖前面的类，但实际上 CSS 会以样式表中的顺序来决定优先级，最后我们看到的是红色的文字。
如果出现同样的类名，很容易造成不同的样式互相覆盖和污染。// a.css.container { color: red;}// b.css// 很有可能覆盖 a.css 的样式！....CSS Modules：能将 CSS 类名处理成哈希值，这样就可以避免同名的情况下样式污染的问题。...CSS 后处理器PostCSS，用来解析和处理 CSS 代码，可以实现的功能非常丰富，比如将 px 转换为 rem、根据目标浏览器情况自动加上类似于--moz--、-o-的属性前缀等等。...CSS 原子化框架，如Tailwind CSS、Windi CSS，通过类名来指定样式，大大简化了样式写法，提高了样式开发的效率，主要解决了原生 CSS 开发体验的问题。...autoprefixer插件，常见的插件还包括:postcss-pxtorem： 用来将 px 转换为 rem 单位，在适配移动端的场景下很常用。
我最开始的思路是直接将问题描述清楚，让 AI 帮忙生成解决方案，于是： ryomahan [5:26 PM] Tailwind CSS 有没有类似 light:bg-white 的写法 ClaudeAPP...马后炮：其实这里已经将问题的核心点出来了，即 Tailwind CSS 实现类似 dark: 的写法是通过一种叫做 variant 的概念来实现的，Tailwind CSS 本身提供了一些基础写法，并且给出了文档...下的样式 - ...可以说,variants 是 Tailwind CSS 实现高度可定制和条件化样式的基石功能之一。...:bg-white" 能够转换为如下 CSS .light .light:bg-white { background: #fff } 如何让它更加泛化，使得无论 light: 后面跟什么都能转换为对应的...如果没有 .light 父元素,light: 类就不会生效,和 Tailwind 的 dark: 变体一致。所以这给你实现了和 dark: 类似的机制,来根据父元素开启某些样式。
免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验 使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。...这个插件的排序顺序如下： Tailwind 中未定义的类名，即用户自定义的类名 Tailwind 中的宽度、弹性布局等其他样式，按其重要性排序 媒体查询和悬停效果 配置我们的项目 当刚安装 Tailwind...默认情况下，Tailwind 基于第一种方法，这就是为什么它的所有基本媒体查询都是 min-width 类型的，意味着需要在某个断点以下定义样式，然后使用 md 和其他变体类进行更改。...你可能已经注意到，将预定义的 Figma 项目转换为即时网站非常痛苦，因为尽管基本的 Tailwind 类非常周到，几乎适合所有设计，但找到每一个类都需要一些时间和思考。...：它允许我们使用基本的 CSS 构造，比如将某些样式应用于元素的所有子元素，但要使其工作，我们需要重写每个带有该构造的样式，这种方法完全违背了 DRY（不重复自己）原则。
这不，乘着上篇文章还没凉透的，我们来今天乘热打铁，来讲讲Tailwind CSS。 在使用 Tailwind CSS 时，由于它的原子特性，让我们写样式时，变得十分丝滑。...例如，如果在配置文件中定义了三种字体大小，Tailwind CSS 将生成三个实用类，分别对应每种字体大小。.../* 输入 */ @tailwind base; @tailwind components; @tailwind utilities; .foo { color: red; } 被转换为： .border...Tailwind 建议 1. 尽可能减少实用类的使用 当我们为 HTML 元素构建实用类列表时，每个新类都会为代码后继者增加阅读的复杂性，他们将稍后必须分析和处理代码（这也包括我们自己）。...使用更短的类列表，下次检查应用程序结构时，分析正在进行的操作将变得更加容易。 2.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
