tailwindcssのインストール方法です。

公式ドキュメント

 

CONTENTS

tailwindcssのインストール方法

インストール方法としては、

  • CDN経由
  • npm経由

の2つの方法を記載しています。

 

CDN経由

CDN経由の場合は下記をheadタグ内に読み込ませるだけです。

<script src="https://cdn.tailwindcss.com"></script>

これだけなので、インストールはとても簡単ですが、不要なスタイルも記述されているためファイル自体がとても重たいのがデメリットかと思います。

CDNでもカスタマイズや公式プラグインは利用可能です。

CDN経由の公式ドキュメント

https://tailwindcss.com/docs/installation/play-cdn

 

npm経由

npm経由でのインストール方法です。
Tailwind CLIを使用してインストールしていきます。

まず、プロジェクトディレクトリで下記のコマンドを入力します。

$ npm install -D tailwindcss

続いて下記コマンドを実行すると、

npx tailwindcss init

tailwind.config.js が作成されるので、これを開きパスを通すように変更します。

content: [],

を、下記に変更。（環境に合わせて変更してください）

content: ["./src/**/*.{html,js}"],

この例では、「src」フォルダを作成したのでその中に style.cssとindex.htmlを作成します。

style.cssで下記のようにTailwindディレクティブを記述します。

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

index.htmlは下記を記述します。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="../dist/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

次にpackage.jsonに下記を追記しておきます。

{
    "devDependencies": {
    "tailwindcss": "^3.3.1"
  },
  // 下記を追記
  "scripts": {
    "dev": "tailwindcss -i src/style.css -o dist/style.css -w"
  }
}

ここまでできたら、下記のコマンドを入力します。

npm run dev

すると、distフォルダ内にstyle.cssが作成され、index.htmlをブラウザで開くとHTML内で使っているクラス名にスタイルが当たっていることが確認できます。

以上でインストールは完了です。