2

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

ok i
  • 35
  • 5
  • 2
    Does this answer your question? [How to access all the direct children of a div in tailwindcss?](https://stackoverflow.com/questions/67119992/how-to-access-all-the-direct-children-of-a-div-in-tailwindcss) – Konrad May 30 '23 at 10:17
  • https://stackoverflow.com/questions/73524088/is-there-a-way-to-chain-multiple-tailwind-css-classes-on-a-single-hover-instance – Konrad May 30 '23 at 11:18
  • 1
    not on the way that tailwind is built. There are hacks built to enable grouping of variants but I do not recommend. The verbosity of tailwind is the tradeoff you get by not having to deal with the stylesheet directly. https://akashhamirwasia.com/blog/variant-groups-in-tailwindcss/ – Ricardo Silva May 30 '23 at 12:03

2 Answers2

1

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>
Omar
  • 78
  • 8
-2

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.

Mr Sindhu
  • 316
  • 2
  • 11
  • 1
    Your 8 most recent answers all appear likely to have been entirely or partially written by AI (e.g., ChatGPT). Please be aware that [posting of AI-generated content is banned here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. – NotTheDr01ds Jun 12 '23 at 11:32
  • 1
    **Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. – NotTheDr01ds Jun 12 '23 at 11:32