あすたぴ.dev

tailwindcss でブログのデザインをリニューアルした

tailwindcss
2019/10/06 01:58:17

元々 bulma を使用していたのですが、tailwindcss というCSSフレームワークを知って、よさげだなと思ったのでこちらを使ってリニューアルをしてみました。
https://tailwindcss.com/

旧画面

新画面

tailwindcss の特徴としては、従来のCSSフレームワークにあるような、ある程度パターンが決まった構成をお手軽に構築できるよ。という感じではなく、 基本的にはすべてのスタイルは自分で書きます。
それの何が便利なのでしょうか?実際のコードはこんな感じです。

<template>
  <section class="mt-3">
    <section class="articles px-1">
      <ArticleList :article-list="list"></ArticleList>
    </section>
  </section>
</template>

classmt-3px-1 という記述があります。
これが tailswindcss が用意している class でそれぞれ margin-top: 0.75rem;
padding-right: 0.25rem; padding-left: 0.25rem;

を表しています。従来のCSSフレームワークだとレスポンシブデザインや、カラムレイアウト、ボタンなどのコンポーネントは用意されていましたが、こういう細かいスタイルの指定は自分で書く必要がありました。

ちょっとしたサイトを作るだけでもそれなりに記述量が必要で面倒なところがありました。
tailswindcss では逆にコンポーネントは用意されていないが、各種CSSのプロパティが用意されている。という形です。
何が嬉しいかというと、それなりに自分でCSSが書けるのであれば各フレームワークのお作法を覚える必要がなく記述量を軽減しつつ自分でデザインできるという点です。
(レスポンシブにするのはちょっとめんどう)

CSSフレームワークがいままですごく苦手だったのですが、tailwind はかなり自分に合ってた感じでよかったです。

Copyright © astapi