tailwindcss react class text-color not working

Question

so i'm learning tailwindcss with react and I've been trying to apply different classes on the body using the useEffect hook. I did a small configuration on my 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: [],
}

This is my 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

and this is my 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>
)

When i start the application and check the console , the classes have been added to the body and p tags but the 'text-white' class isn't working.What am i doing wrong ?

Dhaifallah · Accepted Answer · 2022-08-31 02:59:33Z

1

When you put the colors or any other custom values also like fontFamily this will override tailwindcss values, that's why text-white isn't working, to fix this you need to insert your custom values inside extend like this :

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"],
      },
    },

answered Aug 31, 2022 at 2:59

Dhaifallah

1,8851 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

tailwindcss react class text-color not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related