Question 178271 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – can I apply multiple classes to childrens at once in tailwind?

jsx code:

 <div className="[&>button]:text-white,px-6 flex gap-2">
    <button>Right</button>
    <button>Left</button>
    <button>Circle</button>
    <button>Square</button>
    <button>Stop</button>
</div>

I was wondering if there was a way in tailwind that would allow me to use multiple classes on all the buttons at once in oneline in react?

so all the btns can take classes "text-white px-6 and also give the parent div his own classes "flex gap-2"

rather than typing [&>button]:text-white [&>button]:px-6

Tags:

2

Answers


  1. 0

    Yes, you can apply multiple classes to children elements at once in Tailwind CSS. Here’s an example:

    <div class="flex">
  <div class="bg-red-500 text-white">Child 1</div>
  <div class="bg-blue-500 text-white">Child 2</div>
  <div class="bg-green-500 text-white">Child 3</div>
</div>
    Login or Signup to reply.
  2. 0

    Yes, you can use the classNames utility from the classnames library in React to apply multiple classes to your buttons in a single line. Here’s an example of how you can use it:

    import classNames from 'classnames';

...

<div className={classNames('text-white', 'px-6', 'flex', 'gap-2')}>
    <button>Right</button>
    <button>Left</button>
    <button>Circle</button>
    <button>Square</button>
    <button>Stop</button>
</div>

    In the above code, the classNames function takes multiple class names as arguments and returns a string with all the class names concatenated together. You can pass each individual class name as a separate argument to the function.

    Alternatively, you can also pass an array of class names to the classNames function:

    <div className={classNames(['text-white', 'px-6', 'flex', 'gap-2'])}>
    ...
</div>

    Both approaches will produce the same result, allowing you to apply multiple classes to your buttons in a single line.

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

Back To Top
Search