Tailwind.cssの構築 #1/2

はじめに

概要

tailwind.cssは、フロントエンド開発における人気のあるCSSフレームワークです。このフレームワークは、HTML要素にスタイルを適用するためのクラスベースのアプローチを提供します。その主な利点の一つは、不要なCSSがデータに保存されず、書かれたコンテンツのみが適用されるため、ウェブサイトの負荷が軽減されることです。今回はそんな便利なtailwind.cssの構築手順を説明していきます。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。なお、こちらの環境構築に関する責任は負いかねますので、ご了承ください。Node.jsの構築については、ドキュメントを十分に確認してから操作してください。

読者

Tailwind.cssの開発環境構築-基礎編は、最初にどこを理解するとよいですか？

木村

使用するツールの役割、設定ファイルの場所、実行する順番を先に整理すると、環境差によるつまずきを減らせます。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

Node.js

Node.jsでは、Tailwind.cssの開発環境構築-基礎編 #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

Node.jsは、サーバーサイドでJavaScriptを実行するためのオープンソースのランタイム環境です。ブラウザでクライアントサイドで実行されるJavaScriptとは異なり、Node.jsはサーバーサイドで実行されます。tailwindを構築するためには、Node.jsが必要です。※Node.jsの構築については、ドキュメントを十分に確認してから操作してください。公式サイト https://nodejs.org/ja 推奨バージョンと最新のバージョンがありますが、推奨バージョンをおすすめします。各オペレーティングシステムに基づいてダウンロードしてください。インストール後、npm・npxコマンドを使用することができます。バージョンを確認するには、npm -v / npx -vコマンドを使用してください。バージョンが表示されれば問題ありません。

Node.jsで押さえたいポイント

Node.jsは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

Node.jsの確認方法

実行前後のバージョンと設定値を控え、再起動後も同じ動作になるか確認します。チーム作業では、個人のパスや秘密情報を設定ファイルへ固定しないことも重要です。

構築の手順

構築の手順では、Tailwind.cssの開発環境構築-基礎編 #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

公式のドキュメント通りに進めて行きます。リンクはこちらです。

手順① ここではtailwindというフォルダでVsCodeを起動します。(フォルダ名は何でも良い)ドキュメント通り進めてください。こちらの動画も参考にしてください。

手順② npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch 必須ではありませんが、こちらのコマンドを使いやすくするために、npmコマンドで起動できるようにします。まずは、npm init -yで初期化してみてください。以下動画を参照ください。

scriptsでは、「dev」と記述しました。（何でも構いません。こちらがコマンドのキーとなります）。一般的には、テスト環境では「dev」が使用され、本番環境では「build」が一般的です。「npm run dev(キー)」を実行すると、先のコマンド「npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch」が実行されます。

手順③ srcフォルダの中にindex.htmlを作成し、ドキュメントのコードを添付しましょう。

tailwind独自のクラス

<h1 class="text-xl font-bold underline">Hello world!</h1>

起動するためには、先ほど説明したnpm run devコマンドを使用します。その後、output.cssファイルがdistフォルダに自動的に生成され、HTMLのh1タグに追加したtailwind.cssの独自のクラスが適用されていることが確認できます。これで構築は完了です。

構築の手順で押さえたいポイント

構築の手順は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

構築の手順の確認方法

便利な拡張機能

便利な拡張機能では、Tailwind.cssの開発環境構築-基礎編 #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

チートシート

https://nerdcave.com/tailwind-cheat-sheet

Tailwind CSS IntelliSense (VS Code 拡張機能)

Tailwind CSS IntelliSenseという拡張機能を使うことで、クラスのオートコンプリートや検証機能を利用できます。これにより、Tailwindのクラスを簡単に追加することができます。

headwind (VS Code 拡張機能)

headwindは、Tailwind CSSクラスを整理し、一貫性を保つためのVS Codeの拡張機能です。これにより、クラスの順序が自動的に並べ替えられ、コードの可読性が向上します。

実装前に確認しておきたいこと

ここでは、Tailwind.cssの開発環境構築-基礎編を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

使用するツールの役割、設定ファイルの場所、実行する順番を先に整理すると、環境差によるつまずきを減らせます。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

Tailwind.cssの開発環境構築-基礎編が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

まとめ

記述したCSSのみが適用されるため、パフォーマンスが良い。
人気のフレームワークであり、有益な情報を取得しやすい
構築が容易である
人気のフレームワークのため、便利なツールが揃っている

Tailwind.cssの開発環境構築-基礎編 #1/2

目次