我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

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

北京

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

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

大家好,我是皮汤。最近一直在研究 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.   // ... 

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

  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.   
     
  •   "snap-center ..."
  •     "https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
  •   
  •  
  •   "snap-center ..."
  •     "https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
  •    
  •   "snap-center ..."
  •     "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
  •    
  •   "snap-center ..."
  •     "https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
  •    
  •   "snap-center ..."
  •     "https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> 
  •    
  •  
  • 在一个 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" class="lazy" data-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 ..." class="lazy" data-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" class="lazy" data-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

    TailwindCSSv3.0前端开发
    来源:程序员巴士内容投诉

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

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    相关文章

    猜你喜欢

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

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

    ECMAScript 2024 正式发布,新特性一览!

    通常,当创建一个新的 Promise 时,会传递一个执行器函数给 Promise 构造函数,这个执行器函数接收两个参数:resolve 和 reject 。但在某些情况下,可能想要在 Promise 创建之后仍然能够访问到这两个函数。这就是

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

    Java 开发工具包(JDK) 21 是 Oracle 标准 Java 实现的最新长期支持 (LTS) 版本,现已推出生产版本。比较实用的我看就5个,字符串模板、有序集合、记录模式、switch的模式匹配、虚拟线程,其他一般也用不大到。

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

    文章目录 前言一、畅谈新版本二、8.1.0版本部署2.1、环境准备2.2、配置yum安装依赖2.3、用户及目录创建2.4、创建用户及组2.5、解压缩包2.6、环境变量配置2.7、创建参数文件2.8、数据库初始化2.9、启动Mysql
    2023-08-16

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

    Debian 项目今天宣布了期待已久的 Debian GNU/Linux 11 “Bullseye”操作系统系列的发布和普遍可用性。

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

    前言 Node.js于5月30号在其官方博客上发布了Node.js v8.0.0。这一版本将成为当前的长期维护版本,从2017年10月开始到2019年12月31号。而Node.js v6.0.0将会在2018年4月进入维护模式,并于2019
    2022-06-04

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

    GaussDB(for Redis)推出的Lua脚本功能,支持用户预设逻辑,组合执行多条命令,让业务设计更加灵活。
    数字化2024-12-13

    热门标签

    Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

    编程热搜

    编程资源站

    目录