How to style nested elements based on parent class using tailwind css

In Tailwind CSS, you can utilize the @apply directive to define component styles or apply variants such as hover and focus to style nested elements based on their parent classes. However, standard Tailwind CSS does not natively support styling nested elements based on parent selectors, primarily because it is a utility-first framework that encourages applying utility classes directly to HTML elements.

However, Tailwind CSS provides the @layer directive, which allows you to organize your CSS and leverage Tailwind's JIT mode to style nested selectors. This is achieved by combining parent and child selectors. Here is an example:

css
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md;

    .card-title {
      @apply text-lg font-bold;
    }

    .card-content {
      @apply text-base;
    }

    .card-footer {
      @apply text-sm text-gray-500;
    }
  }
}

In this example, .card-title, .card-content, and .card-footer represent styles for elements nested within the .card class. These styles are processed alongside Tailwind CSS during the build process and will only apply when the parent class .card is present.

It's important to note that this approach requires enabling JIT mode in tailwind.config.js, as standard mode does not support complex nesting.

Additionally, if you prefer using preprocessors like PostCSS, you can integrate Tailwind CSS plugins such as tailwindcss/nesting, which enables you to write nested rules using standard CSS nesting syntax, thereby simplifying the process of styling nested elements based on parent classes.