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

Tailwind
#Tailwind
★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

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

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

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

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

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

node -v

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

node -v
v16.15.0

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

ファイル構造

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

最終的なファイル構造

環境構築

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

npm init

するとファイル構造は

行程1ファイル構造

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

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

行程2ファイル構造

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

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

npm install -D tailwindcss
npx tailwindcss init

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

行程3ファイル構造

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

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

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

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

行程4ファイル構造

「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>
npm run build

そしてブラウザで結果を確認して、無事レイアウトがついていたら成功です。

ちなみに失敗した場合は、こういった表示になります。

結果

これで動作確認が終了しました。お疲れ様です。

最後にもう一度ファイル構造を載せておきます。

行程ラスト

生のCSSを書いたことがある方は、Tailwindを使うと感動するかもしれません。実際、僕は感動しましたね。

これからTailwindを楽しく書いていきましょう( *´艸`)ではでは!お疲れ様でした。

こちらの記事からの発展はこちらから

興味がある方はこちらのライトブログもご一読ください。

 





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる