Tailwind.cssの
開発環境構築-基礎編 #1/2
tailwind.cssは、フロントエンド開発における人気のあるCSSフレームワークです。このフレームワークは、HTML要素にスタイルを適用するためのクラスベースのアプローチを提供します。その主な利点の一つは、不要なCSSがデータに保存されず、書かれたコンテンツのみが適用されるため、ウェブサイトの負荷が軽減されることです。今回はそんな便利なtailwind.cssの構築手順を説明していきます。
Node.js
Node.jsは、サーバーサイドでJavaScriptを実行するためのオープンソースのランタイム環境です。ブラウザでクライアントサイドで実行されるJavaScriptとは異なり、Node.jsはサーバーサイドで実行されます。tailwindを構築するためには、Node.jsが必要です。※Node.jsの構築については、ドキュメントを十分に確認してから操作してください。
公式サイト
https://nodejs.org/ja
推奨バージョンと最新のバージョンがありますが、推奨バージョンをおすすめします。各オペレーティングシステムに基づいてダウンロードしてください。
インストール後、npm・npxコマンドを使用することができます。バージョンを確認するには、npm -v / npx -vコマンドを使用してください。バージョンが表示されれば問題ありません。
構築の手順
公式のドキュメント通りに進めて行きます。リンクはこちらです。
ここでは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の独自のクラスが適用されていることが確認できます。これで構築は完了です。
便利な拡張機能
チートシート
https://nerdcave.com/tailwind-cheat-sheet
Tailwind CSS IntelliSense (VS Code 拡張機能)
Tailwind CSS IntelliSenseという拡張機能を使うことで、クラスのオートコンプリートや検証機能を利用できます。これにより、Tailwindのクラスを簡単に追加することができます。
headwind (VS Code 拡張機能)
headwindは、Tailwind CSSクラスを整理し、一貫性を保つためのVS Codeの拡張機能です。これにより、クラスの順序が自動的に並べ替えられ、コードの可読性が向上します。
- 記述したCSSのみが適用されるため、パフォーマンスが良い。
- 人気のフレームワークであり、有益な情報を取得しやすい
- 構築が容易である
- 人気のフレームワークのため、便利なツールが揃っている