Zenn
💨

Tailwindcss v3 の環境構築方法

2022/03/15に公開
Tailwind CSS
環境構築
tech

こんにちは、フロントエンジニアのかげつぐです。
今回はTailwindの環境構築について説明していこうと思います！
Tailwindには様々なインストール方法がありますが、今回は一番無難なTailwind CLIを使用した方法でインストール方法を説明していきます。
ReactやVueを使ってやりたい人はこちらから確認してください。
では、さっそく始めていきましょう！

Tailwindをインストールするにあたって使うもの

Node.js

Node.jsはイベント化された入出力を扱うサーバサイド JavaScript環境です。最近はGOなんかと比較されますね。node -vとして自分のパソコンにNode.jsが入っているか確認しましょう

PS C:\Users\kagetugu> node -v
v16.14.0

このようにバージョンが表示されていれば大丈夫です！

yarn

yarnはNode.jsのパッケージ管理ツールです。npmと比較されますが、僕は好みでyarnを使ってます。この記事でもyarnを使いますが好みですのでどちらでも構いません。
Windows PowerShellでyarn -vと入力してみてください。

PS C:\Users\kagetugu> yarn -v
1.22.17

このようにバージョンが表示されていれば大丈夫です！

ファイルの用意

今回はデスクトップにtailwindというファイルを作りその中にtailwindをインストールしていきます。

ファイル構成

今回は下のようなディレクトリ構成でTailwindをインストールしていきます。

各ファイルの説明とその手順

package.jsonの作成

ここにインストールしたパッケージがjsonのオブジェクト形式で表示されます。
tailwindファイルに対してエディタのターミナルでyarn initと入力してください。
するとしたのようにquestionという項目が表示されますが、Enterキーを押していただければ次に進みますので気にしないでください。

PS C:\Users\kagetugu\Desktop\tailwind> yarn init
yarn init v1.22.17
question name (test):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 5.81s.

最終的に、success Saved package.jsonと表示されればpackage.jsonの作成は完了です。

index.htmlの作成

こちらは特段特別な操作は必要ありません。いつも通りにHTMLファイルを作成してください。

styles.cssの作成

後ほどtailwindのクラスをCSSのプロパティに変換するディレクティブを記入するファイル。

styles_dist.cssの作成

変換されたCSSプロパティが記入されるファイル。実際にはこのファイルをHTMLのlinkタグに設定して、読み込みます。

Tailwindcssを公式のドキュメントに沿ってインストール

ここからはTailwindcssの公式ドキュメントを読みながら一緒にやっていきましょう

Tailwindcssのインストール

先ほど作成したtailwindファイルに対してエディタのターミナルでyarn add -D tailwindcssと入力します。

yarn add -D tailwindcss

tailwind.config.jsのインストール

tailwind.config.jsは自分でクラスを作成し実際にtailwindcssのクラスとして実行できるようにする設定ファイルです。これで、デフォルトの設定だけでなく好きな色やフォントを設定できます。
ここではエディタのターミナルでyarn tailwindcss initと入力します。
これで、tailwind.configファイルが作成されるかと思います。

yarn tailwindcss init

tailwindcssを利用するHTMLファイルにパスを通す

tailwind.config.jsのcontentに./*.{html,js} と記述します

tailwind.config.js
content: ["./*.{html,js}"]

ここで*は「任意の」という意味です。つまり 「./( ファイルの名前 ) .(html または .js)」 という意味合いを持っています。

Tailwindディレクティブを記入する

styles.cssファイルにTailwindディレクティブを記入します。ここで、tailwindのクラスをCSSのプロパティに変換していると考えて下さい。

styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

TailwindクラスをスキャンしCSSを書き出すコマンドを記入

package.jsonファイルにscriptオブジェクトを作成し次のように記入します。

package.json
"scripts": {
 "dev": "tailwindcss -i CSS/styles.css -o CSS/styles_dist.css -w",
 }

ここでは、"devDependencies" オブジェクトの下に記入してください。
-wは--watchの略で開発モードでいちいちコマンドを入力してCSSに書く出す手間を省くためのコマンドです

Tailwindcssを動かしてみる

index.htmlにクラスを書いてみる

実際にtailwindを動かしてみましょう！
まずは、index.htmlファイルにlinkタグを作成しstyles_dist.cssファイルを読み込むようにします。styles_dist.cssにtailwindのクラスをCSSのプロパティに変換したものがありましたね。

index.html
 <link rel="stylesheet" href="CSS/styles_dis.css">

index.htmlファイルに以下のようなコードを記入してみてください。

index.html
<h2 class="text-blue-500">Hello World!!</h2>

text-blue-500はtailwindcssの色指定のクラスです。

クラスを書き出してみる

ターミナルでyarn devとしてみてください。

yarn dev

すると、下のような表記が表示されると思います

yarn run v1.22.17
$ tailwindcss -i CSS/styles.css -o CSS/styles_dist.css -w

Rebuilding...
Done in 129ms.

このように表示されれば、きちんとファイルの書き出しが行われています。

書き出したサイトを見てみる

このようにHello World!!の文字が水色になっているかと思います

minifyコマンド

上記のdevコマンドは開発モードのコマンドで、本番環境にCSSファイルをアップするときにはファイルを軽くして読み込み速度を早くするように仕掛けることが必要です。
そこで登場するのがminifyです。TailwindのドキュメントのOptimizingの部分で説明されています。

minifyしていないCSSファイルを見てみる

minifyしていないCSSファイルを見てみると下のようなコードがstyles_dist.cssファイルに書かれているかと思います。(一部抜粋)

styles_dist.css

*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

このままだとCSSファイルが重く読み込みに時間がかかってしまう場合があるので、本番環境に上げる時にはファイルを圧縮して最適化する必要があります。
そこで登場するのがminifyコマンドです。

minifyコマンドの記入

package.jsonファイルのscriptオブジェクト内に
"build": "tailwind -o CSS/styles_dist.css --minify" と追加記入してください。
--minifyで、minifyつまり、ファイルを最適化しますよと宣言しています。
scriptオブジェクトが下のようになるように記入してください。

package.json
 "scripts": {
    "dev": "tailwindcss -i CSS/styles.css -o CSS/styles_dist.css -w",
    "build": "tailwind -o CSS/styles_dist.css --minify"
  }

ここで整理すると

devコマンドでは、開発環境時にTailwindのクラスをCSSのプロパティに変換し書き出し、その変更を監視するコマンド。

buildコマンドは、本番環境時のためにCSSファイルを圧縮するためのコマンド。

と各実行環境でコマンドを分けてます。

実際にminifyコマンドを実行して確認

ターミナルで、yarn buildと打ち込んでみてください。

 yarn build

ターミナルに次のようにDone in 150ms. のような表記が出れば問題なくコマンドが実行されことを確認できます。

PS C:\Users\kagetugu\Desktop\tailwind> yarn build
yarn run v1.22.17
$ tailwind -o CSS/styles_dist.css --minify

Done in 150ms.
Done in 0.59s.

では、さっそくCSSファイルがどのようになっているか確認していきましょう。
styles_dist.cssファイルを開いてみてみると下のように、devコマンドとは違った一行にまとまったコードに変わっているかと思います。(一部抜粋)

styles_dist.css
/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;

以上でTailwindcssの環境構築は終わりとなります！

最後に

いかがでしたでしょうか。少し長くなりましたが、きちんとファイルの内容などが理解できるように記述したつもりです。なにかわからないことがあればコメント欄に記入してください！
また、こちらに手順をまとめたPDFファイルがありますので、ダウンロードして使ってみてください!

Discussion