DraftJS blockstyle (header-one) not getting triggered - reactjs

Question

I have used draftJS in my project as a note taker. The inline styles are working perfectly fine but the blockType aren't.
Used the RichUtils to toggleInlineStyles and toggleBlockType.
Main DraftJS.jsx file :
class PageContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
alignment: "align-left",
};
this.setDomEditorRef = ref => (this.domEditor = ref);
this.focus = () => this.domEditor.focus();
this.onChange = editorState => {
this.setState({
...this.state,
editorState,
});
};
}
handleKeyCommand = command => {
const newState = RichUtils.handleKeyCommand(
this.state.editorState,
command,
);
if (newState) {
this.onChange(newState);
return "handled";
}
return "not-handled";
};
blockStyleFn = () => {
return this.state.alignment;
};
handleAlignment = alignment => {
this.setState({
...this.state,
alignment,
});
};
toggleInlineStyle = inlineStyle => {
this.onChange(
RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle),
);
};
toggleBlockType = blockType => {
this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
};
render() {
return (
<div className="flex items-center justify-center h-screen ">
<div className="overflow-hidden shadow-md min-w-[422px] rounded-2xl ">
<div
onClick={this.focus}
className="editors min-h-[210px] break-words text-base p-6 bg-white border-b-[1px] border-primary-400">
<Editor
blockStyleFn={this.blockStyleFn}
className="text-secondary-400"
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
placeholder="Take notes here..."
spellCheck={true}
ref={this.setDomEditorRef}
/>
</div>
<div className="flex justify-between py-4 px-6 ">
<div className="flex flex-1 justify-between">
<InlineStyleControls
editorState={this.state.editorState}
onToggleInLineStyle={this.toggleInlineStyle}
onToggleBlock={this.toggleBlockType}
focus={this.focus}
/>
</div>
<VerticalBorder className="mx-7" />
<AlignTextControls
handleAlignment={this.handleAlignment}
focus={this.focus}
currentAlignment={this.state.alignment}
/>
</div>
</div>
</div>
);
}
}
InLineStyleControls.jsx :
const InlineStyleControls = props => {
const INLINE_STYLES = [
{
label: "Bold",
style: "BOLD",
icon: bold => <BoldIcon bold={bold} />,
},
{
label: "Italic",
style: "ITALIC",
icon: bold => <ItalicIcon bold={bold} />,
},
{
label: "Underline",
style: "UNDERLINE",
icon: bold => <UnderlineIcon bold={bold} />,
},
{
label: "H1",
style: "header-one",
icon: bold => <TextIcon bold={bold} />,
},
];
let currentStyle = props.editorState.getCurrentInlineStyle();
const selection = props.editorState.getSelection();
const blockType = props.editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey())
.getType();
return (
<div className="flex flex-1 justify-between">
{INLINE_STYLES.map(type => (
<StyleButton
key={type.label}
active={
type.label === "H1"
? type.style === blockType
: currentStyle.has(type.style)
}
icon={type.icon}
onToggle={type.label === "H1" ? props.onToggleBlock : props.onToggleInLineStyle}
style={type.style}
focus={props.focus}
/>
))}
<span className="cursor-pointer">
<TextColor />
</span>
</div>
);
};
StyleButton.jsx:
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = e => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
return (
<span className={` cursor-pointer ${this.props.class} `} onMouseDown={this.onToggle} onMouseUp={this.props.focus} >
{this.props.icon(this.props.active ? 2 : 1)}
</span>
);
}
}
Problem : Everything is working fine except the "header-one" and I not able to figure out why.
I used the rich editor example to build this.
Edit : I found the problem. The problem was due to tailwind css. When I remove tailwind from my project everything is working fine. any idea on to how to make draftJS work with tailwind?