tailwindで親要素のpaddingを無視

よくあるcssで親要素の一番上にpaddingをつけて、全体の端っこに余白を設定するケース。
これに対して子要素のコンポーネントなどで画面いっぱいに表示したいのに、bodyにつけたpaddingのせいで空白が消えない場合、下記で解決できます。

今回はtailwindで検証。

src/app/page.tsx

import { About } from '@/app/components/layouts/About';

export default function Home() {
  return (
      // 親要素に padding で余白が作成されている。
      <main className='w-[375px] px-5'>
        <About />
      </main>
  );
}

下記の子コンポーネントにある <h2> を親要素の px-5 の適用外とし、画面幅いっぱいに表示したい。

src/app/components/layouts/About.tsx

'use client';
import React, { useState } from 'react';

export const About = () => {
  return (
    <div className=''>
      // ↓これ
      <h2 className=''>画面いっぱいに表示したい</h2>
    </div>
  );
};

解決策

src/app/components/layouts/About.tsx

'use client';
import React, { useState } from 'react';

export const About = () => {
  return (
    // ↓マイナスでmarginを設定して余白を相殺
    <div className='-mx-5'>
      // 画面幅いっぱいにするためのスタイル (w-screen は width:100vw; と同じ)
      <h2 className='w-screen'>画面いっぱいに表示したい</h2>
    </div>
  );
};

と言うことで、上記のように画面いっぱいに表示したい要素に対して、`-mx-5'を使用し、marginをマイナスで適用することで親要素のpaddingを相殺することができます。では!!