Question 45930 in CSS Question posted in
Some basic documentation can be found here.

TailwindCSS colors don't update colors

I’m trying to make active buttons on the navbar so when an section is active it’s highlighted.
For the colors I’m using custom colors and to change the state I’m using useState.
The problem is the buttons are working fine but Tailwind doesn’t "stick" the active color the buttons.In the browser console i can see that useState updates the class text but nothing really shows in reality.

The Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'primery':'#01092E',
        'secondary': '#011749',
        'accent':'#6948B9',
      },
      backgroundImage: {
        "hero-pattern": "url('/src/assets/herobg.jpg')",
      },

      
    },
  },
  plugins: [],
}

This is my component code

<ul className="list-none hidden sm:flex justify-center gap-10">
          {navLinks.map((nav) => (
            <li
              key={nav.id}
              className={`text-white hover:text-accent cursor-pointer text-[18px] font-medium px-4 
              ${active === nav.title ? " text-accent " : " text-white "}`}
            >
              <Link
                to={nav.id}
                smooth={true}
                duration={500}
                offset={-80}
                onClick={() => setActive(nav.title)}
              >
                {nav.title}
              </Link>
            </li>
          ))}
        </ul>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    My problem was that i was passing the same color 2 times. Once in the className and once in the condition.


  2. 0

    I am not sure I understand the question but if the problem is that your dynamically added class isn’t being registered it is becasue you need to add a safelist to your config file:

     safelist: [
   'text-accent',
    'text-white
]

    tailwind docs safe-listing

    Login or Signup to reply.
  3. 0

    The problem is that you are dynamically adding the tailwindCSS classes in the div. TailwindCSS doesn’t allow you to generate classes dynamically. So when you use the following to generate the class…

    `className={`text-white hover:text-accent cursor-pointer text-[18px] font-medium px-4 ${active === nav.title ? " text-accent " : " text-white "}`}

    …TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.

    Instead, you must include the full name of the class in your source code. You can return the full value by using a function like this

    function  myDecoStyle(active) {
if(active === nav.title) 
   return "text-white hover:text-accent cursor-pointer text-[18px] font-medium px-4 text-accent ";
else 
   return "text-white hover:text-accent cursor-pointer text-[18px] font-medium px-4 text-white ";
}

    where active is the state you are passing here.

    By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.

    And use it like

               <li
              key={nav.id}
              className={`${myDecoStyle(active)}`}
            >
            <Link
                to={nav.id}
                smooth={true}
                duration={500}
                offset={-80}
                onClick={() => setActive(nav.title)}
              >
                {nav.title}
              </Link>
            </li>

    Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search