Is it possible to use the new *: to apply a class defined in the TailwindCSS 4.0 beta config?

[nstuyvesant]

I want to have all classes in this example including the custom class I created in the TailwindCSS 4.0 config (@layer utilities) sit on the parent div because the contents of the div is going to be variable.

Here is my example:
https://play.tailwindcss.com/Gno7K0pfyV

Is there a way to move the text-shadow class to the parent div?

Sorry, I'm very new to TailwindCSS.

[nstuyvesant]

Arg... it was very simple. I was trying to find more of a TailwindCSS way to do it vs. traditional CSS...
https://play.tailwindcss.com/m5mPRwz20V?file=css

This is how I defined the text-shadow class so I could apply it to the div:

@layer utilities {
  .text-shadow > * {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  }
}

[nstuyvesant]

In case this is helpful, here's the Svelte 5 component...

<script lang="ts">
	import { type Snippet } from 'svelte'
	interface Props {
		children?: Snippet
	}

	let { children }: Props = $props()
</script>

<div
	class="text-shadow tw:inline-flex tw:*:px-3 tw:*:py-1.5 tw:*:bg-gradient-to-b tw:*:from-yellow-500 tw:*:to-amber-500 tw:*:bg-repeat-x tw:*:text-white tw:*:border tw:*:border-yellow-600 tw:*:hover:bg-amber-500 tw:*:hover:bg-[position:0_-34px] tw:*:hover:border-yellow-600 tw:*:first:!rounded-l-md tw:*:first:rounded-r-none tw:*:last:rounded-l-none tw:*:last:!rounded-r-md tw:*:not-first:!-ml-[1px]"
>
	{@render children?.()}
</div>

[wongjn]

Here's how you'd do it in a more "Tailwind way": https://play.tailwindcss.com/PQEsl3HQzC

[nstuyvesant]

Thanks - that is exactly what I was looking to do!