css @apply input is not the same as the input class

[LuckyTurtleDev]

hi, i wanted to create a custom my_input class, based on input by using @apply input to add additional features. But I notify that the web page looks different if i use my_input instead of input, even without additional entries . The vertical line is missing. Should this not be the exact same?

.my_input {
    @apply input
}

	rsx!(
		label { class: "my_input",
			span { class: "label", "{props.label}" }
			input {
				placeholder: "{props.placeholder}",
				value: "{props.value}",
				r#type: "text",
				oninput: move |event| props.value.set(event.value()),
			}
		}
	)

with input:

with my_input

[saadeghi]

Tailwind CSS @apply only extends simple selectors. A class name like .input has relative selectors (like child selector, sibling selector, etc) which is ignored by Tailwind's @apply because it will easily create loops or will generate lots of unused styles.

@apply should be used for simple selectors that apply one or two CSS attributes to a single CSS class name. For example @apply p-4 bg-primary. A component class name like .input sets multiple CSS properties to multiple selectors.

To extend styles, use something like class="input my_input" where .my_input includes the modifications.

Let me know if you have any questions

[LuckyTurtleDev]

thanks. but sadly this answer my question but not solve my problem.

I was planning of switching between label and floating label dependent on the display width.
For this i was planning to use css media query and @apply. Something like this:

@media (max-width: 38rem) {
    .my_input {
    ......
    }
}

@media not (max-width: 38rem){
    .my_input {
    .....
    }
}

But since @apply did not work i have no idea how to do it now with a css only way, since it mean to conditional set classes.

[LuckyTurtleDev]

move this to it on discussion since, it is a new different question: #4057