tailwindcss 反應 class 文本顏色不起作用

Question

所以我正在用 react 學習 tailwindcss，我一直在嘗試使用 useEffect 鈎子在身體上應用不同的類。 我在tailconfig.js 上做了一個小配置

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{html,js}', './src/components/*.(js)'],
    theme: {
        extend: {},
        colors: {
            body: '#DCDCDC',
            'selected-text': '#A3A3FF',

            theme: '#3F3FFF',
            nav: '#404053',
            secondary: '#9191A4',
            badge: '#3F3F51',
            'input-border': '#565666',
            input: '#2A2A35',
        },
        fontFamily: {
            poppins: ["'Poppins'", 'sans-serif'],
        },
    },
    plugins: [],
}

這是我的 App.js

import { useEffect } from 'react'

function App() {
    useEffect(() => {
        document.body.classList.add('text-white', 'bg-color', 'font-poppins')

        // 👇️ checking if body element contains a class
        if (document.body.classList.contains('font-poppins')) {
            console.log('body tag contains class')
        }
    }, [])

    return <p className="text-white">Test</p>
}

export default App

這是我的 index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import AppNavbar from './components/AppNavbar'
import reportWebVitals from './reportWebVitals'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <AppNavbar /> //this is another component
        <App />
    </React.StrictMode>
)

當我啟動應用程序並檢查控制台時，這些類已添加到 body 和 p 標簽中，但“text-white”class 不起作用。我做錯了什么？

Answer 1

當您放置colors或任何其他自定義值（如fontFamily ）時，這將覆蓋tailwindcss值，這就是text-white不起作用的原因，要解決此問題，您需要在extend中插入自定義值，如下所示：

extend: {
      colors: {
        body: "#DCDCDC",
        "selected-text": "#A3A3FF",
        theme: "#3F3FFF",
        nav: "#404053",
        secondary: "#9191A4",
        badge: "#3F3F51",
        "input-border": "#565666",
        input: "#2A2A35",
      },
      fontFamily: {
        poppins: ["'Poppins'", "sans-serif"],
      },
    },