Movatterモバイル変換

[0]ホーム
URL:

コリス

CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」

サイト構築 -CSS

Post on:2019年11月28日

sponsorsr

日本でも、Tailwind CSSを使用する人が増えてきましたね。
フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。

サイトのキャプチャ

How I Stopped to Write CSS
by Luca Spezzano

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています。常に、自分のニーズにあったスケーラブルなフレームワークを理解するために勉強しています。

Tailwind CSSの使用例

Tailwind CSSの使用例

数ヵ月前に同僚と話していた時に、Tailwind CSSという名前のCSSフレームワークが話題になりました。普段はほとんどのプロジェクトでBootstrapを使用していましたが、Tailwind CSSを使い始めてみると、今までのやり方が劇的に変わりました。

Tailwind CSSとは

Tailwind CSSには、公式サイトがあります。

サイトのキャプチャ

Tailwind CSS
Tailwind CSS -GitHub

訳者注: Tailwind CSSは、当ブログでも紹介しました。

公式サイトによると、下記のように記載されています。

Tailwind CSSは高度にカスタマイズ可能なローレベルのCSSフレームワークです。上書きで苦労しなければならない面倒なスタイルは一切なく、カスタマイズされたデザインを構築するために必要なすべてのビルディングブロックを提供します。

実際のところ、多くのCSSフレームワークにはあらかじめデザインされたコンポーネントが多すぎるため、自分用にカスタマイズされたUIを使用する場合には、それらのスタイルを何度も上書きする必要があります。

Tailwind CSSにはあらかじめデザインされたコンポーネントの代わりに、HTMLはそのままでカスタマイズされたUIを構築できるユーティリティのクラスが用意されています。

私がTailwind CSSを実際に使い始めてから、CSSの記述方法がどのように変化したか、いくつかの例を紹介します。

カードコンポーネントで実装の比較

通常のCSSとTailwind CSSを使用して、カードコンポーネントの実装を比較します。

カードコンポーネントのキャプチャ

カードコンポーネント

Tailwind CSSを使用すると、CSSを1行も書かずに実装できます。素晴らしいことです。信じられませんか？ 実際のコードを見てましょう。

通常のCSSを使用したカードコンポーネント

まずは通常通り、HTMLとCSSを記述して実装します。

HTML
1
2
3
4
5
6
7
8
9
10
<divclass="card">
  <imgclass="card__img"src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"alt=""/>
  <divclass="card__body">
    <h1class="card__title">Titlecard</h1>
    <pclass="card__description">Loremipsumdolorsitamet,consecteturadipisicingelit.Voluptatibusquia,nulla!Maioresetperferendiseaque,exercitationempraesentiumnihil.</p>
    <spanclass="card__tag">#tag1</span>
    <spanclass="card__tag">#tag2</span>
    <spanclass="card__tag">#tag3</span>
  </div>
</div>

CSSは、29行も記述しました。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.card{
  box-shadow:01px3px0rgba(0,0,0,0.1),01px2px0rgba(0,0,0,0.06);
  max-width:24rem;
  &__img {
    width: 100%;
  }
  &__body {
    padding: 1rem 1.5rem;
    background-color:#fff;
  }
  &__title {
    font-size: 1.25rem;
    margin-bottom:0.5rem;
    font-weight:700;
  }
  &__description {
    color: #4a5568;
    margin-bottom:4rem;
  }
  &__tag {
    color: #4a5568;
    padding:0.25rem0.75rem;
    margin-right:0.5rem;
    font-weight:600;
    display:inline-block;
    border-radius:9999px;
    background-color:#edf2f7;
  }
}

Tailwind CSSを使用したカードコンポーネント

Tailwind CSSを使用すると、用意されたユーティリティのクラスだけで実装できます。CSSを記述する必要はありません。

HTML
1
2
3
4
5
6
7
8
9
10
<divclass="max-w-sm shadow">
  <imgclass="w-full"src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"alt=""/>
  <divclass="bg-white px-6 py-4">
    <h1class="font-bold text-xl mb-2">Titlecard</h1>
    <pclass="text-gray-700 mb-16">Loremipsumdolorsitamet,consecteturadipisicingelit.Voluptatibusquia,nulla!Maioresetperferendiseaque,exercitationempraesentiumnihil.</p>
    <spanclass="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag1</span>
    <spanclass="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag2</span>
    <spanclass="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#tag3</span>
  </div>
</div>

何か気づいたことはありますか?

実装されたカードコンポーネントは同じですが、Tailwind CSSの場合はCSSを記述する必要がありません。通常のCSSの場合はこういった単純なコンポーネントの実装だけでも29行も必要になり、大規模プロジェクトになるとどれだけの時間とコードが増えるかを考えてみてください。

注意点はありますか？

HTMLにclassを記述するのが増えますが、労力ははるかに少なくなります。

BootstrapとTailwind CSSの比較

Bootstrapを使用しているのであれば、CSSフレームワークを変更して、ユーティリティのクラスに基づいたフレームワークに切り替えるのは怖いかもしれません。

BootstrapのいくつかのクラスをTailwind CSSに置き換える方法を説明します。

HTML: Bootstrapの場合

HTML: Bootstrapの場合
1
2
3
4
5
6
7
<divclass="container">
  <divclass="row">
    <divclass="col-6 col-md-4">column1</div>
    <divclass="col-6 col-md-4">column2</div>
    <divclass="col-6 col-md-4">column3</div>
  </div>
</div>

HTML: Tailwind CSSの場合

HTML: Tailwind CSSの場合
1
2
3
4
5
6
7
<divclass="container mx-auto px-4">
  <divclass="flex flex-wrap">
    <divclass="w-6/12 md:w-4/12">column1</div>
    <divclass="w-6/12 md:w-4/12">column2</div>
    <divclass="w-6/12 md:w-4/12">column3</div>
  </div>
</div>

違いはどこですか？

Bootstrapでは複数のプロパティを含むクラス（.container, .row）がありますが、Tailwind CSSでは各クラスは1つのプロパティにのみ対応しています。

訳者注: 以前紹介した「CSSを改善する単一責任の原則」で、1つのclassに対して機能は1つだけにする、というものです。

Bootstrapがそんなに恋しいですか？

JavaScriptが機能の一部です！

Tailwind CSSとは異なり、BootstrapにはJavaScriptの部分があります。私がよく使用したJavaScriptの機能は、モーダルや折り畳みやタブやツールチップでした。

Tailwind CSSを使用した場合には、これらの機能を自分で作り直す必要はありますが、正直なところ、結果的には労力は非常に少なくなります。

BootstrapとTailwind CSSのどちらを使えばよいか？

必要に応じて、多くのプロジェクトではBootstrapでも十分だと思いますが、UIのデザインがカスタマイズされているプロジェクトではTailwind CSSの方が柔軟性と自由度がはるかに高いことは間違いありません。

Tailwind CSSを使用する時は、PurgeCSSを使用して未使用のCSSを削除することをお勧めします。この方法はMozillaでも使用されており、Tailwind CSSでFirefox Sendを構築し、PurgeCSSを使用して不要なCSSを削除します。詳しくは、下記ページをご覧ください。

サイトのキャプチャ

How to Remove Unused CSS
日本語訳:CSSファイルから未使用のスタイルを削除する方法

CSSにかかる時間はかなり少なくなりました

私は長年Bootstrapを使用してきましたが、確かに使いやすかったです。しかし、Tailwind CSSを使い始めたところ、自由になり、CSSのコードも70%以上削減されました。確かに、完全になくなったわけではありません。しかし、以前まで記述していたコードの量を考えると、CSSにかかる時間はかなり少なくなったと言えます。

Tailwind CSSを始めると、最初の頃はすべてのクラスを記憶するのは大変かもしれません。しかし、慣れてしまえば、きっと気に入ると思います、私が保証します。

sponsors

Related Posts

関連記事が見つかりませんでした。

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp