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のクラスを使用してスタイルを適用しています。