React.js ✖️Tailwind CSSで可読性を高めるアイデア

本記事について

この記事では、React.jsでスタイリングとしてTailwindCSSを使用する際にClassName内がごちゃついて可読性が下がってしまう事を回避するために自分がとっている方法について記述しています。
コードの内容についてはあくまで例なので気にせずに記述方法にだけフォーカスしていただけると幸いです。
まだまだ初学者のため、もっといい方法があればぜひコメント頂けると幸いです。

　Before

普通に書くとこんな感じ。
やっぱり見にくい気がします。

const ExamplePage = () => {
    return (
        <>
            <div className="h-2 w-2 pt-1 text-white bg-pink-200 bg-opacity-20 border-b md:hover:text-red">
                <p className="p-1 mt-1 font-semibold underline">これは例です</p>
            </div>
            <div className="mt-2 pb-2 rounded-sm shadow-sm">
                <p className="font-light">
                    この記事では
                    <span className="font-bold text-red-400 underline underline-offset-1">
                        個人的に可読性の高いと
                    </span>
                    思う記述方法について記載しています。
                    <br />
                    あくまで例なので、スタイリングの中身は適当ですので
                    ご注意ください。
                </p>
            </div>
        </>
    );
};

export default ExamplePage;

After

Styled Componentのように関数コンポーネントの外に書き出します。
これにより、同一のスタイルを簡単に適用することができ、可読性が上がると同時に保守性も高まると感じています。
縦に長くなってしまうというデメリットはありますが、その部分に関しては別ファイルで定義したものをインポートすれば解決されると思います。

const ExamplePage = () => {
    return (
        <>
            <div className={styles.topContainer}>
                <p className={styles.title}>これは例です</p>
            </div>
            <div className={styles.bottomContainer}>
                <p className={styles.bottomContainer}>
                    この記事では
                    <span className={styles.emphasis}>
                        個人的に可読性の高いと
                    </span>
                    思う記述方法について記載しています。
                    <br />
                    あくまで例なので、スタイリングの中身は適当ですので
                    ご注意ください。
                </p>
            </div>
        </>
    );
};

export default ExamplePage;

const styles = {
    topContainer: `
    h-2 
    w-2 
    pt-1 
    text-white 
    bg-pink-200 
    bg-opacity-20 
    border-b 
    md:hover:text-red
    `,
    title: `
    mt-2 
    pb-2 
    rounded-sm 
    shadow-sm
    `,
    bottomContainer: `
    p-2
    mt-1
    bg-white
    rounded
    `,
    explanation: `
    font-light
    `,
    emphasis: `
    font-bold 
    text-red-400 
    underline 
    underline-offset-1
    `
};