React 開発日記。開発からデプロイまで。#4

Day#4 〜Tainlwindのセットアップ〜

わんばんこ。みくのすけです。

今日は実際に手を動かすのだ。参考にしたのはいつも通りしまぶーさんのYouuTube動画です。

では、さっそくいってみよ！

ゴール

Tailwindcss を使ってHello Worldを装飾。色：スカイブルー、文字の大きさ：大っきく

key word

post css, autoprefixer, purge css, dist, PostCSS Language(VSCcod用機能拡張), Tailwind CSS IntelliSense(VSCode用機能拡張）

３つのインストール方法

公式ドキュメントによると用意されたインストール方法は以下の３つ

• PostCSS
• CLI
• CDN

このなかで推奨しているのがPostCSS。理由としてはいろんなフレームワークでPostCSSが既に利用されていることが多いことや、PostCSSプラグインのautoprefixerを既に利用していることが多いことがあるとのこと。この辺はいまいちピンときていない。PostCSS？なんやそれ。

CLIは簡単に導入できるらしい。しかし、PostCSSがおすすめとのことなので今回は触れない。このへんもようわからん。

CDNは機能制限があるためつかわない。

ということで、ここではPostCSSについて書いていく。

公式ドキュメントを貼り付けておく

https://tailwindcss.jp/docs/installation

※PostCSSとは

これだけで一記事書ける内容ですね。一言で言うと「JavaScriptでCSSをプロセスするための仕組み」のようです。チラ見したリンクを貼っておきます。

PostCSSってなに？導入前に知っておきたいことを箇条書きでまとめてみた

install

ここからは実際にインストールしていく。基本的にはいつも通りしまぶーさんのYouTubeの通り進めているのでここでは気づいたこと、つまずいたところをポイントとしてあげるに留めます。

npx tailwindcss init -pで設定ファイルを作成

以下コマンドで３つのパッケージをインストール

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -pで設定ファイルを作成

以下コマンドでTailwindCSSやPostCSS用のファイルを作る。-pってなんだよ。

npx tailwindcss init -p

しまぶーさんのYouTubeの中でtailwind.config,jsの中身を見るのだが自分のと違っている。これはtailwindがver.2からver.3となっているため。のちにこの違いでwarnが出るのだがそれは後ほど。

styles.cssファイルを作成

styles.cssファイルを作成して下記をペースト。VSCodeで書くと波下線がでて注意を促してくる。

機能拡張のPostCSS Languageをインストールすることで回避できる。

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

index.htmlファイルを作成

スタイルのリファレンス先を指定する。ここではdist.cssとした。

<link href="/dist.css" rel="stylesheet">

dist.cssファイルを作成

root直下にdist.cssを作成。ここにビルドした後のコードが書き込まれる。

distという名前はビルドした後によく用いられる名前のようだ。

distributionの略。配布物の意味。

ようやくここまできました。以下の様に書きました。

Tailwindのクラスを当てる。

<h1 class="text-6xl text-cyan-600">hello world</h1>

ここで便利機能を紹介します。

Tailwind CSS IntelliSense

VSCode用の機能拡張。補完機能により候補や色などを表示してくれます。公式ドキュメントの方にも紹介されていますので安心してください。履いてますよ。

ビルドコマンドの作成

package.jsonにビルドコマンドを書きます。

postcssを使って styles.css から dist.css へ output （-o）するです。

//package.json 
"scripts": {
    "build": "postcss styles.css -o dist.css"
  },

コマンドの実行

npm run build

先程のコマンドを実行します。するとここでエラーが。

postcss: command not found

どうやらpostcss ではなく postcss cliを入れなければいけなかった様です。

postcssのuninstall

npm uninstall postcss

npm i -D postcss-cli

postcss-cliを入れたのちnpm run build を実行すると今度は正常に動作します。

動画にある様にdist.cssの方にビルドファイルが出力されていました。

しかし、warningがでています。

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

これは先ほど少し述べたように、tailwindのバージョン違いによるものです。動画はv2、私が今やっているのはv3です。

/* tailwind.config */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* tailwind.config */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

conten: 部分にパスを指定することで解決しました。公式ドキュメントにも記載があります。

この他に動画内では19万行ほどあったものが500行まで減っています。

疑問としては、

postcssからpostcss cli に変更したのはpackage.jsonのコマンドを実行するためだったのだろうか？

gulpなどを使う場合にはpostcssのままでよかったのだろうか？

Hello World

コードを下記の様に書き直しました。

<h1 class="text-6xl text-cyan-600 p-10 bg-gray-200">Hello World</h1>

狙い通りの表示になりました。

実際にcssの更新は変更する→保存→run build→更新となります。正直いって面倒。

この辺はおそらくgulpなどを使って自動で保存した時点でビルドできる様になるのだろう。

おまけ

autoprefixe：Can I Useの情報を元に、必要に応じてベンダープレフィックスを適用してくれるらしい。

まとめ

TailwindはPostCSSのプラグインとして使う。流れとしてはPostCSSを使ってTailwind CSSをビルドしてスタイルを当てる。

今回はビルドするのにPostCSS CLIをつかってコマンド実行した。