PugでTailwind cssを使用する方法

PugでTailwind cssを使用する方法

PugでTailwind CSSを使用するには、以下の手順を踏む必要があります。

1. Tailwind CSSのインストール

まず、Tailwind CSSをプロジェクトにインストールします。
以下のコマンドを実行します。

npm install tailwindcss

2. Tailwind CSSの設定

次に、Tailwind CSSの設定ファイルを作成します。
以下のコマンドで設定ファイルを生成します。

npx tailwindcss init

tailwind.config.jsが生成されます。
このファイルで、Tailwind CSSの設定をカスタマイズできます。

3. CSSファイルの設定

Tailwind CSSを使用するためのCSSファイルを作成します。
例えば、styles.cssというファイルを作成し、以下の内容を追加します。

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

このファイルをビルドプロセスに含めるように設定します。

4. Pugでの利用

PugのテンプレートでTailwind CSSを使用するためには、CSSファイルをHTMLにリンクする必要があります。
以下はPugでのコード例です。

doctype html
html
  head
    title Tailwind CSS Example
    link(rel='stylesheet', href='/path/to/styles.css')
  body
    h1.text-3xl.font-bold Hello, Tailwind CSS!
    p.text-lg Welcome to using Tailwind CSS with Pug.

この例では、styles.cssをHTMLにリンクし、Tailwind CSSのクラスを使用してスタイルを適用しています。