初心者向けTailwind CSSの基本的な使い方

WEB制作
初心者向けTailwind CSSの基本的な使い方

最近のお気に入りのフレームワークは、Tailwind CSSです。

ユーティリティクラスが充実しており、ユニークなページを作る際を違和感なくサックと作成することができて大好きです。

もっと多くの人にTailwind CSSを使ってもらいたいので、今回は、Tailwind CSSの基本的な使い方を紹介します。

目次

Tailwind CSSとは？

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

Tailwind CSSのは、コンポーネントクラスは用意されていなく、その代わり豊富なユーティリティクラスが用意されています。

CSSメプロパティの大半をカバーするユーティリティが用意されっており、多くのデザインは、用意されているユーティリティクラスを組み合わせるだけで実装することができます。

See the Pen Slack Clone with Tailwind CSS by Adam Wathan (@adamwathan) on CodePen.

▲ Tailwind CSSで実装されたSlackのクローン

要は、Tailwind CSSは厳選されたCSSプロパティ集なのです。

使用できるCSSプロパティが限定さている分、一々ここは何pxがどうかや色などで悩まずに済みます。

もちろん、CSSプロパティが不足している場合は拡張することもできます。

セットアップ（インストール方法）

軽く触ってみたい場合は、CDNが用意されているのでそちらをおすすめします。

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

しかし、CDNだとテーマカラーの変更やコンポーネントクラスを作成することなどができません。

本格的に使用したい場合は、Webpackなどでビルドして使う必要があります。

インストール方法は、公式ガイドやLaravelを使用する場合には、こちらの過去記事を参考にしていただければと思います。

LaravelへのTailwind CSSのインストール手順

ユーティリティクラスを使う

Tailwind CSSは、CSSプロパティ毎にクラスが用意されており、それらを組み合わせることで構築していきます。

感覚的には、style属性にCSSプロパティを書くのに近いと思います。

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">Prev</button>

ユーティリティクラスは、公式サイトの検索機能がしっかりしており、使いたいCSSプロパティを入力するとユーティリティクラスの候補が表示されるので、ユーティリティクラスを探すのは苦労しません。

Hover時のスタイル

hover:<クラス名>でホバー中のスタイルを設定する事ができます。

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">Prev</button>

defaultではhoverのバリアントが設定されていないものがあります。

その場合は、tailwind.config.jsに以下のように設定しましょう。

// tailwind.config.js
module.exports = {
  variants: {
    // ...
    <クラス名>: ['responsive', 'hover'],
  }
}

Focus時のスタイル

focus:<クラス名>でフォーカス中のスタイルを設定する事ができます。

<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">

defaultではfocusのバリアントが設定されていないものがあります。

その場合は、tailwind.config.jsに以下のように設定しましょう。

// tailwind.config.js
module.exports = {
  variants: {
    // ...
    <クラス名>: ['responsive', 'focus'],
  }
}

レスポンシブ対応（ブレイクポイント）

<ブレイクポイント>:<クラス名>でブレイクポイント以上のウィンドウサイズの時のスタイルを設定する事ができます。

<div class="block md:hidden">Mobile Only</div>

デフォルトのブレイクポイントは以下のようになっています。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  }
}

コンポーネントクラスを自作する

Tailwind CSSでは、ユーティリティクラスを組み合わせて、自作のコンポーネントクラスを追加することができます。

.btn {
    width: 240px;

    @apply inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded; //ここに使用するユーティリティクラスを記述する

    &:hover {
        @apply bg-blue-700; //ここに使用するユーティリティクラスを記述する
    }
}

@applyの後ろにユーティリティクラスを記述することでそれらのクラスを継承する事ができます。

公開されているコンポーネントクラス

Tailwind CSSのコンポーネントは多くのサイトで公開されています。

はじめは、コンポーネントを自作するのも大変だと思うので、ネットに公開されているコンポーネント例を参考に作成していくのがおすすめです。

中でもtailwindcomponentsは、コンポーネントの種類で分類されており、非常に探しやすくおすすめのサイトです。

終わりに

いかがだったでしょうか？Tailwind CSSを使ってみたくなりましたでしょうか？

感覚的には、style属性にCSSプロパティを書くのに近いと思います。

それにだけ至らず、ホバー時のスタイルも設定できたりするのでかなり優秀です。

欠点としては、Bootstrapに比べまだまだ普及しておらず、エコシステムが現状だと少ない点が挙げられます。

今後、テーマなどの開発が活発に行われる様になれば、もっと気軽に使用できるようになって良いのにな〜と思ってしまいます。