Default styling for inputs using tailwind

sage
,
1

I’m wondering if there is a preferred solution to apply generic input styling to all inputs on site (im using tailwind)?

I’ve created couple input styles (e.g. .input-sm and .input-md) as @layer components and I would still like to apply those styles on selected inputs when needed.

Should I define input styles under base? e.g.

@layer base {
input { @apply border border-gray-300 rounded; }
}

If so, how would you make .input-sm/.input-md work without !important properties set for each rule?

2

That’s the issue of CSS Layers, maybe because of backwards-compatibility:
Styles declared outside of CSS Layers always have higher specificity than those in layers.