Tailwind環境をシンプルに構築 :Tailwind

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

どもども平社員の龍ちゃんです。今回は、ReactやVueなどのフレームワークと共に使用される、CSSフレームワークであるTailwindの環境構築についての記事です。

読むのめんどいよ～環境だけくれって方は、こちらから！Tailwind公式サイトはこちらから！

今回の記事では、ReactやVueにTailwindを導入するわけではなく、NodeでTailwindのみの環境を構築するものになっています。CDNはHTMLのHeadに書き込むだけなので、お手軽に試してみたい方はそちらから..

1 事前準備　Nodeのインストール
2 ファイル構造
3 環境構築
4 動作確認

事前準備　Nodeのインストール

Nodeのインストールは、いろいろな手法がありますがすでにインストールされている方もいるかと思います。バージョンだけ確認しましょう。以下のコマンドをコマンドプロンプトに入力してください。

node -v

バージョンが返ってきた場合は、問題ありませんので次に進みましょう。以下成功例

node -v
v16.15.0

もし、Nodeのインストールがまだの方は、ネットにたくさん記事がありますのでどこかの記事に入信しましょう。

ファイル構造

最終的なファイル構造になります。最終ゴールはこちらになりますのでこれを目標に頑張りましょう。

環境構築

コマンドプロンプトを立ち上げて、環境を作りたいディレクトリに移動しましょう。まず一個目のコマンドは以下です。こちらのコマンドを打つといろいろと聞かれますが、とりあえずすべて「Enter」を押しましょう。

npm init

するとファイル構造は

このファイルのみが生成されています。

とりあえず、このディレクトリに「src」と「public」の二つのディレクトリを作成しましょう。

くどいですが、出しておきます。

次のコマンドは、Tailwindのインストールです。こちらは二つのコマンドがつながっているので、全部コピーして入力してください。

npm install -D tailwindcss
npx tailwindcss init

インストールが終了すると

こうなります。こちらでインストールが終了しました。

次は、tailwind.config.jsの中身を編集します。tailwind.config.jsを開き中身を書き換えてください。タイプミスが怖い方は、ファイルごと書き換えましょう。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

次に「src」ディレクトリの中に、「style.css」というファイルを作成しましょう。

「style.css」ファイルの中身は、以下の内容を入力してください。

@tailwind base;
@tailwind components;
@tailwind utilities;

これにて下準備は終了しました。

Tailwindを動かすために、コマンドを入力してみます。以下のコマンドを入力してください。

npx tailwindcss -i ./src/style.css -o ./public/style.css

ここで、「public」ディレクトリの直下に「style.css」が作成されて入れば成功です。

毎回、このコマンドを入力するのは大変なので、登録しておきましょう。「pakage.json」を開いてください。

このファイルを

{
  "name": "initializetailwind",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "tailwindcss": "^3.2.0"
  }
}

こう書き換えましょう。

{
  "name": "testcss",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "tailwindcss": "^3.2.0"
  },
  "scripts": {
    "build": "npx tailwindcss -i ./src/style.css -o ./public/style.css",
    "watch": "npx tailwindcss -i ./src/style.css -o ./public/style.css --watch"
  }
}

“scripts”部分を追記してください。ファイルを保存してコマンドプロンプトで

npm run build

を入力して、先ほどと同じ結果が出れば成功です。ちなみに以下のコマンドでは、ページのhtmlやCSSファイルが変更を加えられるとその都度、CSSファイルが作成されます。開発中はwatchのほうが便利ですので、パソコンのスペックに余裕がある方は、こちらをお勧めします。

npm run watch

動作確認

実際に動作確認を行いましょう。以下のHTMLファイルを「public」に「test.html」のファイルを作成してください。中身はコピー＆ペーストで大丈夫です。作成が終了したらまた、お約束コマンドを打ちましょう。

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>test</title>
</head>

<body class="bg-gray-400/40 h-screen w-screen">
    <div class="flex flex-col items-center justify-center m-auto w-full max-w-xl h-full">
        <div class="inline-block w-full text-center text-3xl">
            Tailwind 楽しいよ( *´艸｀)
        </div>
        <div class="inline-block w-full  text-center text-xl text-gray-500">
            これからTailwindをいっぱい書いていきましょう♪
        </div>
        <div class="inline-flex items-center justify-center my-10 rounded-md border-2 border-blue-400 bg-blue-300/80 w-36 h-12 font-bold text-white hover:cursor-pointer"
            onclick="onClickButton()">
            公式サイトへ→
        </div>
    </div>
</body>
<script>
    const onClickButton = () => {
        window.open("<https://tailwindcss.com/>")
    }
</script>

</html>