株式会社プランニングA
お問い合わせ
株式会社プランニングA
service
document
company
column
contact

コラム

column
2021.02.17

TailwindCSSとは?laravel-mixを使った環境構築と使い方

TailwindCSSに興味を持ったのは弊社で使用しているPHPフレームワークのLaravelに採用されているからです。
最初は食わず嫌いでしたが、tailwind CSSを薦めている記事が多くなってきたため、いざ試してみたらその理念に共感できるようになっていきました。

tailwindCSSとは

TailwindCSSはCSSのフレームワークです。
Bootstrapなど既存のCSSフレームと決定的に違うのはTailwindが理念に「utility-first」を謳っていることです。
ユーティリティーファーストとは以前のCSSフレームワークがクラス名を入れれば一発でデザインが決まるのに対し、tailwindではCSSプロパティーと似たクラス名を指定していきます。これをユーティリティーと称しています。
例えばmargin: 2.5rem;の場合、.m-10を入れるといったようにです。
他のCSSフレームワークではデザインを微調整するにはクラス名を指定した上で、そのクラスを上書きする必要がありました。

TailwindがCSSコーディングの決定打になるかはわかりませんが、ここ数年のうちはCSSコーディングのベストプラクティスの一つでしょう。
TailwindをマスターすることでコーディングにTailwind（追い風）が吹きスピードアップできるかもしれません。

メリット

コーディングスタイルを統一化できる。
他人が作ったコードを理解するのは時間がかかります。Tailwindでコーディングスタイルを統一すれば他人が作ったコードも即座に理解できます。

コンポーネント化
vueやreactといったフロントエンド界隈ではコンポーネント化が進んでいます。コンポーネント化とはページを部分単位で部品化し、部品内でプログラムを完結させる方法です。コンポーネント化することで別のページで再利用しやすくしています。
Tailwindもコンポーネント化を想定しており、コンポーネントに指定したCSSを別ページで利用してもCSSを変更せずにそのまま利用できるようになっています。

CSS記述量が減る。
tailwindはhtmlにクラス名を指定していくのでCSSを書くことはほぼ無くなります。
これはコーディング時間の大幅な縮小に繋がります。
tailwindだけで難しい場合はtailwind CSSの設定を上書きしていくことでどのようなデザインにも対応可能です。

レスポンシブ対応
多くのCSSフレームワークがそうであるように、レスポンシブを前提に作られています。

コードが再利用できる
tailwindで作成されたコードはhtml部分をコピーすれば再利用可能です。
これはCSSが親要素等に依存していないからで、別サイトや別ページで利用する際も再利用可能です。

CSSのデータ量を縮小できる
tailwindにはPurgeCSSが含まれているため、使用していないCSSを削除した本番用のCSSが作成できます。
またwebpackと一緒に使うことで、cssサイズをより縮小できます。
もうGoogle PageSpeedに注意されることはありません。

デメリット

学習が必要
CSSプロパティーと似たクラス名のため、覚えやすいですが、やはり学習は必要で学習時間を要します。
またフロントエンドフレームワークなどとの連携も考えて作られているため、例のごとく環境構築の敷居が高いです。

HTMLが汚れる
htmlに直接、スタイルを書くため、htmlの情報量が増えます。
これは私も直感的に拒否反応があります。
しかしCSSプロパティーを見る際はデベロッパーツールなどを使用することが多いため、問題ないかなと思います。
また、@applyを使用してCSSに直接ユーティリティクラスを書くことも可能です。

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

簡単に使うだけなら

すぐに試す場合はCDNで提供されているため、読み込むだけで使用できます。
しかし、このファイルは2MB近くあるため、本番環境で使うのは厳しすぎます。
またCDNではデフォルトテーマをカスタマイズできなかったり、CSSのファイルサイズを縮小したりできないため、tailwindの本領を発揮させることはできません。

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

laravel-mixを使った環境構築

以下にtailwindの環境構築方法をご説明してみます。
tailwindだけのインストールではなく、laravel-mixを使ったwebpackも含んだインストール方法になります。npmはあらかじめインストールしてください。

macですとターミナル、windowsですとコマンドプロンプトを立ち上げてください。
cdコマンドでプロジェクトをスタートするディレクトリまで移動してください。
デスクトップでもどこでもよいです。ディレクトリ名は何でもよいです。

lsして何もファイルがないことを確認して、以下のコマンドでpackage.jsonファイルを作成してください。

npm init -y

package.jsonをテキストエディタで開いてください。
descriptionの項目が空ですとエラーになりますので適当に何か入れてください。

"description": "tailwindをテストします！",

laravel-mixをインストールします。

npm install laravel-mix --save-dev

webpack設定ファイルを作ります。

touch webpack.mix.js

作成したwebpack.mix.jsに以下を記載してください。

let mix = require('laravel-mix');
mix.js('src/app.js', 'dist').setPublicPath('dist');

srcディレクトリを作り、app.jsファイルを作成します。
app.jsに以下をコピペしてください。
hello worldをアラートするjavascriptファイルです。

alert('hello world');

それではlaravel-mixを使ってみます。
ターミナルに以下を打ち込んでください。
distフォルダとwebpackされたapp.jsファイルが出来上がります。

npx mix

適当にhtmlファイルを作成しdist/app.jsを読み込んでください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="dist/app.js"></script>
</head>
<body>
</body>
</html>

htmlを開いてhello worldがアラートされたら成功です。
次にtailwindをインストールしていきます。

npm install tailwindcss

srcディレクトリにapp.cssを作成して以下をコピペしてください。

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

次にapp.cssを使うため、webpackの設定を変更します。
app.cssにtailwindcssが含まれる形です。

let mix = require('laravel-mix');
mix.js('src/app.js', 'dist')
	.postCss('src/app.css', 'dist', [
	require('tailwindcss'),
])

htmlにdist/app.cssを読み込みます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="dist/app.js"></script>
<link href="dist/app.css" rel="stylesheet">
</head>
<body>
</body>
</html>

このままですと全部入りのTailwindcssが作成されapp.cssのファイルサイズが大きいため、pagespeed等では満足のいくスピードが出ないでしょう。そのため使用したCSSだけ利用するために以下の方法でパージします。
これをすることでCSSのファイルサイズを3.74mbから11.7kbまで縮小できます。

tailwind.config.jsを作り、purgeを追加します。
tailwind.config.jsは他にもTailwindの初期設定を上書きするために使用されます。

npx tailwindcss init
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
//ここから
  purge: {
    enabled: true,
    content: ['./*.html']
  },
//ここまで追加
  plugins: [],
}

webpackしてみます。

npx mix

tailwindcssを使ってみます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="dist/app.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto mｔ-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>
</div>

</body>
</html>

次のボタンが表示できれば成功です。

阿部

お困りのことがございましたら
お気軽にご相談ください

結果につながる広告制作は
プランニングAへおまかせください。

ご相談・お問い合わせはこちら
contact