メモ＞ CSS ＞ TailwindCSSを最小構成で利用する

Tailwind CSSを最小構成で利用する

Tailwind CSSを最小構成で利用するためにはnpm経由でインストールします。

node.jsをインストールする

公式サイトからインストーラーを入手しインストールします。
手順は割愛します。

Tailwind CSSをインストール

Tailwind CSSをインストールしたいフォルダを作成して、そのフォルダに移動し以下コマンドで初期化処理を行います。

npm init -y

Tailwind CSS本体とTailwind CLIをインストールします。

npm install tailwindcss @tailwindcss/cli

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

Tailwind CSSを利用する

Tailwind CSSをインストールしたフォルダ内にsrcフォルダを作成します。
その中にinput.cssを作成します。

input.cssの中身は以下を記載します。

@import "tailwindcss";

Tailwind CLIを実行します。

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

実行するとsrcフォルダ内にoutput.cssが作成されます。

srcフォルダ内にindex.htmlを作成します。

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

作成すると再度ビルドが走り、output.cssが再作成されます。
html内に記載されているtext-3xl font-bold underlineなどの定義が追加されます。

最終的なフォルダ構造は以下になります。

work
│  package-lock.json
│  package.json
├─node_modules
└─src
        input.css
        output.css
        index.html

CSSのサイズを落とすために縮小する場合は--minifyオプションを付けてビルドします。

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --minify --watch