-apply-directive-not-working-with-parent-element-inheritance-rscnk Tailwind Templates

Apply Directive Not Working With Parent Element Inheritance Rscnk

Tailwind's @apply directive doesn't seem to work when applying custom styles from a child component to its parent. The parent element doesn't inherit the applied styles.

Bug Report: @apply Directive Inheritance Issue in Tailwind CSS

This report describes a problem encountered when using Tailwind CSS's @apply directive to apply styles from a child component to its parent element. The expected behavior is that the parent element should inherit the styles applied using @apply, but this is not happening consistently.

Steps to Reproduce

  1. Create a child component with custom styles defined using @apply.
  2. Include this component in a parent component.
  3. Observe that the parent component does not inherit the styles applied by @apply in the child component.

Expected Behavior

The parent element should inherit the styles defined in the child component using the @apply directive.

Actual Behavior

The parent element does not inherit the styles. The styles are only applied to the child component.

Possible Solution

The issue may stem from the way Tailwind processes styles, or potential conflicts between component styles and global styles. Possible solutions involve using JavaScript to inject styles, or reviewing the CSS specificity of applied styles to ensure they are correctly cascading.

Top categories

Loading Svelte Themes