2022年8月28日

【Tailwind CSS】PostCSSでTailwind CSSをはじめたい

前々から興味はあったTailwind CSS。なかなか仕事で使う機会がなく、そっと放置していたのですが、なんか新しいことも勉強しないとなということで、手を出してみることに。

まずは個人プロジェクトに導入して、いろいろと試してみようかと（途中で挫折しそうな気がしてますが）。

インストールからCSSファイルの作成まで

インストールの基本的な手順はTailwind CSSのサイトにあります。今回はPostCSSを使う方法で進めます。

Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

これから書く手順は、上のリンクを参考にちょっと変更してます。

まずはTailwind CSSをインストールするディレクトリへ移動して、ターミナルで下のコマンドを入力し、package.jsonを作成します。

npm init -y

次に下のコマンドでTailwind CSSやPostCSSなどの必要なものをインストールし、続けてtailwind.config.jsの作成します。

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

作成されたtailwind.config.jsにテンプレートファイルのパスを追加。

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

そして、postcss.config.jsを作成し、pluginsに追加。

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

srcディレクトリを作成し、その中にcssディレクトリを作成。そこにmain.cssを作成し、下のコードを追加。

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

package.jsonのscriptsに下のコードを追加。

"tailwindcss": "postcss ./src/css/main.css -o ./dist/css/output.css"

ターミナルで下のコマンドを入力。

npm run tailwindcss

distディレクトリのcssディレクトリにoutput.cssが作成されます。

さて、作成されたoutput.cssを開くと、ちょっとおかしなことに気が付きます。そう、Tailwind CSSの.pt-4とか.flexとかがまったく書かれてないのです。

ここで、先に設定をしておいたtailwind.config.jsの出番です。

srcディレクトリにindex.htmlを作成して、下のコードを追加して、ターミナルでnpm run tailwindcssコマンドを入力してください。

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

するとあら不思議、.text-3xl、.font-bold、.underlineがmain.cssに追加されるじゃないですか。

どうやら必要なクラスだけでCSSファイルを作成してくれるようです。

CSSが作成できるようになったので、次はHTMLファイルを監視して、Tailwind CSSを作成できるようにします。

【Tailwind CSS】HTMLファイルを監視してTailwindのCSSファイルを作成したい

検証環境

Tailwind CSS 3.1.8

: CSS

: PostCSS / Tailwind CSS