this package will help you to manage tailwind css long classes,
npm i tailwind-short-class
import TWSC from "tailwind-short-class";
You must use back-ticks ``
const nav_bar_wrapper = TWSC(`
flex
flex-row
min-h-50
max-w-full
bg-blue-500
`)
import React from "react";
import TWSC from "tailwind-short-class";
export default function ComponentName() {
return (
<div className={nav_bar_wrapper}>
<div className={nav_bar_left_side}>
<div className={nav_bar_left_side_item}>1</div>
<div className={nav_bar_left_side_item}>2</div>
<div className={nav_bar_left_side_item}>3</div>
<div className={nav_bar_left_side_item}>4</div>
<div className={nav_bar_left_side_item}>5</div>
<div className={nav_bar_left_side_item}>6</div>
</div>
<div className={nav_bar_right_side}>
<div className={nav_bar_right_side_item}>135px * 33</div>
</div>
</div>
);
}
const nav_bar_wrapper = TWSC(`
flex
flex-row
min-h-50
max-w-full
bg-blue-500
`);
const nav_bar_left_side = TWSC(`
flex
flex-row
w-1/2
bg-green-500
h-100
`);
const nav_bar_right_side = TWSC(`
flex-row
flex
w-1/2
bg-yellow-500
h-100
items-center
justify-end
mx-12
`);
const nav_bar_left_side_item = TWSC(`
w-1/6
flex
justify-center
items-center
`)
const nav_bar_right_side_item = TWSC(`
w-12
`);