Tailwind CSS

Tailwind CSSフレームワークの使い方をご紹介します。このページ自体も Tailwind CSS を使って作っています。

Tailwind CSSとは

Tailwind CSSはユーティリティファーストのCSSフレームワークです。

ほかの多くのCSSフレームワークでは、何もクラスを指定しなくても、あるいはひとつのクラスを指定するだけで、ある程度デザインを整えてくれます。

これに対して、Tailwind CSSではフォントの大きさや色、マージン、パディングなどさまざまなクラスが用意されていて、これらを組み合わせて使用します。

そのため、Tailwind CSSを利用したHTMLでは多くのクラス指定を必要とします。その代わり、柔軟にカスタマイズしやすくなっています。

Tailwind CSS
URL https://tailwindcss.com/
License MIT
Twitter @tailwindcss
GitHub stars 19.4k

Tailwind CSSの使い方

Tailwind CSSを使うには、HTMLのヘッダでCSSをインポートします。

<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Anchor

Tailwind CSSではaタグにクラスを指定しないと、作成したリンクに色がついたり、下線が引かれることはありません。

<a href="/css/tailwind/">Tailwind CSS</a>

Tailwind CSS

このままでは訪問者がリンクであることを識別しづらいので、何らかの視覚効果をつける必要があります。

もっとも簡単な方法は、リンクテキストに色をつけることです。

<a href="/css/tailwind/" class="text-blue-500">Tailwind CSS</a>

Tailwind CSS

Container

<div class="container mx-auto">

水平方向にパディング(余白)を追加するには、px-{size} クラスを指定します。

<div class="container mx-auto px-1">
.container .mx-auto .px-1
</div>
.container .mx-auto .px-0
.container .mx-auto .px-1
.container .mx-auto .px-2
.container .mx-auto .px-3
.container .mx-auto .px-4
.container .mx-auto .px-5
.container .mx-auto .px-6
.container .mx-auto .px-8
.container .mx-auto .px-10
.container .mx-auto .px-12
.container .mx-auto .px-16
.container .mx-auto .px-20
.container .mx-auto .px-24
.container .mx-auto .px-32
.container .mx-auto .px-40
.container .mx-auto .px-48
.container .mx-auto .px-56
.container .mx-auto .px-64