こんにちは!kossyです!
今回はTailwindCSS でタグ表示っぽい要素をつくったので、ブログに残してみたいと思います!
環境
Vue.js 3系
tailwindcss/postcss7-compat@^2.0.3
完成品としてはこんなものを目指します。
実装
まずはコード全晒しです。
<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に書き込むだけで簡単にスタイリングできるのはほんと楽ちんです。