はじめに

Tailwind CSS をプロジェクトに導入するための手順を残しておきます。ここでは、npm を使用して導入する事を想定しています。

npm でのインストールと初期化

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init

postcss.config.js の追加

postcss.config.js ファイルをプロジェクトのルートに追加します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

テンプレートパスの設定

content プロパティを使用して、Tailwind CSS を適用するファイルを指定します。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS ファイルの作成と設定

src/input.css などの任意の名前で CSS ファイルを作成し、以下のように設定します。

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

tailwindcss cli の起動

CSS ファイルをビルドして更新を監視します。

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

本番環境での利用

Tailwind CSS を本番環境で使用する方法です。

npx tailwindcss -o build.css --minify

まとめ

以上、Tailwind CSS をプロジェクトに組み込むための手順でした。Tailwind CSS を使用する事で、スタイリング作業を円滑に進めることができます。