Tailwind CSSで開発を始めるためのnpmコマンド

毎回忘れてしまうので、自分用に手順書を残しておく。

想定される環境

Windows or Macどちらでも
nodeとnpmがインストールされている

1) Tailwind CSSで開発するディレクトリを作成

gitbashやVSCodeのターミナルで作成したディレクトリへ移動してください。

2) nodeとnpmがインストールされていることを確認

$ node -v
v16.0.0

$ npm -v
7.10.0

3) package.jsonを作成

$ npm init -y
Wrote to /Users/xxxxx/Website/xxxxx/lp/package.json:

{
  "name": "lp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4) 必要なモジュールをインストール

$ npm install -D tailwindcss postcss-cli autoprefixer
added 103 packages, and audited 104 packages in 5s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

CSSをネストして描きたい（SCSS）場合はpostcss-nestedもインストールしましょう。

$ npm install -D postcss-nested
up to date, audited 104 packages in 1s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

postcss-nestedを使う場合はpostcss.config.jsに以下の一行も追加しましょう。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-nested": {},
  },
}

これで使えるようになりますが、Tailwind CSSで表現できるスタイルは極力html側で解決しましょう。

5) Tailwind CSSの設定ファイルを作成

$ npx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

6) style.cssファイルを作成し以下の3行を追加

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

7) 元となるHTMLファイルを作成

基本的には、index.htmlになると思いますが状況によって変えてください。

8) tailwind.config.jsを修正

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

赤い部分を追加します。
この場合同じディレクトリ内の全てのHTMLファイルがビルド対象となります。

9) package.jsonを修正

{
  "name": "lp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "postcss style.css -o dist.css",
    "dev": "postcss style.css -o dist.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss-cli": "^10.0.0",
    "tailwindcss": "^3.1.6"
  }
}

赤い部分を追加します。
buildとdevの違いはbuildは都度ビルドで、devはリアルタイムビルドとなります。