Tailwind CSSのインストール方法について、3つのインストール方法と各所に参考となるチュートリアル動画をはさみながら解説していきます。 3つのインストール方法のうち、個人的なおすすめであるTailwindCSS CLIを利用してインストールする方法については詳細を解説しています。
目次:
- Tailwind CSS 3つのインストール方法（CDNを除く）
- 1. 各種フレームワークガイドにしたがってインストールする方法
- 2. Post CSSのプラグインとして使用
- 3. Tailwind CLIを用いてインストール
- Tailwind CSS実践チュートリアル: LP作成
- BootstrapとTailwindCSSの違いに触れながら、CDNを利用してミニマルなLP制作
- CLIによるTailwindCSSインストール方法も含めたLP制作のチュートリアル
- Tailwind CSSのインストールと使い方概要を掴んだら、便利なカスタマイズを試してみる
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Tailwind CSS 3つのインストール方法（CDNを除く）
Tailwind CSSをインストールする方法としては、CDNを除くと下記の3つ。
- 各種フレームワークのガイドにしたがってインストール
- Post CSSのプラグインとしてインストール
- Tailwind CLIを利用してインストール
しまぶーさんは1および2の方法を推奨。私が受講したUdemyの動画では3の方法が推奨されていました。
個人的には3の”Tailwind CLIを利用するインストール方法”で良いのではないかと思います。
以下、3つのインストール方法それぞれについて簡単に紹介と補足説明をしていきます。
1, 2の方法については注意点などに触れる程度で、3については詳細を解説します。
1. 各種フレームワークガイドにしたがってインストールする方法
Next.jsなど。
2. Post CSSのプラグインとして使用
Post CSSのプラグインとしてTailwind CSSを利用する方法とのこと。
下記コマンドでpost CSSの設定ファイルを含む、設定ファイルを作ることができる。
$ npx tailwindcss init -p npmでのビルドがうまく働かないときは、Post CSSではなく、Post CSS CLIを利用する。
$ npm uninstall postcss
$ npm i -D postcss-cli■ Tailwind CSS Ver.3でのインストール手順
v3で色々と方法が変わっているので注意。下記動画がもっとも最新版に準拠している。
公式ステップ3の”Configure your template paths”で、テンプレートファイルを指定していなかったところが詰まったポイント。
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}contentのテンプレートファイルのところには、*.html のように、HTMLファイルすべてを指定するとよい。
また、変更を即時反映させたい場合には開発時にビルドをかけておく。
■ Node.jsのインストールとアップデート
3. Tailwind CLIを用いてインストール
受講したUdemyの講座ではTailwind CLIの利用を推奨されていました。私はこちらの方法でインストールしています。
基本的にはTailwind CSS公式Docsにしたがいます。
公式Docsにはありませんが、最初にターミナルから下記を実行しましょう。
■ package.jsonを生成
インストールしたパッケージの情報などを書き出したpackage.jsonが自動生成されます。
$ npm init -y
// # npm = Node Package Managerあとは公式Docsの通りに実行。
$ npm install -D tailwindcss
or
$ npm i -D tailwindcss-Dはdev Dependenciesの意味。
■ tailwind.config.js（Tailwind設定ファイル）を生成。
// # tailwind.config.jsを生成
$ npx tailwindcss inittailwindクラスをもつJavaScriptファイルを監視する先のパスを設定します。
Add the paths to all of your template files in your tailwind.config.js file.
公式Docsでは下記。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}srcフォルダを作成しない場合、たとえば下記のようにプロジェクトディレクトリ直下（ルート直下）のhtmlおよびjsを監視するようにします。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}■ input.cssを手動作成し、Tailwindディレクティブを記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;■ Tailwind CLIビルドプロセスを開始
$ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch各オプションの意味:
- -i: インプット先パス
- -o: アウトプットする先のパス
- —watch: インプット先の変更を監視し、変更があれば随時アウトプットする
起動する際、上記コマンドを毎回打ってもよいですが、package.jsonにnpmスクリプトを作成しておくことで任意のスクリプト名から実行できます。
// buildスクリプトとwatchスクリプトを作成。
// -i, -oの指定パスは、変更したい場合には任意のパスを指定
"scripts": {
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
"watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
},作成したbuildスクリプトを実行して、ビルドプロセスを実行。（1回きり）
$ npm run buildTailwindによってビルドされたCSSがアウトプット先の ./dist/output.css として書き出されます。
■ htmlファイルを作成して確認（任意）
下記のようなテストhtmlを作成して確認。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<!-- アウトプット先のパスをCSS参照先に指定 -->
<link rel="stylesheet" href="css/style.css" />
<title>Simple Tailwind Starter</title>
</head>
<body>
<!-- Tailwindクラスを指定して確認 -->
<h1 class="text-3xl bg-red-100">Simple Tailwind Starter</h1>
</body>
</html>package.jsonに作成したnpmスクリプトであるwatchスクリプトを実行して、監視ビルドプロセスを立ち上げます。
$ npm run watch別のterminalタブでlive-serverを立ち上げます。適宜Tailwindクラスを変更してブラウザから確認。
$ live-serverまたはVS Code Extensionのlive-serverでもOK。
Tailwind CSS実践チュートリアル: LP作成
下記YouTubeのチュートリアルが手を動かしながら概要を掴めそうです。（英語）
BootstrapとTailwindCSSの違いに触れながら、CDNを利用してミニマルなLP制作
こちらは実際にやってみました。40分程度とコンパクトな内容でTailwindCSSのメリットに触れながらLP制作をする内容。
この動画ではCodePenを利用して、Tailwind CDNを利用する方法で解説しています。そのためTailwind CSS自体のインストール作業は含まれません。
CLIによるTailwindCSSインストール方法も含めたLP制作のチュートリアル
TailwindCSS CLIでのインストール方法から説明してあります。node.jsやnpmのインストールから解説されています。
Tailwind CSSのインストールと使い方概要を掴んだら、便利なカスタマイズを試してみる
Tailwind CSSの使い方について概要をつかめたら、何度も繰り返して割り当てることになるクラス名を再利用する方法や、外部フォント読み込み、独自カラーの設定などを試してみましょう。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
この記事の気になった箇所を読み返す:
- Tailwind CSS 3つのインストール方法（CDNを除く）
- 1. 各種フレームワークガイドにしたがってインストールする方法
- 2. Post CSSのプラグインとして使用
- 3. Tailwind CLIを用いてインストール
- Tailwind CSS実践チュートリアル: LP作成
- BootstrapとTailwindCSSの違いに触れながら、CDNを利用してミニマルなLP制作
- CLIによるTailwindCSSインストール方法も含めたLP制作のチュートリアル
- Tailwind CSSのインストールと使い方概要を掴んだら、便利なカスタマイズを試してみる
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Category:
Tags:
