如需了" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > [翻譯]Tailwind CSS v3.0

[翻譯]Tailwind CSS v3.0

時間：2023-04-21 13:39:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-04-21 13:39:02 來源：網(wǎng)站運(yùn)營

[翻譯]Tailwind CSS v3.0：

文檔原文：

由于官方文檔是基于mdx渲染的，所以本文樣例采用截圖呈現(xiàn)

Tailwind CSS v3.0

Tailwind CSS v3.0 來了--帶來了令人難以置信的性能提升，巨大的工作流程改進(jìn)，以及數(shù)量驚人的新功能。

如需了解一些最酷的新功能，請查看我們 YouTube 頻道上的"Tailwind CSS v3.0 有什么新功能"視頻。

上面提到的視頻可以看我發(fā)到B站的中字版本，講得比這個blog要詳細(xì)很多
Tailwind CSS v3.0 一定是我們有史以來最激動人心的版本，包括以下改進(jìn):

再加上一個漂亮的、全新的文檔，每一頁都有改進(jìn)的內(nèi)容和例子。

從 npm 獲取最新版本，即刻開始使用 Tailwind CSS v3.0。

npm install -D tailwindcss@latest postcss autoprefixer...或者前往Tailwind Play，直接在瀏覽器中嘗試最新的功能。

Tailwind CSS v3.0 是框架的一個新的主要版本，有一些小的 breaking changes，但我們已經(jīng)非常努力地使升級過程盡可能順利，對于大多數(shù)項目，你應(yīng)該能夠安裝 v3.0 而不做任何修改。

例如，Tailwind UI可能是地球上最大的 Tailwind 項目，每一個模板都與 V2 和 V3 完全兼容，不需要任何改變。

關(guān)于遷移到 v3.0 的更多細(xì)節(jié)和步驟說明，請查看升級指南。

JIT，無時不在

早在三月，我們就推出了全新的JIT 引擎，它帶來了巨大的性能提升，解鎖了令人興奮的新功能，如任意值，并使復(fù)雜的 variant 配置成為過去式。

在 Tailwind CSS v3.0 中，新引擎已經(jīng)穩(wěn)定，并取代了經(jīng)典引擎，所以每個 Tailwind 項目都可以從這些改進(jìn)中受益，開箱即用。

每種顏色都是開箱即用

在新引擎之前，我們在開發(fā)中總是不得不小心翼翼地處理 CSS 文件的大小，而我們必須做出的最大權(quán)衡之一就是謹(jǐn)慎地限制調(diào)色板。

在 v3.0 中，擴(kuò)展調(diào)色板中的每一種顏色都是默認(rèn)啟用的，包括青色、青色、天空、紫紅色、玫瑰色和 50 種灰色。

查看調(diào)色板以了解更多。

彩色陰影

多年來，人們一直要求我們提供彩色陰影，但要以一種可組合的方式支持它，并使之真正有意義，比我預(yù)期的要難得多。

在經(jīng)過大概五次錯誤的嘗試后，我們終于找到了一個我們喜歡的方法，現(xiàn)在 Tailwind CSS v3.0 包含了彩色陰影:

<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>在陰影顏色文檔中了解更多。

滾動捕捉 API

我們?yōu)?CSS Scroll Snap 模塊增加了一套全面的工具，讓你有能力直接在你的 HTML 中建立非常豐富的滾動抓取體驗。

<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。

多列布局

我們增加了對列的支持--報紙布局的那種。這些實(shí)際上是非常有用的，而且對于像頁腳導(dǎo)航布局這樣的事情也很有用。

<div class="**columns-1** **sm:columns-3** ..."> <p>...</p> <!-- ... --></div>在columns文檔中了解更多--也可以查看新的break-after/inside/before實(shí)用工具。

原生的表單控件樣式設(shè)計

我們增加了對新的accent-color屬性的支持，以及對文件輸入按鈕樣式的修飾符，使你比以往任何時候都更容易在原生表單控件上發(fā)揮自己的作用。

<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>在強(qiáng)調(diào)色和文件輸入按鈕文檔中了解更多。

打印修飾符

新的print修飾符可以讓你決定網(wǎng)站在人們打印時的樣子。

<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>在打印樣式文檔中了解更多。

現(xiàn)代長寬比 API

我們增加了對新的原生aspect-ratio屬性的支持，它正開始得到瀏覽器的支持。

<iframe class="w-full **aspect-video** ..." src="https://www.youtube.com/..."></iframe>在長寬比文檔中了解更多。

花式下劃線樣式

現(xiàn)在你可以改變下劃線的顏色、粗細(xì)等樣式。

<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 修飾符

我們用新的rtl和ltr修飾符增加了對多方向布局的實(shí)驗性支持。

<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修飾符，當(dāng)視口處于特定方向時，有條件地添加樣式。

<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>此功能的文檔的內(nèi)容比本帖的這部分內(nèi)容還要少。

任意的屬性

這些屬性可能是不支持的，但我們已經(jīng)使添加完全任意的 CSS 成為可能，你可以將其與hover、lg等修飾符結(jié)合起來。

<div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div>這就是內(nèi)聯(lián)樣式想成為的樣子。在任意屬性 文檔中了解更多。

發(fā)揮 CDN 的作用

沒有辦法為 Tailwind CSS v3.0 做一個合理的基于 CSS 的 CDN 構(gòu)建，所以我們不得不做一些不同的事情--我們建立了一個 JavaScript 庫。

<!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>將該腳本標(biāo)簽添加到任何 HTML 文檔中，您就可以在瀏覽器中使用 Tailwind 的每一項功能。它僅用于開發(fā)目的，但它確實(shí)是一種有趣的方式，可以建立簡單的演示，或在一個新的想法上進(jìn)行探索。

在Play CDN文檔中了解更多。

這就是 - Tailwind CSS v3.0! 今天就去新的文檔開始使用它吧。

對于每一個變化的全面清單，請查看 GitHub 上的changelog。

關(guān)鍵詞：翻譯

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉