TailwindCSS でタグ表示っぽい要素をつくる

こんにちは!kossyです!




今回はTailwindCSS でタグ表示っぽい要素をつくったので、ブログに残してみたいと思います!



環境

Vue.js 3系
tailwindcss/postcss7-compat@^2.0.3




完成品としてはこんなものを目指します。

f:id:kossy-web-engineer:20210710085329p:plain


実装

まずはコード全晒しです。

  <aside class="w-full text-xl text-gray-800 leading-normal">
    <div class="pb-8 mt-8">
      <p class="tracking-wide leading-7 text-gray-500">注目のタグ</p>
    </div>
    <div class="flex flex-wrap items-start">
      <div class="flex mb-6">
        <a class="mr-4">
          <div class="px-2 py-4 rounded-2xl relative bg-gray-100">
            <p class="text-gray-900 leading-6 text-xs">Technology</p>
          </div>
        </a>
      </div>
      <div class="flex mb-6">
        <a class="mr-4">
          <div class="px-2 py-4 rounded-2xl relative bg-gray-100">
            <p class="text-gray-900 leading-6 text-xs">General</p>
          </div>
        </a>
      </div>
      <div class="flex mb-6">
        <a class="mr-4">
          <div class="px-2 py-4 rounded-2xl relative bg-gray-100">
            <p class="text-gray-900 leading-6 text-xs">Technology</p>
          </div>
        </a>
      </div>
      <div class="flex mb-6">
        <a class="mr-4">
          <div class="px-2 py-4 rounded-2xl relative bg-gray-100">
            <p class="text-gray-900 leading-6 text-xs">Technology</p>
          </div>
        </a>
      </div>
      <div class="flex mb-6">
        <a class="mr-4">
          <div class="px-2 py-4 rounded-2xl relative bg-gray-100">
            <p class="text-gray-900 leading-6 text-xs">Technology</p>
          </div>
        </a>
      </div>
      <div class="flex mb-6">
        <a class="mr-4">
          <div class="px-2 py-4 rounded-2xl relative bg-gray-100">
            <p class="text-gray-900 leading-6 text-xs">Technology</p>
          </div>
        </a>
      </div>
    </div>
  </aside>

もしJavaScriptフレームワークを使っていれば、for文で繰り返しで表示するのが筋かと思いますが、一旦仮置きしています。

使ったTailwindCSSのクラスを列挙します。

クラス プロパティ
w-full width: 100%;
text-xs font-size: 0.75rem;
line-height: 1rem;
text-xl font-size: 1.25rem;
line-height: 1.75rem;
text-gray-500 --tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
text-gray-800 --tw-text-opacity: 1;
color: rgba(31, 41, 55, var(--tw-text-opacity));
text-gray-900 --tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
bg-gray-100 --tw-bg-opacity: 1;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
leading-6 line-height: 1.5rem;
leading-7 line-height: 1.75rem;
leading-normal line-height: 1.5;
px-2 padding-left: 0.5rem;
padding-right: 0.5rem;
py-4 padding-top: 1rem;
padding-bottom: 1rem;
pb-8 padding-bottom: 2rem;
mr-4 margin-right: 1rem;
mb-6 margin-bottom: 1.5rem;
mt-8 margin-top: 2rem;
tracking-wide letter-spacing: 0.025em;
flex display: flex;
flex-wrap flex-wrap: wrap;
items-start align-items: flex-start;
rounded-2xl border-radius: 1rem;
relative position: relative;

まとめ

基本的に、いろんなサイトを見て「これ良い!!」って思ったら、chromeの検証ツールでCSSを見て、使われているCSSをTailwindCSSのclassに置き換える、をするのが一番近道かと思います。

HTMLでclassに書き込むだけで簡単にスタイリングできるのはほんと楽ちんです。


参考にさせていただいたサイト

Medium – Where good ideas find you.