文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Tailwind CSS那些事儿

❞ 如何在项目中使用 Tailwind CSS 在Tailwind CSS 官网[1]中，为我们提供了，四种方式来使用Tailwind CSS。...下面呢，我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。...如果我们项目中和 UI 小姐姐没有达成统一的设计规则，最好避免使用 Tailwind，因为我们将不得不在类列表中写入自定义的值（如 'p-[123px] mb-[11px] gap-[3px]'）或添加大量新的规则...JIT 不是一次性创建所有实用程序，而是在需要时生成类。这导致更快的构建时间和更小的文件大小，并允许使用任意值类和基于元素状态的类，如 hover、focus、active 等。...解析潜在的 tailwind 类名以检查它们是否真的是 tailwind 类名。 如果是，则从中生成一些 CSS。 用生成的 CSS 替换原始的 css 文件中的 @tailwind 规则。 5.

1.5K30

Tailwind CSS，值得2024年的你一试吗？

这个受到GitHub社区喜爱的开源项目，提供了一系列预建的实用类，你可以直接在HTML代码中使用这些类来实现不同的样式和布局。...精确性和专业性: 由于被众多重量级公司采用，这表明Tailwind CSS具有高度的精确性和专业性，可能不太适合初学者。...React集成示例 以下是一个React组件的代码示例，展示了如何在React应用中使用Tailwind CSS来创建一个蓝色按钮，按钮上的文本为白色。...优化构建时间: 在JIT模式下，Tailwind分析您的HTML模板，并且只生成基于您标记中使用的类的必要CSS样式，这提供了更快的构建时间。...开发者没有完全依赖Tailwind的实用工具类，而是利用了CSS变量和辅助函数的强大功能。 这个辅助函数用于将HEX颜色值转换为RGB格式，这在创建动态主颜色的CSS变量时非常有用。

1.8K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Facebook 重构：抛弃 Sass Less ，迎接原子化 CSS 时代

    在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。...它还具有相当好的可移植性，可以在任意其他应用程序中使用。 实用工具/原子 CSS 的限制 实用工具/原子 CSS 看起来很有趣，但它们也带来了一些挑战。...举几个例子让大家感受一些，Tailwind 提供了一套强大的构建系统，比如默认情况下它提供了一些响应式的断点值： // tailwind.config.js module.exports = { theme...如果一个类只有一个简单的 CSS 规则，如 margin: 0，而覆盖的是 marginTop: 10。...甚至可以用 TS 来避免错别字。 结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。

    3.4K10

    从自身开发体验谈谈Tailwind CSS

    TailWind CSS和很早之前的Bootstrap比较相似，他们都是给开发者提供了大量css类名，希望用类名代替CSS规则。...这篇文章将以自己最近开发项目过程中使用它的情况，从自身开发体验以及框架自身的优缺点方面来给大家分享一下TailWind CSS的优势以及存在的问题，让大家在打算用这个css框架或者打算学它之前对它有个比较清晰的认知...类名支持任意值带来的便捷 随着项目的进行，自己在不断使用类名的过程中，对类名也是越来越熟悉，搭配插件提示，代码效率也是直线向上，大部分情况下已经不需要查找类名就能直接写出来了。...不过，TailWind CSS提供了任意值的类名规则，我们想实现32px的字体大小，只需要加入text-[32px]的类名，这种方式，对于其他css属性的任意值也是同样适用，这样就大大增加了开发的灵活性...通过上面说到的如text-[14px]这种任意值的方式可以实现，但是页面太多，这样写不好维护和管理，不过tailwind.config.js文件可以让我们在项目的根目录中查找一个可选文件，可以在其中定义任何自定义项

    87710

    Facebook 重构：抛弃 Sass u002F Less ，迎接原子化 CSS 时代

    在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。...它还具有相当好的可移植性，可以在任意其他应用程序中使用。 实用工具/原子 CSS 的限制 实用工具/原子 CSS 看起来很有趣，但它们也带来了一些挑战。...举几个例子让大家感受一些，Tailwind 提供了一套强大的构建系统，比如默认情况下它提供了一些响应式的断点值： // tailwind.config.js module.exports = { theme...如果一个类只有一个简单的 CSS 规则，如 margin: 0，而覆盖的是 marginTop: 10。...甚至可以用 TS 来避免错别字。 结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。

    3.8K50

    Tailwind CSS 真有那么好吗？讨厌它的前六大原因

    它不具有可扩展性和可重用性 Tailwind CSS 的另一个问题是它不具有可扩展性和可重用性。Tailwind CSS 鼓励你通过对其应用多个实用程序类来单独设置每个元素的样式。...例如，你仍然需要知道如何使用 flexbox、grid 或 position 属性来布局你的元素，但是你不是直接在你的 CSS 文件中使用它们，而是使用模仿它们的 Tailwind CSS 类。...例如，你仍然需要知道如何使用 flexbox、grid 或 position 属性来布局你的元素，但是你不是直接在你的 CSS 文件中使用它们，而是使用模仿它们的 Tailwind CSS 类。...你并没有学习实际的 CSS 属性和值，而是学习 Tailwind CSS 类及其含义。这可能会让你认为你知道 CSS，但实际上，你只熟悉 Tailwind CSS。...例如，它不使用破折号或驼峰命名来分隔类名中的单词，而是使用冒号或括号。它不使用百分比或像素来指定值，而是使用任意的数字或字母。这可能会使你的代码看起来不一致和不熟悉。

    4K10

    CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？

    Tailwind CSS: Utility-First 的黄金标准 Tailwind CSS 是一个功能优先的 CSS 框架，它通过提供大量预设的、低层次的工具类（utility classes），让你可以在...它甚至有官方的 Tailwind CSS 预设，可以让你无缝迁移。 任意值支持：这是 UnoCSS 的一大杀手锏。你不再受限于配置文件，可以直接在类名中书写任意值。...通过 @unocss/preset-icons，你可以用 i-logos-css-3 这样的类名直接使用数万个图标。...可能变慢 极致快，性能几乎无开销 打包体积 按需生成，非常小 更小，只包含你用到的最精确的规则 灵活性 通过 tailwind.config.js 扩展 极致灵活，原生支持任意值，无需配置 配置 依赖...你追求极致的灵活性，不想被配置文件束缚，希望随时随地使用任意值。 你正在构建一个对打包体积有严苛要求的应用（如库、组件、嵌入式应用）。 你喜欢尝试最新的技术，并享受高度可定制化的开发乐趣。

    2.9K10

    高效地将 TailwindCSS 与 Nuxt 结合使用

    在这篇文章中，我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。...先决条件 最好使用以下命令设置 Nuxt 应用程序并准备好运行： npx nuxi init tailwind-css-nuxt-demo 这tailwind-css-nuxt-demo是我们的代码演示应用程序的名称.../assets/css/tailwind.css应用程序中定位 TailwindCSS 样式。我们还可以使用Nuxt 配置文件中配置对象cssPath的属性来覆盖此默认路径。...TailwindCSS 类样式@tailwind，如下所示： @tailwind base; @tailwind components; @tailwind utilities; 在上面的代码中，我们导入了...这个优秀的包允许您将 Iconify 中选定的图标包中的图标加载到 TailwindCSS 中作为应用程序中使用的类。

    3.8K20

    使用 TailwindCSS 中的 color-mix() 构建自定义调色板

    创建后，在项目的根目录中，您应该创建两个文件 - 其中一个位于包含以下代码的文件夹tailwind.css中：styles /** styles/tailwind.css */ @tailwind base...使用 color-mix() 生成具有色调和阴影变体的调色板 color-mix()是一个 CSS 函数，它接受两种颜色并根据给定的颜色空间返回所需的混合颜色变体。...和blendingColor可以是任何 CSS 支持的颜色值，但我们也可以使用color-mix()不同的颜色空间进行颜色混合，从 sRGB 到 HSL。...我们可以将 CSS 变量分配--color-primary-base给文件中的扩展基础层，而不是直接在配置文件中映射颜色代码tailwind.css，如下所示： /**styles/tailwind.css...概括 color-mix()在本教程中，我们简要学习了如何在 TailwindCSS-Nuxt 支持的应用程序中使用 CSS 函数、var()CSS 变量和 JavaScript构建颜色变体调色板。

    1.3K20

    分享 6 个你需要使用 Tailwind CSS 的原因

    在本文中，我们将探索6个令人信服的理由，解释为什么您应该考虑在下一个项目中使用Tailwind CSS。 1、快速的内联响应式设计 过去，我们需要编写复杂的媒体查询来使我们的界面具备响应式能力。...在Tailwind CSS中，您可以通过直接向元素添加响应式文本类，如text-lg、text-sm或text-xl来实现： 的方法提高可重用性 在使用Tailwind CSS时，您可能会发现自己不断地应用一组类。为了避免代码重复，Tailwind CSS允许您使用@apply指令创建自定义样式类。...您可以通过修改Tailwind CSS配置文件轻松覆盖默认值并添加新的配置项。该文件提供了一个集中化的位置，用于自定义颜色、间距、字体、断点等等。...Tailwind CSS的定制能力确保您对UI的视觉方面拥有完全的控制权，使其成为具有独特设计需求的项目的多功能选择。

    1.1K40

    只需6步，就能让你的 React +Tailwind.css站点实现暗黑功能

    欢迎回来，开始一次新的编码之旅吧！今天，我们将进入神秘的世界，探索如何在你的React.js网站中使用Tailwind.css实现暗黑模式。...第二步：将Tailwind.css集成到你的React项目中 要在你的React应用程序中使用Tailwind.css，你需要将它包含到你的项目中。...第四步：使用Tailwind.css进行样式设置 现在，我们将使用Tailwind的暗黑模式实用工具来为我们的暗黑模式添加样式。... 第五步：配置Tailwind的暗黑模式 为了使dark类正常工作，我们需要在tailwind.config.js文件中配置Tailwind以启用暗黑模式。...点击按钮将切换页面的整体主题，而Tailwind的暗黑模式实用工具帮你处理其余的细节问题。 你已经成功地在你的React.js网站中使用Tailwind.css实现了暗黑模式功能。

    1.4K40

    Tailwind CSS （可能）是名过其实的

    另一种做法是允许模板设计者和开发者使用任意一种具体的排序，但这样一来，为了找到要修改的目标类名。我们就不得不水平扫视甚至是滚动查看代码。...@apply 针对上面提到的问题，Tailwind 允许我们在单个 CSS 文件中使用它们的类名： .header { @apply bg-red-200 w-4 text-gray-400 rounded-sm...PurgeCSS 会分析你的内容和 css 文件，首先它将 css 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 css 中删除未使用的选择器，从而生成更小的 css 文件。...确实如此，这是它的一个优点：我们定义一个诸如 bg-red-200 的颜色工具类，之后可以在代码各处使用，并在一个地方（Tailwind 的配置文件）集中修改它的实际值。...花费时间和精力学习 Tailwind 的语法和类名，你会逐渐忘记其背后的语法：也即原生 CSS 的语法。如果我的开发者在一个更大的项目中使用 Tailwind 长达一年，他们将会逐渐忘记原生 CSS。

    2.4K20

    解锁网页设计新境界：一文掌握Tailwind CSS

    Tailwind CSS简介 Tailwind CSS是一个高度可定制的实用工具优先的CSS框架，它提供了构建网站界面的底层CSS类，使得开发者可以通过组合这些类来快速构建出独特的设计。...与传统的CSS框架（如Bootstrap或Foundation）不同，Tailwind不提供预设计的组件，而是提供原子化的、可复用的工具类，使得你可以按照自己的设计轻松地创建界面，而不必覆盖大量预设样式...积木盒（Tailwind CSS的设计理念） 精选的积木集合： Tailwind提供了一套预先定义的CSS工具类（积木），这些工具类涵盖了边距、填充、字体大小、颜色、布局和更多的样式需求。...每个使用Tailwind CSS的项目都可以具有完全不同的外观和感觉，尽管它们是用相同的工具类搭建的。 深色模式的积木变化（深色模式支持） 想象在你的积木盒中有一组特殊的积木，这些积木在晚上可以发光。.../src/style.css --watch 运行上面命令以后会在 src 目录生成 style.css 文件，可以观察下文件内容 开始在 HTML 中使用 Tailwind 新建 index.html

    3.2K10

    Tailwind 与 Bootstrap 的区别和使用入门

    我们知道，从 Laravel 8 开始，自带前端脚手架代码默认兼容 Tailwind CSS 框架，取代了之前的 Bootstrap CSS 框架。那么 Tailwind 是什么？...如何在 HTML 页面中使用？学院君将在这篇教程中给大家简单介绍下。...一、Tailwind 是什么 简而言之，Taildwind 是一个实用优先的工具集 CSS 框架，旨在提升现代 Web 应用的开发效率。...因此，使用 Tailwind 每个 HTML 元素的 class 属性通常会有一连串值，这看起来好像很麻烦，不过，Tailwind 的优点正好弥补了 Bootstrap 的不足：对于一些长期维护的、面向用户的...类名属性对比 另外，你还可以对比两种 CSS 框架渲染卡片组件的 class 类名，Bootstrap 的一个 class 包含了多个样式属性设置（负责多个职能）： 而 Tailwind 的一个 class

    5.5K41

    2024年最值得尝试的5个CSS框架

    快速样式调整的实用类：通过实用类，Bootstrap 使得页面的样式调整变得快速简单，无需编写大量的自定义CSS。...Tailwind CSS 的独特特点 工具优先的设计方式：Tailwind 的核心思想是通过实用类直接在 HTML 中应用样式，极大地提高了开发效率和灵活性。...通过在项目的配置文件中指定要处理的内容和自定义主题，然后通过插件来扩展功能，你可以开始使用 Tailwind 提供的实用类来编写 CSS。...如何在项目中集成 Foundation 通过如下示例代码，可以看到如何在 React 项目中使用 Foundation： import { Menu, MenuItem } from 'react-foundation...易用且直观的语法：Bulma 的类名清晰直观，使得即使是 CSS 新手也能快速上手。

    4.5K10

    CSS闯关指南：从手写地狱到“类”积木之旅｜得物技术

    State类用于定义组件的状态样式，如 .btn 和 .btn-primary 的样式。Theme类主要是主题相关的样式，如 .site-title 和 .module-title 的样式。...CSS模块化通过Webpack等模块打包工具实现，使得CSS文件能够以模块的形式导入到JavaScript文件中，进而在React、Vue等现代前端框架中使用。...由于它采用了原子类的概念，开发人员不需要记忆复杂的命名规则或层叠样式表的优先级，只需根据需要选择合适的类名即可。Tailwind CSS 通过优化样式表的生成方式，可以生成高效的 CSS 代码。...-- 任意值支持 --> 如 Sass、CSS Modules），还是直接使用原子化 CSS 框架（如 Tailwind、UnoCSS），其核心目标始终围绕效率与质量的平衡。

    63910

    Tailwind CSS vs 现代CSS，Tailwind CSS 会像CSS-in-JS 一样亡？

    在本文中，我们不会深入探讨 Tailwind，而是要探讨 Tailwind 中使用内联类的问题，以及触及一些改变我们处理这些问题的新的原生 CSS 功能。...因此，作者对此持有坚定的立场： 作者强烈建议，管理多个文件或语法应该是工具，如 IDE、文本编辑器、终端或甚至多显示器的责任，而不应该在代码库中解决。...经过两个月后： 在级联层中包裹你想要调整的新样式 在嵌套作用域中使用新类 这两种方法都使用原生 CSS，并可以达到与 Tailwind 相同的效果，尽管对于某些人来说，可能需要进行一些范式转变才能习惯。...类属性及其值构成了 249KB 的数据，这意味着页面大小的 57.6% 来自内联类。而使用现代本地 CSS 时，这一比例约为 5%-15%。...重复的样式方言：Tailwind 将允许你定义内联类语法，这是一种类似 CSS 的简化方言。这些类链接到框架 CSS 规则。

    70510
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券