Tailwind CSSを導入するーしまぶーさんの動画からメモ_φ(･_･

  • 投稿日
  • 著者 tanatiyo
  • カテゴリー TailwindCSS

参考にしたのはしまぶーさんの動画です。全部で5回分の動画があります。無料で見れるので、TailwindCSSがどういったものなのか、視聴してみました。

インストール方法として、CDNはいろいろ制約がありそうですね。。
公式サイトで紹介されているようなフレームワークで使うか、PostCSSのプラグインで使うか、どちらかが良さそうですね。
「PostCSS」というのが出てきましたが、そもそもそれって何？？？
調べてみました↓

PostCSSは、CSSの後処理（Post-processing）を行うためのツールで、JavaScriptを使ってCSSを操作できるようになります。

PostCSSは、CSSの前処理ツールであるSassやLessのような代替品ではありません。SassやLessは、CSSを作成するための独自の言語を提供し、その言語をコンパイルしてCSSに変換することで、ブラウザが理解できるCSSを生成します。一方、PostCSSは、既存のCSSを操作し、ブラウザによって解釈可能なCSSに変換するためのプラグインを提供します。

PostCSSは、CSSの自動プレフィックスやネスト、モジュール化、最適化など、様々なタスクを処理するために使用されます。また、PostCSSは、CSSの変数や関数のサポートを提供し、CSSをより効率的に書くことができます。

公式サイト：https://postcss.org/

Post CSSのプラグインとして、まずはnpmでインストールしてみる

それでは、しまぶーさんの動画の第3回の動画と公式サイトを見ながら、導入してみようと思います。

Install Tailwind CSS using PostCSS – Tailwind CSS
Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
tailwindcss.com

Node.jsを入れておくのは大前提。

node -v

や

npm -v

で確認しておきます。

基本的には上記講座の第3回目の内容に沿って一通り揃えていきます。

index.html
style.css
node_modules
package.json
package-lock.json
postcss.config.js
tailwind.config.js
dist.css

動画内にもありましたが、 パッケージは「postcss」ではなく、「postcss-cli」なので、それをインストールすること。また、動画内にひととおり揃えたところで

npm run build

すると、無事に動作しました。しかしこの時点では、編集⇨更新⇨ページリロードをしないと、設定が反映されないことに。。

また、ターミナルに以下の様なエラー文が表示されました。

warn – The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn – Update your configuration file to eliminate this warning.
warn – https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
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 CSSのバージョン3.0で変更されたpurge/contentオプションに関する警告です。

以前のバージョンでは、purgeオプションでCSSのプルーニングを設定するために使用され、contentオプションは特定のファイル内のクラスを抽出するために使用されていました。しかし、バージョン3.0では、これらのオプションが変更され、より明確な機能となりました。

具体的には、purgeオプションは、使用されるクラスを抽出するために使用され、contentオプションは、コンテンツを含むファイルのパスを指定するために使用されます。このため、バージョン3.0以降では、contentオプションは必須となり、設定がない場合は警告が表示されます。

このエラーメッセージでは、contentオプションが定義されておらず、Tailwind CSSの設定が古い可能性があることを示しています。エラーメッセージには、Tailwind CSSのバージョン3.0にアップグレードする方法や、contentオプションの設定方法が記載されているリンクが示されています。これらのリンクを参照して、設定ファイルを更新する必要があります。

公式ドキュメント: https://tailwindcss.com/docs/upgrade-guide#configure-content-sources, https://tailwindcss.com/docs/content-configuration

ということで、公式ドキュメントを確認。

Upgrade Guide – Tailwind CSS
Upgrading your Tailwind CSS projects from v2 to v3.
tailwindcss.com

Configure content sourcesというセクションに具体例のソースコードとともに説明がありました。
とりあえず、その通りに設定を変更し直して「npm run build」すると、エラー表示は消えました。

【ショートカット】
「command」＋「 option」＋「 U」でソースコードを一瞬で表示できる。
よく使うらしいので、ここで覚えておこう_φ(･_･

第4回の動画でPurgeとMinifyについて

Purgeに関しては上のセクションで一旦削除しています。tailwind.config.jsにcontentオプションをつけて設定しただけで、自動的にpurgeもされていました。それなので、今回は特にPurgeに関しては設定をしませんでした。

普通の開発では「npm run dev」、本番環境では「npm run build」で動作するように、package.jsonのscriptsオプションに「dev」と「build」の設定をしていきました。

CSSの軽量化で「cssnano」というパッケージもインストール。
package.jsonの「devDependencies」へ「cssnano」 オプションを追加。
「dev」ではminifyを返さない、「build」ではminifyを返す。

"scripts": {
    "dev": "postcss style.css -o dist.css",
    "build": "NODE_ENV=production postcss style.css -o dist.css"
  },

「command」＋「option」＋「U」でソースコードを表示し、「dist.css」のリンクをクリックしてみると、devコマンドとbuildコマンドでのCSSの様子の違いが分かります。

第5回の動画で監視状態にする

上記のscriptsの「dev」に付け加えます。
具体的には「TAILWIND_MODE=watch」を前に、後ろに「-w」を付け加えます。

 "dev": "TAILWIND_MODE=watch postcss style.css -o dist.css -w",

これだけで、devコマンドを実行している間、ファイル編集して上書き保存をするだけで、その設定が反映されるようになりました。
この設定をしておくと、開発がとっても楽になるのでおすすめです！

この記事を書いた人

tanatiyo

記事一覧