tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け

javascript web制作

※本ページはプロモーションを含みます

tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティークラスの集まりだということです。CSSフレームワークの代表的な存在の「Twitter Bootstrap」はユーティリティークラスの他にデザインされたコンポーネントを使用することができます。

Twitter Bootstrapを使用すると良くも悪くもTwitterBootstrapっぽいデザインができあがります。
もともとコンポーネントとしてデザインが設定されているアイテムがあるからです。tailwindcssはその点それっぽいデザインには仕上がりません。

どっちが良いのかは使う人の判断です。

本記事ではtailwindcssを使用していない人、使用を検討している人で公式ページは英語なので読むのが面倒くさい方にtailwindcssの始め方を簡単に紹介します。

目次
  1. はじめに言っておきたいこと
  2. 確認する２種類の方法
  3. npmを使用してpostCSSに挟んでtailwindcssを使用する流れ
  4. 最後に

はじめに言っておきたいこと

tailwindcssはそのコードの全ては使用しません。サイトを構築しているHTMLに設定されているクラスのみ各自生成して使用するのが基本です。

サイトのHTMLに flex というクラスが設定されている要素があれば flex というクラスのCSSが生成されますが、もしHTML内に flex というクラスの要素がない場合はtailwindcssはそのCSSを生成しません。

なぜそのようになるかというとtailwindcssの全コードを使用するとファイルサイズが大きくなりすぎてしまうからです。

確認する２種類の方法

tailwindcssを試すにあたってルートが大きく2つあります。

１つは CDN で読み込んでHTMLを書く。もう１つは npm を使用して実践さながらコードを構築するです。

CDNで読み込んで試す

こちらの方法はtailwindcssがどういうスタイルを吐き出すか知りたい時や開発時のみに使用したい時に便利です。

対象のHTMLドキュメントのheadタグ内に以下のコードを追加するだけで使用が可能になります。

<html>
  <head>
    <title>何かタイトル</title>
    <script src="https://cdn.taiwindcss.com"></script>
  </head>
  <body>
    <p>なにかコード</p>
  </body>
</html>

※開発時のみの使用を想定していて本番環境にはおすすめできない方法です。ブラウザの開発ツールで読み込むとコンソールに注意書きが表示されます。

npmを使用してコードを試す

実践の使用を検討しているのならこちらも試しておかなければいけません。
npmを使用するためのnodeのインストール方法は割愛します。

npmを使用する場合も2種類のルートがあります。

  1. Tailwind CLI を使用して直に変換
  2. PostCSS 処理内にtailwindを挟んで変換

（1）の場合はシンプルな変換で、（2）は生成したものを圧縮したい場合やプレフィックスをつけたい場合などに使用します。より柔軟な操作ができる（2）を実際に構築していきたいと思います。

npmを使用してpostCSSに挟んでtailwindcssを使用する流れ

目標

今回はシンプルな静的HTMLサイトを構成を想定します。

  • src/index.html -> dist/index.html
  • src/none.js -> dist/none.js
  • src/input.css -> dist/out.css

srcディレクトリに入力用ファイルを作りnpm-scriptsでdistフォルダに本ファイルを自動生成するようにします。
その中でcssにtailwindcssの内容を吐き出します。
また、browserSyncというパッケージを使用してファイル変更を感知しブラウザで確認しやすくします。

ディレクトリ構造の設定

作業用コードはsrcディレクトリに書き本コードはdistディレクトリに生成するようにします。

mkdir twTest && cd twTest
mkdir src
touch src/{index.html,none.js,input.css}

※twTestはプロジェクト名です。お好みで設定してください。

NODEパッケージの設定

npm init -y
npm i -D npm-run-all cpx2　rimraf browser-sync postcss-cli tailwindcss

パッケージについて

  • npm-run-all
    npm-scriptsに並列処理、直列処理を書くことができるようになります。
  • cpx2
    ファイルのコピーが簡単に行えるようになります。cpxの後継です。
  • rimraf
    再帰的ディレクトリ削除が行えるようになります。
  • browser-sync
    検証用サーバーを立ち上げてリアルタイムでファイルの変更を感知しブラウザをリロードしてくれます。
  • postcss-cli
    cssに後処理を加えることができます。ポストプロセッサーという呼ばれ方もします。
  • tailwindcss
    tailwindcssを生成するためのツールです。対象のソースを判定し存在するクラスのみを吐き出します。

設定ファイルを作成する

今回は3つの設定ファイルが必要になるので作成します。

  • postcss.config.js
  • tailwind.config.js
  • bs-config.js

各ファイルを次のように記述します。

module.exports = {
  plugins: {
    tailwindcss: {}
  }
}
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: []
}
module.exports = {
  "ui": {
    "port": 3001
  },
  "files": "dist/**/*.*",
  "watchEvents": ["change"],
  "watch": true,
  "port": 3000,
  "server": {
    baseDir: "dist"
  }
}

npm-scripts（タスク）を作成する

設定ファイルの追加が終わったらpackage.jsonの scripts にタスクを追加します。

"scripts": {
  "clean": "rimraf dist",
  "build:htmljs": "cpx src/**/*.{html,js} dist",
  "build:css": "postcss src/input.css -o dist/out.css --no-map",
  "build": "run-p build:*",
  "watch:htmljs": "cpx src/**/*.{html,js} dist --watch",
  "watch:css": "postcss src/input.css -o dist/out.css --no-map --watch",
  "server": "browser-sync start --config bs-config.js",
  "watch": "run-p watch:* server",
  "dev": "run-s clean watch"
},

各行の処理を簡単に説明します。

"clean": "rimraf dist"

distフォルダ毎削除します。

"build:htmljs": "cpx src/**/*.{html,js} dist"

srcディレクトリ内のhtmlファイルとjsファイルを階層を保持したままdistフォルダにコピーします。

"build:css": "postcss src/input.css -o dist/out.css --no-map",

src/input.cssをpostcss処理を行いdistフォルダにout.cssとして生成します。その際mapは作成しません。

"build": "run-p build:*",

build:という文字がつく処理（今回はbuild:htmljsとbuild:css）を並列に動かします。

"watch:htmljs": "cpx src/**/*.{html,js} dist --watch",
"watch:css": "postcss src/input.css -o dist/out.css --no-map --watch",

build:htmljsの動きを変更監視つきにします。各ファイルが変更され次第各ファイルがコピーされます。
下のwatch:cssも同様にbuild:cssの動きを変更監視つきにします。

"server": "browser-sync start --config bs-config.js",

browser-sync（検証用サーバー）をbs-config.jsファイルを設定ファイルとして呼び出します。

"watch": "run-p watch:* server",

watch:という文字がつく処理（今回はwatch:htmljsとwatch:css）とserverという処理を並列に動かします。

"dev": "run-s clean watch"

distフォルダを削除してからwatchという処理を直列に動かします。

Tailwindcssを呼び出すようにcssに記述する

ここまででhtml,js,cssを変更監視つきの検証環境ができたのでコードを入力してどのような見た目になるか試していきます。

tailwindcssはcssに呼び出すためのコードが必要になるので次のようにinput.cssに追加します。

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

@tailwindcssと間違えやすいので気をつけてください

これでHTMLに対象のクラスを追加するだけでoutput.cssにtailwindcssが適用されます。

HTMLの内容を変更する

適当にHTMLを編集してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tailwindcss test</title>
  <link rel="stylesheet" href="out.css">
</head>
<body>
  <div class="container mx-auto">
    <header class="bg-lime-200 py-2 px-6">
      <h1 class="text-3xl font-bold">header</h1>
    </header>
    <main class="bg-lime-100 p-6">
      <div class="sm:grid sm:grid-cols-3 sm:gap-6">
        <p class="text-justify col-span-2 bg-rose-100 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sint, nam ut nihil voluptates dicta similique pariatur ratione, adipisci reprehenderit laborum quas perspiciatis suscipit ipsum repudiandae voluptatum, obcaecati totam nesciunt? Saepe sed ad cupiditate impedit exercitationem quo magni molestias, sunt earum, explicabo, qui praesentium rerum totam! Iusto impedit eligendi et voluptatum exercitationem consectetur, eos iure aspernatur repellendus ducimus iste quod omnis odit necessitatibus nam eveniet molestias incidunt perferendis! In similique odio odit, est quaerat beatae consectetur veritatis, officiis fugiat iste quidem eius distinctio alias! Similique hic culpa quos necessitatibus cum facilis consequuntur iste voluptas, reiciendis officia odio adipisci. Numquam, est rerum! Commodi nesciunt quae blanditiis neque odio ducimus, adipisci sit perferendis ipsam eos repellat labore doloribus, praesentium assumenda ex facilis, totam dolore sint veritatis optio sequi? Vitae, impedit suscipit ratione repudiandae molestiae sit beatae obcaecati accusantium porro explicabo blanditiis recusandae, culpa voluptatibus. Quod odio eaque molestias illo recusandae autem rerum sint eos sapiente adipisci ratione, enim distinctio omnis repellendus nobis minima corporis animi. Dolorum recusandae rem iusto sint, illo quibusdam nihil praesentium voluptate quo, repellat obcaecati unde esse vel, sit consequuntur ea. Temporibus a reprehenderit modi odio repellat nesciunt rerum vitae, at quibusdam est adipisci, harum accusamus, exercitationem iste cumque?</p>

        <p class="text-justify bg-violet-100">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, nobis magnam consequuntur voluptatibus deleniti totam culpa. Tempore unde delectus fugit facere cum numquam voluptas ut rerum, doloremque natus ipsa? Quae ea ratione sequi recusandae reprehenderit perferendis error illo omnis? Adipisci vitae illum praesentium. Accusantium labore eum a quas eius illum!</p>
      </div>
    </main>
    <footer class="bg-lime-300 py-2">
      <p class="text-center">footer</p>
    </footer>
  </div>
  <script src="none.js"></script>
</body>
</html>

今回、追加したクラスが判定されてoutput.cssの下部に追加されていることが確認できます。
ページは以下のようになりました。

最後に

静的HTMLにtailwindcssを使用する流れを簡単に紹介しました。
実際にはファイルを圧縮したりhtmlにテンプレートエンジンを使用したり、typescriptを元に生成したりwebpackでバンドルしたりする処理を挟むのでもっと色々な処理を追加します。

tailwindcssのクラスにはどんなものがあるのか知りたい場合は公式の検索まどから対象のプロパティを入力すると対応するクラス名がわかるので公式ページを活用すると良いです。（英語ですが…）