Bootstrap styling conflicts

[zFlxw]

Hey there,
I am using Tailwind and linking the bootstrap stylesheet in the angular.json interferes with the rest of my styling. Is there a way to link the stylesheet only to the editor so that the editor styling works correctly without having to declare the bootstrap stylesheet globally?

I tried adding the bootstrap styles only to the component where I use the editor, but this does not work.

[Rinkal-2024]

@zFlxw remove bootstrap style in angular.json and write markdown editor related style in style.scss .
like
`btn-group, .btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle;
}
.btn-group .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.ace_print-margin {
display: none !important;
}

.md-editor-container {
position:relative;
height:100%;
margin-bottom:15px;
border:1px solid rgba(0,0,0,.1)
}
.md-editor-container.fullscreen {
margin:0;
position:fixed;
border:0;
top:0;
left:0;
width:100%!important;
height:100%!important;
z-index:99999999
}
.md-editor-container.md-editor-resizable:not(.fullscreen) {
resize:both;
overflow:hidden;
display:inline-block;
width:100%
}
.md-editor-container.md-editor-resizable:not(.fullscreen) .md-layout .editor-container {
height:calc(100% - 70px)
}
.md-editor-container.md-editor-resizable:not(.fullscreen) .md-footer {
z-index:-1
}
.md-editor-container .md-layout {
height:100%;
display:flex;
flex-direction:column
}
.md-editor-container .md-layout .tool-bar {
background-color:#f5f5f5;
border-bottom:1px solid rgba(0,0,0,.1)
}
.md-editor-container .md-layout .tool-bar .btn-group {
padding:6px
}
.md-editor-container .md-layout .tool-bar .btn-group:first-child:before {
display:none
}
.md-editor-container .md-layout .tool-bar .btn-group:before {
content:" ";
background-color:#a9a9a9;
width:1px;
height:20px;
left:0;
top:12px;
position:absolute
}
.md-editor-container .md-layout .tool-bar .btn-group.hide-split:before {
display:none
}
.md-editor-container .md-layout .tool-bar .btn {
margin-bottom:0
}
.md-editor-container .md-layout .editor-container {
flex:1;
display:flex;
height:calc(100% - 100px)
}
.md-editor-container .md-layout .editor-container > div {
flex:1
}
.md-editor-container .md-layout .editor-container > div .drag-container {
display:none
}
.md-editor-container .md-layout .editor-container > div.dragover {
position:relative
}
.md-editor-container .md-layout .editor-container > div.dragover .drag-container {
display:block;
position:absolute;
inset:0;
z-index:10;
background-color:#6;
display:flex;
align-items:center;
justify-content:center;
font-size:50px;
color:#fff
}`

[pratham-jaiswal]

@Rinkal-2024 's response saved me a lot of time.

Remove bootstrap from angular.json.
Using inspect element of any browser find the class names used in md-editor.
Add css for those class names in src/styles.css.
Make sure this src/styles.css is the last styles imported in angular.json