【入門者向け】Tailwind CSS開発環境を構築しよう
公開日:2022年8月1日 更新日:2022年8月3日
記事概要
Tailwind CSS開発にこれから挑戦しようという方が、スムーズに開発スタートできるよう環境構築の方法をまとめてみました。
Node.js等のインストールなど多少、手間な作業がありますが、Web開発では必須になってくるので是非、挑戦してみてください。
対応OS
- Mac
- Windowsは対応してないのでご注意ください
1. Node.jsのインストール
Bash
参考記事
2. Visual Studio Codeのインストール
以下サイトから、Macを選択してダウンロードしてください。
3. Visual Studio Codeの拡張機能のインストール
以下記事を参考に拡張機能をインストールします。
4. Chromeプラグインのインストール
5. HTML準備
- Githubにログインしてから、以下Githubリポジトリにアクセスしてください。
- 「Use this templete」を実行してください。

- 「hello-tailwind-css」というリポジトリ名で「Create repository from templete」を実行します。

- リポジトリURLをコピーします

- 作成したリポジトリをローカルで
git clone
してください。
Bash
6. Tailwind CSSライブラリのインストール
Bash
node_modulesというディレクトリができていたらOKです。
以下、コマンドを実行して、確認してみてください。
Bash
7. Tailwind CSSの動作確認
- VSCodeを起動して、
hello-tailwind-css
ディレクトリを開きます。
- VSCodeに
Format On Save
とDefault Formatter
が設定されていることを確認してください。もし設定していない場合は、以下参考に設定してください。
- index.html画面を開く
src/index.html
> 右クリック > Open with Live Server- http://127.0.0.1:5500/src/index.html が自動で開く
- CSSが効いてないので、巨大な画像が表示される

- 以下、コマンドをターミナルで実行
Bash
src/index.html
の画面が正常に表示されることことを確認する

- ヘッダーの背景色を変更してみる
- headerタグのclassに
"bg-slate-300"
を追加。 <header class="bg-slate-300 px-6">
- 画面の背景に色がつきます。
bg-slate-300
は、Backgroud Colorの指定です。詳しくは、以下公式ドキュメントを参照
以上でTailwind CSS開発環境の構築は完了です。
まとめ
最後までご閲覧、ありがとうございました。
Tailwind CSS開発をスタートできるよう環境構築の方法をまとめてみました。開発環境にあたっては以下実行する必要があり一手間ですが、一度構築してしまえば便利に開発できるかと思います。
- Node.jsのインストール
- Visual Studio Codeのインストール
- Visual Studio Code拡張機能のインストール
- Chromeプラグインのインストール
- Tailwind CSSライブラリのインストール
$ npm run build
をターミナルで実行してCSSファイルを生成する
関連ブログ
ブログ一覧