TailwindCSS食わず嫌い集まれ！またはそういう人が身近にいる人

TailwindCSSは今までのcssと比べると独特な書き方やHTMLファイルがごちゃごちゃしている、初期だと学習コストも含んでしまうといった理由でTailwindCSSが苦手な人だったり、
class名を毎回考えなくてもよくなる、HTMLファイルに記載をするため、任意の箇所のデザインを変更することになっても影響範囲を考えることなく安全にデザインを変更できるからTailwindCSSが好きな人など
TailwindCSS好き嫌いが分かれているかと思います。

食わず嫌いの方にもTailwindCSSに興味を持ってもらえたらと思うので、今回React TokyoのDiscordで紹介されたものをご紹介します！

Tailwindのチートシートやドキュメントを参照するものについて

初めてTailwindCSSを触る人にとっては「TailwindCSSのドキュメント」と「VSCodeなどのエディタ」をいったりきたりして記載をするかと思います。
そんな時にチートシートやエディタで候補を出してくれる拡張機能を利用すれば理解が早まるかと思います。

また、HTMLのclass名が長くなるのが気になる人には以下のVSCodeの拡張機能を入れると便利になるかもしれないです。

shadcn/uiについて

shadcn/uiは、ReactやNext.jsで使える便利なUIコンポーネント集です。TailwindCSSを使って作られており、用意されたコンポーネントをそのまま使うことはもちろん、自分好みにデザインをカスタマイズするのも簡単です。初心者でも使いやすく、美しいUIを効率よく作れるのが特徴です。公式ドキュメントも用意されており、気軽に試すことができます。

https://www.shadcn.net/ja

https://ui.shadcn.com/

LLMとの相性について

TailwindCSSはユーティリティファーストな設計で、直感的かつ一貫性のあるクラス構造がLLMによるコード生成や解釈を容易にします。また、設定の拡張性やレスポンシブ対応のシンプルさが、LLMが効率的にUIを生成・調整するのに最適です。

試しに、v0を用いてReact Tokyoのトップページを検証として書いてもらいました。
ReactTokyoのロゴ部分がINPUTの画像になっていたりその他微妙な違いはありますが、プロトタイプを作成するレベルであれば全然利用できると思っています。

INPUT

この画像のものをtailwindcssを用いてUIを作成してください。

React Tokyoのトップページ

OUTPUT

AIによって生成されたもの

生成されたHTMLコードについて


  <!-- Header -->
  <header class="container mx-auto px-4 py-6 flex justify-between items-center">
    <a href="/" class="text-2xl font-bold">
      React Tokyo
    </a>
    <div class="flex items-center gap-8">
      <nav class="hidden md:flex items-center gap-8">
        <a href="/about" class="text-black hover:text-gray-600">
          About
        </a>
        <a href="/members" class="text-black hover:text-gray-600">
          Members
        </a>
        <a href="/sponsors" class="text-black hover:text-gray-600">
          Sponsors
        </a>
      </nav>
      <a
        href="https://discord.gg/reacttokyo"
        class="flex items-center gap-2 bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
          <circle cx="9" cy="12" r="1"></circle>
          <circle cx="15" cy="12" r="1"></circle>
          <path d="M7.5 7.5c3.5-1 5.5-1 9 0"></path>
          <path d="M7 16.5c3.5 1 6.5 1 10 0"></path>
          <path d="M15.5 17c0 1 1.5 3 2 3 1.5 0 2.833-1.667 3.5-3 .667-1.667.5-5.833-1.5-11.5-1.457-1.015-3-1.34-4.5-1.5l-1 2.5"></path>
          <path d="M8.5 17c0 1-1.356 3-1.832 3-1.429 0-2.698-1.667-3.333-3-.635-1.667-.48-5.833 1.428-11.5C6.151 4.485 7.545 4.16 9 4l1 2.5"></path>
        </svg>
        <span>Join Discord Server</span>
      </a>
    </div>
  </header>

  <!-- Main Content -->
  <main class="container mx-auto px-4 py-16">
    <div class="flex flex-col md:flex-row items-center gap-8">
      <div class="md:w-1/2 space-y-6">
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
          分からないを分かち合う、広げようReactの世界。
        </h1>
        <div class="space-y-4 text-gray-700">
          <p>
            東京を中心に、オンラインとオフラインの両方で活動するReactコミュニティです。
          </p>
          <p>
            オンラインでは、Discordを通じた情報交換や交流の場を提供し、オフラインではReactに関するイベントを開催します。
          </p>
          <p>
            初心者から経験者まで、職種や技術力を問わず、誰でも気軽に参加できるのが特徴です。
          </p>
          <p>
            Reactを学びたい人、新しいつながりを作りたい人、初めてコミュニティに参加する人も大歓迎です！
          </p>
          <p>一緒にReactを楽しみましょう！</p>
        </div>
        <div class="pt-4">
          <a
            href="https://discord.gg/reacttokyo"
            class="inline-flex items-center gap-2 bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-md"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
              <circle cx="9" cy="12" r="1"></circle>
              <circle cx="15" cy="12" r="1"></circle>
              <path d="M7.5 7.5c3.5-1 5.5-1 9 0"></path>
              <path d="M7 16.5c3.5 1 6.5 1 10 0"></path>
              <path d="M15.5 17c0 1 1.5 3 2 3 1.5 0 2.833-1.667 3.5-3 .667-1.667.5-5.833-1.5-11.5-1.457-1.015-3-1.34-4.5-1.5l-1 2.5"></path>
              <path d="M8.5 17c0 1-1.356 3-1.832 3-1.429 0-2.698-1.667-3.333-3-.635-1.667-.48-5.833 1.428-11.5C6.151 4.485 7.545 4.16 9 4l1 2.5"></path>
            </svg>
            <span>Join Discord Server</span>
          </a>
        </div>
      </div>
      <div class="md:w-1/2 flex justify-center">
        <div class="w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 relative">
          <img
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-02-28%202.39.40-GyyF0z4HO5lLqqNeauIWthGLauXvo6.png"
            alt="React Logo"
            class="w-full h-full object-contain"
          />
        </div>
      </div>
    </div>
  </main>

表示の結果について

https://play.tailwindcss.com/FSRYTK2ZbJ

終わりに

Xやさまざまな勉強会で注目を集めるTailwindCSSですが、その特徴や活用法を知ることで、これからのフロントエンド開発がさらに効率的で楽しいものになるかもしれません。今回の記事がその一助となれば嬉しいです！

React TokyoではReactに関する話題はもちろん、CSSなどのReact以外のフロントエンド関連に関わるコンテンツもDiscordにて日々共有されています。
Reactが好きな人はもちろん、CSSなどReact以外の技術に興味が持っている人もぜひ、React Tokyoを覗いてみてください。

React TokyoのWebサイトでもTailwindCSSを採用しています。

最後までお読みいただき、ありがとうございました。

https://react-tokyo.vercel.app/

Discussion