Tailwind

在一個專案中，我使用 <textarea> 欄位在表單中獲取工作的描述，然後將其存儲在數據庫中。 現在，這個描述並沒有被解釋為 HTML，當我將它添加到頁面中時，瀏覽器並沒有尊重空格和換行。 我希望獲得這樣的顯示效果： 但我得到了這樣的顯示效果： 解決方法是添加以下 CSS 屬性： white-space: pre-wrap; 在 Tailwind 中，對應的類名為 whitespace-pre-wrap。

雖然不常發生，但有時候我會考慮如何在 Tailwind 中對子元素應用樣式。 下一次遇到這種情況，我就可以參考這篇部落格文章來解決。 你可以使用以下這個類別名稱將 bg-gray-300 這個樣式套用到當前元素的所有子元素上： [&>\*]:bg-gray-300 像這樣使用： <div class="[&>\*]:bg-gray-300"> .... </div>

我想在 Tailwind 中使用動態顏色，使用 JSX 中的這種語法： bg-${color}-500 但它並未應用於頁面，因為 Tailwind 在程式碼中找不到類似 bg-red-500 的文字，所以該程式碼未加入最終的 CSS 中。 因此，我改成在 switch 中列舉所有可能的顏色選項，然後生成類別： const getColorClass = (color) => { switch (color) { case 'green': return 'text-green-500' case 'blue': return 'text-blue-500' case 'red': return 'text-red-500' default: return '' } } 並在類別中使用此函數： <h1 className={`mt-10 ${getColorClass(color)}`}> ... 一個「快速」的方法是將可能需要的類別寫在註解中，像這樣： /* possible Grid values are grid-cols-1 grid-cols-2 grid-cols-3 */ <div className={`grid grid-cols-${data[0].length}`}>

我總是容易忘記如何使用 Flexbox 將文字垂直置中對齊。 你需要一個包含下列 CSS 指令的容器： display: flex; align-items: center; justify-content: center; 在 Tailwind 中，這被翻譯成 flex items-center justify-center 這些類別。 範例： <div class='flex items-center justify-center'> <button>新增</button> </div>

我遇到了這個問題。 我想在一個頁面中嵌入YouTube視頻，但由於需要使用iframe，我無法弄清如何正確地設置其高度和寬度，以在流動佈局中正常工作。 過了一段時間，我找到了解決方案。 使用React和Tailwind的代碼： <iframe className="aspect-video w-full" src={"Youtube嵌入URL"}> </iframe> 不使用React的Tailwind代碼： <iframe class="aspect-video w-full" src="Youtube嵌入URL"> </iframe> 純HTML和CSS： <iframe style="aspect-ratio: 16 / 9; width: 100%" src="YouTube嵌入URL"></iframe> YouTube嵌入URL的格式如下： https://www.youtube.com/embed/VIDEO_ID 因此，如果您有視頻URL，您需要將其更改為相應的格式，例如： videourl.replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/') 一些舊的教程仍然列出使用絕對/相對方式的技巧，例如： <style> .videocontainer { position:relative; padding-bottom:56.25%; } .videocontainer iframe { width:100%; height:100%; position:absolute; } </style> <div class="videocontainer"> <iframe src="YouTube嵌入URL"></iframe> </div> 我更偏愛更簡單的aspect-ratio屬性。

問題：您在專案中引用 Tailwind，但在 VS Code 中卻收到「Unknown at rule @tailwindcss(unknownAtRules)」的警告訊息： 以下是如何解決此問題的步驟。 打開設定檔，搜尋關鍵字「unknown」，第一個結果應該是您要尋找的：CSS > Lint: Unknown At Rules： 將該選項修改為 ignore（忽略）： 完成！

如何解決在 Next.js 網站安裝 Tailwind 時出現「無法解析相依性樹」錯誤的問題 在設置新的 Next.js 專案並使用 Tailwind 時，我遇到了一個問題。 這個問題可能只是一個暫時性的錯誤，由於配置問題和庫的版本，但我想寫下來以便其他人遇到相同問題時能夠參考。 我運行了以下命令： npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes 換句話說，需要 PostCSS 8.1.13，但 Next 安裝的是 8.1.7。 所以我運行了以下命令： npm install [[email protected]](/cdn-cgi/l/email-protection) [[email protected]](/cdn-cgi/l/email-protection) postcss-preset-env postcss-flexbugs-fixes 這樣就解決了問題！