How to style nested elements based on parent class using Tailwind CSS?

user_19458784 0
Viewed 628

Let's say I want all the links inside white card to be black, and all the links inside orange cards to be white. I can easily do in pure CSS:

.card--primary {
  background-color: white;

  a {
    color: black
  }
}

.card--danger {
  background-color: orange;
  
  a {
    color: white;
  }
}

But how can I achieve similar behaviour using Tailwind (or other CSS utility frameworks)?

tailwind-css css
2 Answers

This is possible in tailwind 3.1 with the addition of the arbitrary variants feature. The way you would do this is by using a selector on the parent div:

<div className="card--primary bg-white [&>a]:text-black" >
  <a/>
  <a/>
<div/>

<div className="card--danger bg-orange [&>a]:text-white" >
  <a/>
  <a/>
<div/>
user_185693400

YOu can do this way

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative bg-slate-100 flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-9">
<div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base">
          <p>White Card with all black links:</p>
          <ul class="space-y-4">
            <li class="flex items-center">
              
              <a href="https://tailwindcss.com"> First Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Second Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Third Link</a>
            </li>
          </ul>
          </div>
       
      </div>
    </div>
  </div>


  <div class="relative bg-orange-700 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base text-white">
          <p>Orange Card with all white links:</p>
          <ul class="space-y-4">
            <li class="flex items-center">
              
              <a href="https://tailwindcss.com"> First Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Second Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Third Link</a>
            </li>
          </ul>
          </div>
       
      </div>
    </div>
  </div>
</div>

user_109623640
Related