tailwindcssで、グラデーションボーダーを出してみる

結果

経緯

Tailwindでグラデーションがかかったボーダー、しかも全周ではなく上だけとか、下だけに出す方法をググったけど、これ！というものが出てこなかったのでやってみました。

前提

• React(Typescripte)の環境構築は済んでいる
• Tailwindcssは導入済み

コード

src/App.tsx

function App() {
  return (
    <div className="container mx-auto w-[400px] px-[24px] py-[24px]">

      <header className="mt-[12px] bg-gradient-to-r from-[#6080B0] via-[#08DCF9] to-[#FF2775] pb-[4px]">
        <div className="bg-black px-[4px]">
          <h1 className="text-white">h1 title</h1>
        </div>
      </header>
      
      <main className="my-[36px]">
        <p className="text-white">body text</p>
      </main>
      
      <footer className="bg-gradient-to-r from-[#6080B0] via-[#08DCF9] to-[#FF2775] pt-[4px]">
        <div className="bg-black px-[4px]">
        <p className="text-white text-center"> - footer - </p>
        </div>
      </footer>

    </div>
  );
}

export default App;

上のコードの場合、<header>と<footer>に、Tailwind の bg-gradient-to-r で、背景をグラデーションに塗っている。

後は<header>と<footer>の中にもう一つ<div>を書いて、bg-black などで背景と同じ色で塗りつぶす。

この際、例えば<header>であれば、pb-[4px]が太さ4pxのグラデがかかった下方面のボーダーとなる。

同様に、<footer>であれば、pt-[4px]が太さ4pxのグラデがかかった上方面のボーダーとなる。