时间：2023-04-21 13:39:02 | 来源：网站运营
时间：2023-04-21 13:39:02 来源：网站运营
[翻译]Tailwind CSS v3.0：由于官方文档是基于mdx渲染的，所以本文样例采用截图呈现
上面提到的视频可以看我发到B站的中字版本，讲得比这个blog要详细很多Tailwind CSS v3.0 一定是我们有史以来最激动人心的版本，包括以下改进:
在线咨询
variants、支持任意值、更好的浏览器性能，等等。npm install -D tailwindcss@latest postcss autoprefixer...或者前往Tailwind Play，直接在浏览器中尝试最新的功能。variant 配置成为过去式。<button class="bg-cyan-500 **shadow-lg shadow-cyan-500/50** ..."> Subscribe</button><button class="bg-blue-500 **shadow-lg shadow-blue-500/50** ..."> Subscribe</button><button class="bg-indigo-500 **shadow-lg shadow-indigo-500/50** ..."> Subscribe</button>在阴影颜色文档中了解更多。<div class="**snap-x** ..."> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div></div>从新的滚动边距工具开始，来了解整个 API。<div class="**columns-1** **sm:columns-3** ..."> <p>...</p> <!-- ... --></div>在columns文档中了解更多--也可以查看新的break-after/inside/before实用工具。accent-color属性的支持，以及对文件输入按钮样式的修饰符，使你比以往任何时候都更容易在原生表单控件上发挥自己的作用。<form> <div class="flex items-center space-x-6"> <div class="shrink-0"> <img class="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" /> </div> <label class="block"> <span class="sr-only">Choose profile photo</span> <input type="file" class="block w-full text-sm text-slate-500 **file:mr-4** **file:py-2** **file:px-4** **file:rounded-full** **file:border-0** **file:text-sm** **file:font-semibold** **file:bg-violet-50** **file:text-violet-700** **hover:file:bg-violet-100** " /> </label> </div> <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600" > <input type="checkbox" class="**accent-violet-500**" checked /> <span>Yes, send me all your stupid updates</span> </label></form>在强调色和文件输入按钮文档中了解更多。print修饰符可以让你决定网站在人们打印时的样子。<div> <article class="**print:hidden**"> <h1>My Secret Pizza Recipe</h1> <p>This recipe is a secret, and must not be shared with anyone</p> <!-- ... --> </article> <div class="hidden **print:block**"> Are you seriously trying to print this? It's secret! </div></div>在打印样式文档中了解更多。aspect-ratio属性的支持，它正开始得到浏览器的支持。<iframe class="w-full **aspect-video** ..." src="https://www.youtube.com/..."></iframe>在长宽比文档中了解更多。<p> I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at <a href="#" class="underline **decoration-sky-500 decoration-2**" >My Company, Inc</a >. Outside of work, I like to <a href="#" class="underline **decoration-pink-500 decoration-dotted decoration-2**" >watch pod-racing</a > and have <a href="#" class="underline **decoration-indigo-500 decoration-wavy decoration-2**" >light-saber</a > fights.</p>在文本装饰颜色、文本装饰样式、文本装饰厚度和文本下划线偏移 文档中了解更多。rtl和ltr修饰符增加了对多方向布局的实验性支持。<div class="group flex items-center"> <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" /> > <div class="ltr:ml-3 rtl:mr-3"> <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900" dark-class="text-sm font-medium text-slate-300 group-hover:text-white" > ... </p> <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700" dark-class="text-sm font-medium text-slate-500 group-hover:text-slate-300" > ... </p> </div></div>在RTL 支持文档中了解更多。portrait和landscape修饰符，当视口处于特定方向时，有条件地添加样式。<div> <div class="portrait:hidden"> <!-- ... --> </div> <div class="landscape:hidden"> <p> This experience is designed to be viewed in landscape. Please rotate your device to view the site. </p> </div></div>此功能的文档的内容比本帖的这部分内容还要少。hover、lg等修饰符结合起来。<div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div>这就是内联样式想成为的样子。在任意属性 文档中了解更多。<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Example</title>+ <script src="https://cdn.tailwindcss.com/"></script> </head> <body> <!-- --> </body> </html>将该脚本标签添加到任何 HTML 文档中，您就可以在浏览器中使用 Tailwind 的每一项功能。它仅用于开发目的，但它确实是一种有趣的方式，可以建立简单的演示，或在一个新的想法上进行探索。关键词：翻译
