tailwindcss 入門 ボタン表示をしてみる

こんにちは、Yuuichi(@WestHillWorker)です。

今回は、tailwindcssというCSSフレームワークについて、特徴・記述イメージ・インストールについてまとめてみました。

https://tailwindcss.com/

スポンサーリンク

tailwindcssの特徴

他のCSSフレームワークと違う点として、ユーティリティファーストが特徴で、 HTMLに直接ユーティリティクラスを適応することで、要素をスタイリングするため、 CSSを記述せずにカスタムなデザインを構築できるという特徴があります。

公式サイトのutiliti-first：https://tailwindcss.com/docs/utility-first

記述イメージ

次に実際にどのようにスタイリングしていくのかをボタンを参考に見ていきましょう。

ボタンを表示する場合の記述例

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

classにtailwindcssのユーティリティを付与していく形式となります。

実際bg-blue-500には以下のようなclassが定義されています。

.bg-blue-500 {
  --bg-opacity: 1;
  background-color: #4299e1;
  background-color: rgba(66, 153, 225, var(--bg-opacity));
}
...その他省略

ボタンに関しても、classにユーティリティクラスを付与して様々な組み合わせができるようです。

使ってみる

次に実際にtailwindcssをインストールして使ってみます。

学習用のプロジェクト準備

今回OSはMacを利用しています。

$ mkdir study_tailwindcss
$ cd study_tailwindcss
$ touch index.html & style.css

tailwindcs install

npm もしくはyarnどちらかでインストール。

もしこの辺り手間だと感じましたら、以下をindex.htmlで読み込ませるとすぐ確認もできます。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
// npmを使う場合
$ npm init
$ npm install tailwindcss
// yarnを使う場合
$ yarn init
$ yarn add tailwindcss

@tailwind ディレクティブ の追記

用意したstyle.cssにbase・components・utilitiesを追加します。

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

上記をそのままstylesheetとして読み込むのではなく、ビルドすることによってcssとして利用ができるようになります。

ビルド

今回は学習用に簡易で利用してみるだけですので、npxでビルドします。

// (例)入力ファイルにディレクティブを追加したstyle.cssを指定して、出力ファイルにoutput.cssを指定
$ npx tailwindcss build style.css -o output.css

もしnpxがもし使えない場合は、以下をご確認ください。

// バージョンが5.2以上か
$ npm -v
// もしバージョンが低い場合
$ npm install -g npx

ビルドされたファイル

ビルドすることによって、bg-blue-500クラスなどがoutput.cssに記述されていると思います。

その他にもディレクティブで指定したものが生成されていると思います。

実際にoutput.cssを使ってみる

最初に作成したindex.htmlを以下のように追記してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="output.css" />
    <title>tailwindcss</title>
  </head>
  <body>
    <header>study tailwindcss</header>
    <main role="main">
      <div class="m-10">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Button
        </button>
      </div>
    </main>
    <footer></footer>
  </body>
</html>

ボタンが表示できるかindex.htmlをブラウザなどで開いてみましょう。

chromeブラウザなどで確認してみましょう

ここまででtailwindcssを利用することができる部分まで完了です！

もっと知りたい

以下にサンプルのカード・アラート・ボタン・フォームなどコンポーネントがあります。

https://tailwindcss.com/components

この辺りを記述して動かしてみたり、公式サイトのメニューにはLayout・grid・flexboxなどの利用できるユーティリティーのドキュメントがありますので、使ってみたいクラスを調べながら動かしていくのが良いかと思います。

その他にも

tailwindcssでは利用する人がカスタマイズすることを念頭に設計されているため、tailwind.config.jsをルートディレクトリに配置して、theme(テーマ)など自前で定義することもできます。

カスタマイズ手順

https://tailwindcss.com/docs/configuration#creating-your-configuration-file

便利なプラグイン

Visual Studio Codeを使って開発する場合、Tailwind CSS IntelliSense プラグインが、構文の強調表示・オートコンプリート機能など便利でした。

利用イメージ

settings.json

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  "tailwindCSS.emmetCompletions": true
}

まとめ

tailwindcssを初めてさわってみた感想としては、用意されたクラスを組み合わせてスタイリングしていくことができるので、直感的でわかりやすいなと思いました。

引き続き、個人Web制作などで利用していこうと思います。

また知見をためて、共有できればと思います。

Webデザインcssframework, tailwindcss

Posted by westworker