Can't set `@apply shadow-none` to input elements

[rebasecase]

Current Behavior

Can't remove border around inputs (intuitively)

Expected Behavior

Should behave same as

input {
  box-shadow: none;
}

Steps To Reproduce

<label class="label">
  <span class="label-text">Input</span>
  <input class="input" type="text" placeholder="Input" />
</label>

input {
  @apply shadow-none;
}

Link to Reproduction / Stackblitz

No response

Environment Information

More Information

Incorrect:

Correct:

[rebasecase]

Considering disabling the shadow disables the outline, you should also be able to do change its colour using the utility functions also

[endigo9740]

@rebasecase for a little context here, we use ring styles for the inputs. These, as you've picked up on, are generated using box-shadow:

https://tailwindcss.com/docs/box-shadow#adding-a-ring

For Skeleton, we don't use raw Tailwind utilities like ring-x (via @apply), as we're defining these styles in stylesheet. We're following Tailwind's lead - which recommends this approach in v4. We instead parse out the raw values to mimic what those utility classes do. In the case of rings, they're a bit more complex as it's a mixture of CSS custom properties. There's a lot of boilerplate here:

https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/utilities/form-inputs.css#L18

So when you say shadown-none doesn't work, I'm a bit surprised. It would be my expectation that should work as is. So if can, I'd enjoy help diagnosing what's up here.

[rebasecase]

Thank you for your detailed reply! I can devote some time to this perhaps the tail end of next week. It will be useful for me to do a deep dive on these frameworks regardless

Possibly related tailwindlabs/tailwindcss#12219 (comment)

[endigo9740]

No problem, any help you can provide is more than welcome!