Basic questions about styling with Tailwind and Vue

[devopg]

Some basic question

1. how override styles with tailwind ?
   if i add style in global @layer base and it dont work

@layer base {
	
	
	.milkdown {
		height: 200px !important;
		max-height: 200px !important;
		/* overflow: scroll !important; */
	}
	
}

2. How apply styles with Vue3 with component with scoped?

it dont work because after render div with milkdown receive prefix like class=milkdown-4ue7

<template>
	<VueEditor :editor="editor" />
</template>

<style scoped>
.milkdown{
    max-height: 100px
}
</style>

[Saul-Mirone]

Maybe use @apply utility with @layer components?
https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

[devopg]

with Layer components dont work too

@layer components {
	.milkdown-menu-wrapper{
		position: relative;
	}
}

[z-950]

check Deep Selectors for question 2.

[devopg]

It works, but it's not convenient (

[z-950]

It's the only way with scoped. I think you can try this.

.wrapper :deep() {
  .milkdown {
    // ....
  }
}

It should be used with css preprocessors.