Redmi Pad評測：紅米充滿野心的一次嘗試
從Note系列到K系列，從藍牙耳機到筆記本電腦，紅米不知不覺之間也已經形成了自己頗有競爭力的產品體系，在中端和次旗艦市場上甚至要比小米新機的表現來得更好，正所謂“大丈夫生居
Tailwind 4.0 將會更快更好。
安裝 Tailwind 版本 4 的包：
$ npm install tailwindcss@next @tailwindcss/vite@nextVite 配置:
import tailwindcss from '@tailwindcss/vite';import { defineConfig } from 'vite';export default defineConfig({ plugins: [tailwindcss()],});最后，在你的主 CSS 文件（app.css）中導入 Tailwind
@import "tailwindcss";那么，現在讓我們關注一下 Tailwind 版本 4 中的新功能：
在以前的版本中，我們需要創建 tailwind.config.js 并在全局 CSS 文件中添加三個指令：
@tailwind base;@tailwind components;@tailwind utilities;現在，只需要一個指令，而且我們將使用帶有特殊指令 @theme 的 CSS 變量來代替配置文件，如下所示：
@import "tailwindcss";@theme { --font-family-display: "Satoshi", "sans-serif"; --breakpoint-4xl: 1920px; --color-neon-pink: oklch(71.7% 0.25 360); --color-neon-lime: oklch(91.5% 0.258 129); --color-neon-cyan: oklch(91.3% 0.139 195.8);}特殊的 @theme 指令告訴 Tailwind 根據這些變量提供新的實用程序和變體，讓你可以在標記中使用類似 4xl:text-neon-lime 的類：
<div class="max-w-lg 4xl:max-w-xl"> <h1 class="font-display text-4xl"> Data to <span class="text-neon-cyan">enrich</span> your online business </h1></div>添加新的 CSS 變量的行為類似于早期版本框架中的 extend，但你可以使用 --color-*: initial 清除命名空間，然后定義所有自定義值：
main.css：
@theme { --color-*: initial; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-green-800: #3f6212; --color-green-900: #365314; --color-green-950: #1a2e05;}如果你不想明確清除默認主題并且更愿意從頭開始，你可以直接導入 tailwindcss/preflight 和 tailwindcss/utilities 來跳過導入默認主題：
main.css：
@import "tailwindcss";@import "tailwindcss/preflight" layer(base);@import "tailwindcss/utilities" layer(utilities);@theme { --color-*: initial; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; /* ... */ --color-green-800: #3f6212; --color-green-900: #365314; --color-green-950: #1a2e05;}通過這種方式，你可以更靈活地定制 Tailwind 的主題和實用程序，使其更適應你的項目需求。
新的架構使得可以組合作用于其他選擇器的變體，例如 group-*、peer-、has- 和新的 not-*。
在早期版本中，像 group-has-* 這樣的變體在框架中被顯式定義，但現在 group-* 可以與現有的 has-* 變體組合，并且可以與其他變體（如 focus）組合：
index.html：
<div class="group"> <div class="group-has-[&:focus]:opacity-100"> <div class="group-has-focus:opacity-100"> </div></div>通過這種方式，你可以創建更靈活、更強大的樣式組合，從而更好地適應復雜的設計需求。例如，當一個元素獲得焦點時，使其父元素的透明度變為 100%。
這個新功能大大增強了 Tailwind CSS 的可組合性和靈活性，使開發者能夠更加精細地控制樣式和交互行為。
Tailwind CSS 4 是一個強大且多功能的工具，適用于希望簡化工作流程和創建美觀、響應式網站的 Web 開發人員。憑借其增強的性能、擴展的調色板、改進的定制、新的實用工具類以及對無障礙性的關注，Tailwind CSS 4 將成為開發人員工具包中的必備工具。無論你是在構建小型項目還是大型應用程序，Tailwind CSS 4 都提供了實現你的 Web 設計所需的功能和靈活性。
本文鏈接：http://m.www897cc.com/showinfo-26-90352-0.htmlTailwind 4.0 即將發布，看起來很不錯！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號