Tailwind CSS

最近我一直在使用一個名為 Tailwind Fold 的 VS Code 擴展。 使用這個擴展，您可以決定在 JSX 和 HTML 檔案中預設隱藏所有類別，只有在點擊它們時才顯示出來： 這是原始檔案的樣子： 如您所見，它看起來更乾淨。 我通常將這個擴展設定為非啟用狀態，這樣我就能看到所有的類別，但是當我想要一個"清爽的外觀"時，我有一個快捷鍵可以隱藏所有的類別。 相當方便。

我有一個水平的項目列表，當一行文字有 2 行時，會有一些額外的空間，並且其 flex 兄弟元素會延伸到整個高度。 這是原始碼： <li class="flex"> <code class="flex-none text-sm whitespace-normal mr-2 mt-0.5 bg-white text-black p-1 "> {new Date(post.date).toString().slice(4, 11)} </code>{' '} <code class="flex-none text-sm whitespace-normal mr-2 bg-black text-white border p-1 "> {post.tag} </code> <a href={'/' + post.url + '/'}>{post.title}</a> </li> 為了修復這個問題，我在 code 區塊中添加了 self-start 類別，這在 Tailwind CSS 中應用了 CSS align-self: start;。

Flexbox 已經成為我喜歡的元素居中方式。 你只需要將一個元素包裹在 div 中，並設置 display: flex 和 justify-content: center。 <div class="wrapper"> ... </div> .wrapper { display: flex; justify-content: center; } 使用 Tailwind CSS 更加簡單，只需要添加 flex 和 justify-center 類名： <div class="flex justify-center"> ... </div>

在開發Next.js網站時，我有需要根據螢幕大小將一個React元件移動到不同位置的需求。 特別需要的是，我有一個側邊欄元件，我希望它在大螢幕上位於螢幕左側，在小螢幕上位於內容之前。 由於我結構化的HTML標記和CSS的安排，並不立即清楚如何在不重寫大部分元件的情況下進行這種轉換。 所以我找到了Tailwind提供的一個不錯的解決方案。 方法如下：我在螢幕上兩次添加了元件，對於"大螢幕"的部分，我給它分配了hidden xl:block類，對於小螢幕的部分，則給它分配了xl:hidden類： <div className="hidden xl:block"> <Sidebar /> </div> ... <div className="xl:hidden"> <Sidebar /> </div> 缺點當然是元件被呈現了兩次，但這是一個沒有邏輯的簡單呈現元件，這是一個妥協我可以接受的。

假設你已經設定好了使用Tailwind CSS的應用程式，你將擁有一個包含以下內容的CSS檔案： @tailwind base; @tailwind components; @tailwind utilities; 你可以前往Google Fonts網站，選擇一個字體，並且會提供你一個用於匯入該字體的CSS @import。 舉個例子，如果你選擇了Inter字體以及各種字重，將會獲得以下的@import語句： @import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap'); 將這段語句加入到CSS檔案中，並且再加上以下內容： @layer base { html { font-family: Inter, system-ui, sans-serif; } } 最終，你的CSS檔案會變成這樣： @tailwind base; @tailwind components; @tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap'); @layer base { html { font-family: Inter, system-ui, sans-serif; } } 現在你的預設字體就是Inter字體了，你可以使用font-bold或者font-medium來設置不同大小的字體。

在你的主題文件夾內運行以下命令： npm init -y 然後安裝 Tailwind CSS 作為開發依賴： npm install -D tailwindcss 使用以下命令初始化 Tailwind： npx tailwindcss init 這將創建 tailwind.config.js 文件。在編輯器中打開該文件，並按以下方式填寫 content 屬性，其中包含主題的佈局文件： module.exports = { content: ['content/**/*.md', 'layouts/**/*.html'], theme: { extend: {}, }, plugins: [], } 現在在主題文件夾中創建 tailwind.css 文件，並添加以下內容： @tailwind base; @tailwind components; @tailwind utilities; 現在打開 package.json，在 scripts 部分添加 build 和 watch 命令： { "name": "valley", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "npx tailwindcss -i ./tailwind.css -o ....