[英]Tailwind css, how to set default font color?
我在我的項目中使用 tailwind css，由於我們的應用程序 styles 我們使用的是默認字體顏色，但是我似乎無法找到如何在 tailwind 中執行此操作，文檔頁面僅討論擴展調色板，但沒有討論如何設置默認顏色。
關於如何實現這一目標的任何想法？
選項很少，你可以在<body>或<html>標簽中添加 class ：
<!doctype html>
<html lang="en">
<body class="text-green-500">
</body>
</html>
或者你可以在你的index.css文件中擴展基礎層：
@tailwind base;
@layer base {
html {
@apply text-green-500;
}
}
@tailwind components;
@tailwind utilities;
讓我們檢查一個Tailwind 播放示例
我最終在全局 css 文件上以最愚蠢的方式解決了這個問題：
html {
@apply text-gray-800
}
不漂亮，但至少我可以使用順風課程
您可以將屬性添加到body標簽嗎？
<body class="text-gray-800"></body>
我在我的tailwind.config.js文件中嘗試執行此操作時來到這里。
以下是任何需要它的人的方法：
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({addBase, theme}) => {
addBase({
// or whichever color you'd like
'html': {color: theme('colors.slate.800')},
});
})
],
}
只需在您的入口文件中導入一個普通樣式表並在那里執行。 例如
p, h1, h2, h3, h4, h5, h6 {
color: green;
}
如果您使用的是 React 等客戶端框架，您還可以創建 Typography 組件。 通常我首先創建一個 Text 組件，該組件具有我喜歡的字體大小、字體粗細、顏色和行高。 然后，我從該組件創建更多組件，例如 Paragraph、Header、Display...等每個組件都有自己的大小、重量和行高。 這樣，我可以利用 JS（假設我想向 Text 組件添加新的道具），並且將來重構東西會更容易，因為我所有的 Typography 組件都基於一個 Text 組件。
如何使用tailwind CSS更改React JS（Next JS）中所有頁面的默認屏幕背景顏色
[英]How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS
如何在solid-js和Tailwind CSS中設置特定組件的背景顏色？
[英]How to set the background color of a specific component in solid-js and Tailwind CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.