Question 298509 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Tailwind color classes not working in <Link> / <NavLink> elements in React

why cant I change the color for the mention elements without using inline styling? I would like to use only tailwind classes instead of inline.

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}

*{
    box-sizing: border-box;
}

body{
    background-color: #000;
    margin:0;
    padding: 24px 5% 8px 5%;
    min-height: 100%;
}

a{
    color: white;
}

NavBar component (jsx):

import { Link, NavLink } from 'react-router-dom'

export const NavCard = () => {
    return (
        <nav className='bg-custom-black flex items-center justify-between max-w-7xl mr-auto ml-auto py-4 px-8 rounded-full'>
            <Link to='/' className='no-underline text-xl font-semibold'>
                rogelio romo.
            </Link>
            <div className='text-xl font-semibold'>
                <NavLink style={{color: '#22C55E'}} className='no-underline px-6'> home. </NavLink>
                <NavLink style={{color: '#8a8a93'}} className='no-underline px-6'> projects. </NavLink>
                <NavLink style={{color: '#8a8a93'}} className='no-underline px-6'> contact. </NavLink>
            </div>
        </nav>
    )
}

If i don’t declare the anchor with its css rules in the index.css file, Preflight sets by default the inherit color of the parent.

Tags:

2

Answers


  1. 0

    Tailwind provides utility classes and a way to add custom text colors. Read more on handling font colors on the docs

    @tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}

*{
    box-sizing: border-box;
}

body{
    background-color: #000;
    margin:0;
    padding: 24px 5% 8px 5%;
    min-height: 100%;
}


    import { Link, NavLink } from 'react-router-dom'

export const NavCard = () => {
    return (
        <nav className='bg-custom-black flex items-center justify-between max-w-7xl mr-auto ml-auto py-4 px-8 rounded-full'>
            <Link to='/' className='text-white no-underline text-xl font-semibold'>
                rogelio romo.
            </Link>
            <div className='text-xl font-semibold'>
                <NavLink className='text-[#22C55E] no-underline px-6'> home. </NavLink>
                <NavLink className='text-[#8a8a93] no-underline px-6'> projects. </NavLink>
                <NavLink className='text-[#8a8a93] no-underline px-6'> contact. </NavLink>
            </div>
        </nav>
    )
}
    Login or Signup to reply.
  2. 0

    In Tailwind CSS, you can use the text- utility classes to set the text color. Instead of using inline styling, you can define the text colors directly in your Tailwind CSS classes. Here’s how you can modify your NavCard component:

    import { Link, NavLink } from 'react-router-dom';

export const NavCard = () => {
  return (
    <nav className='bg-custom-black flex items-center justify-between max-w-7xl mr-auto ml-auto py-4 px-8 rounded-full'>
      <Link to='/' className='no-underline text-xl font-semibold text-white'>
        rogelio romo.
      </Link>
      <div className='text-xl font-semibold'>
        <NavLink className='no-underline px-6 text-green-500'> home. </NavLink>
        <NavLink className='no-underline px-6 text-gray-500'> projects. </NavLink>
        <NavLink className='no-underline px-6 text-gray-500'> contact. </NavLink>
      </div>
    </nav>
  );
};

    In this example, I replaced the inline styling with Tailwind CSS utility classes. The text-white class sets the text color to white, and the text-green-500 and text-gray-500 classes set the text color for the specific links. You can adjust the color classes according to your desired colors.

    This approach is more in line with the utility-first philosophy of Tailwind CSS and avoids the need for inline styles in your components.

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

Back To Top
Search