文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

TailwindCSS v3.0 正式发布！一大波新特性来袭！

2024-12-02 12:17

关注

大家好，我是皮汤。最近一直在研究 TailwindCSS 相关的内容，打算将其用在接下来的各种项目中，之前也写过关于 CSS 工程化方面的文章：2021 年你需要之前的 CSS 工程化技术，今天给大家介绍一篇关于 Tailwind 最新发布的 v3.0 相关的内容。

2021 年 12 月 10 日，TailwindCSS 的创始人 Adam Wathan 宣布 TailwindCSS v3.0 正式发布，带来了一系列性能上的改进、对开发工作流的改善以及大量的新特性。

那么这颗在 CSS 工程化领域极为耀眼的新星在 v3.0 为我们带来了那些有趣的新特性呢?我们接下来就来一一的介绍它们。

随时随地的 Just-in-Time 模式

Tailwind 2.x 里面引入了一种新的模式，Just-in-Time 模式，可以保持开发和生产构建是一致的，且都是按需构建，相比之前 Tailwind 需要将所有基础的内容进行构建来说大大提升了性能，针对任何构建工具，如 Webpack 只需要 800ms 就可以构建完成，而在之前，可能需要 30-45s。

而且得益于 JIT 模式，Tailwind 支持了 “任意值辅助类” 等一系列新的特性。

之前使用 JIT 时，需要在配置文件里面指定模式：

  1. // tailwind.config.js 
  2.  
  3. module.exports = { 
  4.  // ... 
  5.   mode: 'jit', 
  6.   // ... 
  7. } 

然后你就可以享受到极快的构建速度，而且可以使用任意值的辅助类，如：

  1. "top-[-113px]">
 

这在之前的 Tailwind 版本中是不允许的，如果需要覆盖这种任意值的情况，你还是得定义一个类名，然后撰写对应的 CSS：

  1. "arbitrary-values">
 
  •  
  •   
    •

    这种形式显得 Tailwind 比较割裂，所以在 JIT 模式下，因为支持按需构建，所以这种任意值的形式也可以使用 Tailwind 统一的语法进行书写。

    而在 v3.0 中，Tailwind 内置了 JIT，无需在配置文件里面声明 JIT 模式，默认就是按需构建、可使用任意辅助类、开发和生产构建方式与产物统一，避免了不一致性、还获得了极大的性能优化。

    所有的颜色都开箱即用

    在 v3.0 之前，为了关注在开发模式下 CSS 体积的大小，Tailwind 必须要小心的限制可用的颜色，但是在 v3.0 之后，我们可以引入了很多新的调色板颜色，如 cyan(天蓝色)、rose(玫瑰色)、fuchsia(紫红色)、lime(酸橙色)以及 15 中灰色的阴影，而无需担心日益增大的 CSS 文件体积。

    支持有颜色的阴影

    之前 Tailwind 想要以一种组合式的方式支持带颜色的阴影是很困难的，虽然长期以来，用户都在述求这一项功能，但是一直也没有实现。经过 5 次失败的尝试，最终在 Tailwind v3.0 中实现了这项功能，现在你可以在 Tailwind 中使用这些有颜色的阴影了：

    比如下述代码：

    1. "bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe 
    2. "bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe 
    3. "bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe 

    可以得到如下的效果：

    滚动捕捉 API

    我们加入了一个完善的用于实现 CSS 滚动捕捉模块的辅助类集合，使得你可以直接在 HTML 里面实现非常丰富的滚动捕捉的效果：

    什么是滚动捕捉?也就是滑动到下一个 Item 时，可以选择滑动到此 Item 的某个位置，比如下列的定位在图片中间。

    而上面的效果只需要如下的较为简单的 Tailwind 辅助类：

    1. "snap-x ..."> 
    2.   "snap-center ..."> 
    3.     "https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    4.    
    5.   "snap-center ..."> 
    6.     "https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    7.    
    8.   "snap-center ..."> 
    9.     "https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    10.    
    11.   "snap-center ..."> 
    12.     "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    13.    
    14.   "snap-center ..."> 
    15.     "https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    16.    
    17.   "snap-center ..."> 
    18.     "https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    19.    
    20.  

    在一个 snap 容器里，snap-center、snap-start 等是用于滚动定位的设置项，而 Scroll Margin 则是用于设置相对于定位的偏移，使用形如 scroll-m{side}-{size} 这样的格式进行设置，如 scroll-ml-6 ，则是相对左边再偏移 6 个单位的长度：

    1. "snap-x ..."> 
    2.   "scroll-ml-6 snap-start ..."> 
    3.     "https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    4.    
    5.   "scroll-ml-6 snap-start ..."> 
    6.     "https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    7.    
    8.   "scroll-ml-6 snap-start ..."> 
    9.     "https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    10.    
    11.   "scroll-ml-6 snap-start ..."> 
    12.     "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    13.    
    14.   "scroll-ml-6 snap-start ..."> 
    15.     "https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
    16.    
    17.  

    如上述代码，snap-center 则会在滚动的时候定位在图片的开始位置，而加了 scroll-ml-6 之后，会再相对左边偏移 6 个单位，变成如下效果：

    多列布局

    我们加入了 columns 列布局支持，也被称之为 “新闻版式布局” 类型，这种布局非常有用，同时应用在底部的导航栏布局设计时也是非常有用的。

    如我们大多数网站底部的多列导航栏设计，以 Tailwind 官网为例：

    当你使用对应的辅助类如下时：

    1. "columns-1 sm:columns-3 ..."> 
    2.   
      ...
       
    3.   -- ... --> 
    4.  

    你可以获得如下的效果：

    原生的表单控制样式

    我们加入了对 CSS accent-color 属性的支持，如为表单里面的文件输入框按钮添加样式，这使得你能够细粒度的为原生的表单控制按钮添加样式，如下代码：

    1.  
    2.   "flex items-center space-x-6"> 
    3.     "shrink-0"> 
    4.       "h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" /> 
    5.      
    6.     "block"> 
    7.       "sr-only">Choose profile photo 
    8.       "file" class="block w-full text-sm text-gray-500 
    9.         file:mr-4 file:py-2 file:px-4 
    10.         file:rounded-full file:border-0 
    11.         file:text-sm file:font-semibold 
    12.         file:bg-violet-50 file:text-violet-700 
    13.         hover:file:bg-violet-100 
    14.       "/> 
    15.      
    16.    
    17.   "mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600"> 
    18.     "checkbox" class="accent-violet-500" checked/> 
    19.     Yes, send me all your stupid updates 
    20.    
    21.  

    可以获得如下效果：

    为选择文件前：

    选择文件后：

    打印修饰符

    我们添加了 print 修饰符，使得你可以在用户打印你的网站时如何展现：

    1.  
    2.   "print:hidden"> 
    3.      
    4.     
      This recipe is a secret, and must not be shared with anyone
       
    5.     -- ... --> 
    6.    
    7.   "hidden print:block"> 
    8.     Are you seriously trying to print this? It's secret! 
    9.    
    10.  

    比如上述的代码逻辑为，在打印模式下，第一个 article 块不展示，而 div 块展示。

    现代 aspect ratio API

    我们添加了原生的 aspect ratio ****属性的支持，因为现在浏览器的支持度已经非常高了，即我们可以获得比较完美的横纵比。

    比如如下代码，可以设置视频的最佳横纵比：

    1. "w-full aspect-video ..." src="https://www.youtube.com/..."> 

    上述代码得到如下结果：

    [[441174]]

    好看的下划线样式

    我们现在也支持修改下划线的颜色、粗细等属性了~

    如下面的代码：

    1.  
    2.   I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at 
    3.   "#" class="underline decoration-sky-500 decoration-2">My Company, Inc. Outside of work, I 
    4.   like to "#" class="underline decoration-pink-500 decoration-dotted decoration-2">watch pod-racing 
    5.   and have "#" class="underline decoration-indigo-500 decoration-wavy decoration-2">light-saber 
    6.   fights. 
    7.  

    可以得到如下的效果：

    RTL 与 LTR 修饰符

    我们也加入了对 RTL(从右到左)与 LTR(从做到右)等多方向布局的实验性支持，如下代码：

    1. "group flex items-center"> 
    2.   "shrink-0 h-12 w-12 rounded-full" src="..." alt="" /> 
    3.   "ltr:ml-3 rtl:mr-3"> 
    4.     "text-sm font-medium text-gray-700 group-hover:text-gray-900">...
       
    5.     "text-sm font-medium text-gray-500 group-hover:text-gray-700">...
       
    6.    
    7.  

     可以获得如下效果：

    Portrait 与 Landscape 修饰符

    我们也添加了在不同屏幕方向的修饰符支持，如 portrait (竖屏)、landscape (横屏)修饰符，使得你可以通过不同的修饰符控制在对应屏幕方向上的样式：

    1.  
    2.   "portrait:hidden"> 
    3.     -- ... --> 
    4.    
    5.   "landscape:hidden"> 
    6.     
       
    7.       This experience is designed to be viewed in landscape. Please rotate your 
    8.       device to view the site. 
    9.     
       
    10.    
    11.  

    任意值辅助类支持

    虽然看起来不太合理，但是我们依然添加了任意 CSS 值的 Tailwind 辅助类，并使得你可以结合 hover 、lg 等修饰符使用：

    1. "[mask-type:luminance] hover:[mask-type:alpha]"> 
    2.   -- ... --> 
    3.  

    或者像 56px 或者 44px 这种任意值，与 lg 修饰符一起使用：

    1. "[--scroll-offset:56px] lg:[--scroll-offset:44px]"> 
    2.   -- ... --> 
    3.  

    使用 CDN 来使用 Tailwind

    目前没有一个很好的基于 CSS 的 CDN 方式来使用 Tailwind CSS v3.0，所以我们构建了一个 JavaScript 库来帮助你使用它：

    1.  
    2. "en"> 
    3.    
    4.     "utf-8"> 
    5.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
    6.     Example 
    7.     "https://cdn.tailwindcss.com/"> 
    8.    
    9.    
    10.     -- --> 
    11.    
    12.  

    这种方式仅限于在开发环境下使用，或者当你想构建一个 demo 或者想要尝试一个有趣的想法时，你可以这样使用。只需要在任何想要使用 Tailwind 特性的 HTML 文档里添加 script 标签来引用 https://cdn.tailwindcss.com/ 即可。

    以上就是 TailwindCSS v3.0 更新的全部特性了，看到这里，你觉得 TailwindCSS v3.0 怎么样呢?你做好将其用于生产、或者加入构建你下一个应用时的工具箱的准备了🐴?

     

    来源：程序员巴士内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    TailwindCSS v3.0 正式发布！一大波新特性来袭！

    后端开发TailwindCSSv3.02024-12-02

    ECMAScript 2024 正式发布，新特性一览！

    后端开发Unicode表达式2024-11-29

    Java 21正式发布，15大特性一览

    后端开发开发工具Java2024-11-30

    【MySQL】MySQL8.1.0版本正式发布带来哪些新特性？

    后端开发2023-08-16

    期待已久的 Debian 11 正式发布，此Linux带来大量新特性

    后端开发Debian112024-12-03

    Node.js v8.0.0正式发布！看看带来了哪些主要新特性

    后端开发2022-06-04

    华为云GaussDB(for Redis)发布全新版本，两大核心特性正式亮相

    后端开发数字化2024-12-13
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯