上海专业网站建设服,莱芜金点子电子版最新招聘信息,国外免费搭建网站,网站死链对网站影响作者 | 一只图雀来源 | 程序员巴士今天给大家介绍一篇关于 Tailwind 最新发布的 v3.0 相关的内容。2021 年 12 月 10 日#xff0c;TailwindCSS 的创始人 Adam Wathan 宣布 TailwindCSS v3.0 正式发布#xff0c;带来了一系列性能上的改进、对开发工作流的改善以及大量的新特… 作者 | 一只图雀来源 | 程序员巴士今天给大家介绍一篇关于 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 时需要在配置文件里面指定模式// tailwind.config.jsmodule.exports {// ...mode: jit,// ...
}然后你就可以享受到极快的构建速度而且可以使用任意值的辅助类如div classtop-[-113px]/div这在之前的 Tailwind 版本中是不允许的如果需要覆盖这种任意值的情况你还是得定义一个类名然后撰写对应的 CSSdiv classarbitrary-values/divstyle
.arbitrary-values {top: -113px;
}
/style这种形式显得 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 中使用这些有颜色的阴影了比如下述代码button classbg-cyan-500 shadow-lg shadow-cyan-500/50 ...Subscribe/button
button classbg-blue-500 shadow-lg shadow-blue-500/50 ...Subscribe/button
button classbg-indigo-500 shadow-lg shadow-indigo-500/50 ...Subscribe/button可以得到如下的效果滚动捕捉 API我们加入了一个完善的用于实现 CSS 滚动捕捉模块的辅助类集合使得你可以直接在 HTML 里面实现非常丰富的滚动捕捉的效果什么是滚动捕捉也就是滑动到下一个 Item 时可以选择滑动到此 Item 的某个位置比如下列的定位在图片中间。而上面的效果只需要如下的较为简单的 Tailwind 辅助类div classsnap-x ...div classsnap-center ...img srchttps://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classsnap-center ...img srchttps://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classsnap-center ...img srchttps://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classsnap-center ...img srchttps://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classsnap-center ...img srchttps://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classsnap-center ...img srchttps://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //div
/div在一个 snap 容器里snap-center、snap-start 等是用于滚动定位的设置项而 Scroll Margin 则是用于设置相对于定位的偏移使用形如 scroll-m{side}-{size} 这样的格式进行设置如 scroll-ml-6 则是相对左边再偏移 6 个单位的长度div classsnap-x ...div classscroll-ml-6 snap-start ...img srchttps://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classscroll-ml-6 snap-start ...img srchttps://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classscroll-ml-6 snap-start ...img srchttps://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classscroll-ml-6 snap-start ...img srchttps://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //divdiv classscroll-ml-6 snap-start ...img srchttps://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw320h160q80 //div
/div如上述代码snap-center 则会在滚动的时候定位在图片的开始位置而加了 scroll-ml-6 之后会再相对左边偏移 6 个单位变成如下效果多列布局我们加入了 columns 列布局支持也被称之为 “新闻版式布局” 类型这种布局非常有用同时应用在底部的导航栏布局设计时也是非常有用的。如我们大多数网站底部的多列导航栏设计以 Tailwind 官网为例当你使用对应的辅助类如下时div classcolumns-1 sm:columns-3 ...p.../p!-- ... --
/div你可以获得如下的效果原生的表单控制样式我们加入了对 CSS accent-color 属性的支持如为表单里面的文件输入框按钮添加样式这使得你能够细粒度的为原生的表单控制按钮添加样式如下代码formdiv classflex items-center space-x-6div classshrink-0img classh-16 w-16 object-cover rounded-full srchttps://images.unsplash.com/photo-1580489944761-15a19d654956?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8autoformatfitcropw1361q80 altCurrent profile photo //divlabel classblockspan classsr-onlyChoose profile photo/spaninput typefile classblock w-full text-sm text-gray-500file:mr-4 file:py-2 file:px-4file:rounded-full file:border-0file:text-sm file:font-semiboldfile:bg-violet-50 file:text-violet-700hover:file:bg-violet-100//label/divlabel classmt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600input typecheckbox classaccent-violet-500 checked/spanYes, send me all your stupid updates/span/label
/form可以获得如下效果为选择文件前选择文件后打印修饰符我们添加了 print 修饰符使得你可以在用户打印你的网站时如何展现divarticle classprint:hiddenh1My Secret Pizza Recipe/h1pThis recipe is a secret, and must not be shared with anyone/p!-- ... --/articlediv classhidden print:blockAre you seriously trying to print this? Its secret!/div
/div比如上述的代码逻辑为在打印模式下第一个 article 块不展示而 div 块展示。现代 aspect ratio API我们添加了原生的 aspect ratio ****属性的支持因为现在浏览器的支持度已经非常高了即我们可以获得比较完美的横纵比。比如如下代码可以设置视频的最佳横纵比iframe classw-full aspect-video ... srchttps://www.youtube.com/.../iframe上述代码得到如下结果好看的下划线样式我们现在也支持修改下划线的颜色、粗细等属性了~如下面的代码pI’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings ata href# classunderline decoration-sky-500 decoration-2My Company, Inc/a. Outside of work, Ilike to a href# classunderline decoration-pink-500 decoration-dotted decoration-2watch pod-racing/aand have a href# classunderline decoration-indigo-500 decoration-wavy decoration-2light-saber/afights.
/p可以得到如下的效果RTL 与 LTR 修饰符我们也加入了对 RTL从右到左与 LTR从做到右等多方向布局的实验性支持如下代码div classgroup flex items-centerimg classshrink-0 h-12 w-12 rounded-full src... alt /div classltr:ml-3 rtl:mr-3p classtext-sm font-medium text-gray-700 group-hover:text-gray-900.../pp classtext-sm font-medium text-gray-500 group-hover:text-gray-700.../p/div
/div可以获得如下效果Portrait 与 Landscape 修饰符我们也添加了在不同屏幕方向的修饰符支持如 portrait 竖屏、landscape 横屏修饰符使得你可以通过不同的修饰符控制在对应屏幕方向上的样式divdiv classportrait:hidden!-- ... --/divdiv classlandscape:hiddenpThis experience is designed to be viewed in landscape. Please rotate yourdevice to view the site./p/div
/div任意值辅助类支持虽然看起来不太合理但是我们依然添加了任意 CSS 值的 Tailwind 辅助类并使得你可以结合 hover 、lg 等修饰符使用div class[mask-type:luminance] hover:[mask-type:alpha]!-- ... --
/div或者像 56px 或者 44px 这种任意值与 lg 修饰符一起使用div class[--scroll-offset:56px] lg:[--scroll-offset:44px]!-- ... --
/div使用 CDN 来使用 Tailwind目前没有一个很好的基于 CSS 的 CDN 方式来使用 Tailwind CSS v3.0所以我们构建了一个 JavaScript 库来帮助你使用它!DOCTYPE html
html langenheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleExample/titlescript srchttps://cdn.tailwindcss.com//script/headbody!-- --/body
/html这种方式仅限于在开发环境下使用或者当你想构建一个 demo 或者想要尝试一个有趣的想法时你可以这样使用。只需要在任何想要使用 Tailwind 特性的 HTML 文档里添加 script 标签来引用 https://cdn.tailwindcss.com/ 即可。以上就是 TailwindCSS v3.0 更新的全部特性了看到这里你觉得 TailwindCSS v3.0 怎么样呢你做好将其用于生产、或者加入构建你下一个应用时的工具箱的准备了往期推荐虚幻引擎5上的《黑客帝国》全新体验爱了爱了元宇宙真的是割韭菜吗Redis会遇到的坑你踩过几个核弹级漏洞把log4j扒给你看点分享点收藏点点赞点在看
