CODEWITHSUNDEEP
javascriptreactjstailwind-css
rami benromdhane
rami benromdhane

Reputation: 5

tailwindcss react class text-color not working

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 ?

Upvotes: 0

Views: 819

Answers (1)

Dhaifallah
Dhaifallah

Reputation: 1825

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

Upvotes: 1

Related Questions