教育動画法人研修システム開発メンバー紹介TECH BLOGお問い合わせ
教育動画法人研修システム開発メンバー紹介TECH BLOGお問い合わせ

【入門者向け】Tailwind CSS開発環境を構築しよう

Home > TECH BLOG >【入門者向け】Tailwind CSS開発環境を構築しよう
公開日：2022年8月1日　更新日：2022年8月3日
著者：藤澤 勇樹(FUJISAWA Yuki)

記事概要

Tailwind CSS開発にこれから挑戦しようという方が、スムーズに開発スタートできるよう環境構築の方法をまとめてみました。
Node.js等のインストールなど多少、手間な作業がありますが、Web開発では必須になってくるので是非、挑戦してみてください。

対応OS

  • Mac
  • Windowsは対応してないのでご注意ください

1. Node.jsのインストール

Bash
参考記事
nvm(Node Version Manager)を使ってNode.jsをインストールする手順 - Qiita
Node.jsの開発環境を構築するにあたって、nodebrew、nvmのようなバージョン管理できるライブラリを使うことが必須になっていると思います。 個人的には、nvmがオススメなのでをnvmを使ったNode.jsのインストール&バージョンアップ手順を紹介します。 結論：人気度からnvmがオススメ Googleトレンド(2021年4月27日時点)で、nvmがnodebrewを圧倒的に上回っている。 ＊ Homebrewでのインストール方法を掲載しているブログもありますが、現在、 Homebrewでのインストールは公式でサポートしてない のでHomebrewでのインストールはしない方が良いです。 以下、 https://github.com/nvm-sh/nvm より引用 次に正常にインストールされているか検証します。 nvm と表示されたらOKです。 もしここで、 nvm: command not foundと表示されたら、以下コマンドを実行して、もう一度、 command -v を実行してみてください bashの場合 zshの場合 stableは、Node.jsの安定したバージョンをinstallするというオプション。 alias defaultで、安定したバージョンをdefaultにします。 LTS(Long Term Support)バージョンを使う場合 LTSとは長期間に渡って、安全なメンテナンスリリースのみが実施されるバージョンです。 最新バージョンを使う理由が特に無ければ、安定しているLTSを使うのがオススメです。 LTSのリリースは以下、6つの修正に限定されます。 Bug fixes; Security updates; Non-semver-major npm updates; Relevant documentation updates; Certain performance improvements where the risk of breaking existing applications is minimal; Changes that introduce large amount of code churn where the risk of breaking existing applications is low and where the change in question may significantly ease the ability to backport future changes due to the reduction in diff noise.
https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a

2. Visual Studio Codeのインストール

以下サイトから、Macを選択してダウンロードしてください。

3. Visual Studio Codeの拡張機能のインストール

以下記事を参考に拡張機能をインストールします。

4. Chromeプラグインのインストール

5. HTML準備

  • 「Use this templete」を実行してください。
「Use this templete」ボタン
「Use this templete」ボタン
  • 「hello-tailwind-css」というリポジトリ名で「Create repository from templete」を実行します。
テンプレートからリポジトリ生成する
テンプレートからリポジトリ生成する
  • リポジトリURLをコピーします
 
リポジトリURLのコピー
リポジトリ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 が設定されていることを確認してください。もし設定していない場合は、以下参考に設定してください。
  1. index.html画面を開く
    1. src/index.html > 右クリック > Open with Live Server
    2. http://127.0.0.1:5500/src/index.html が自動で開く
    3. CSSが効いてないので、巨大な画像が表示される
      4.  
Live Serverの起動
Live Serverの起動
  1. 以下、コマンドをターミナルで実行
      2. Bash
  1. src/index.htmlの画面が正常に表示されることことを確認する
index.html画面
index.html画面
  1. ヘッダーの背景色を変更してみる
    1. headerタグのclassに"bg-slate-300" を追加。
      1. <header class="bg-slate-300 px-6">
    2. 画面の背景に色がつきます。
        3. bg-slate-300は、Backgroud Colorの指定です。詳しくは、以下公式ドキュメントを参照
　
ヘッダー背景色の変更
ヘッダー背景色の変更
 
以上でTailwind CSS開発環境の構築は完了です。

まとめ

最後までご閲覧、ありがとうございました。
Tailwind CSS開発をスタートできるよう環境構築の方法をまとめてみました。開発環境にあたっては以下実行する必要があり一手間ですが、一度構築してしまえば便利に開発できるかと思います。
  • Node.jsのインストール
  • Visual Studio Codeのインストール
  • Visual Studio Code拡張機能のインストール
  • Chromeプラグインのインストール
  • Tailwind CSSライブラリのインストール
  • $ npm run build をターミナルで実行してCSSファイルを生成する

関連ブログ

ブログ一覧
Twitterでシェア