Laravel 8 のtailwindcssにGoogle fontsを入れてみた。 #初心者

筆者の立ち位置

php & Laravelの初学者
現場での開発経験なし
独学で地域活性化支援のアプリ制作を行うため、Laravelを学んでいる

今回のやりたいこと

Laravel 8（Jetstream適用済み）のtailwindcssでGoogle Fontsを使いたい。

きっかけ

明朝体で文章を書きたかったのですが、認証で使用する『Jetstream』でtailwindcssを使用しており、このCSSではデフォルトfont-familyに日本語対応のフォントが見当たらず。。。
追加しなくちゃなぁ、ということであれこれ調べました。

今回の環境

Macのローカル環境

macOS Big Sur(バージョン 11.2.3)
MacBook Pro (Retina, 13-inch, Late 2013)

事前準備

すでにLaravel 8が利用できる環境になっていること
パッケージ管理ツールであるnpmが使えること

まだの場合は後述の参考を参照のこと。

導入

今回は２種類の導入方法について触れておきます。正直、どっちでもいい気がしますが、実際にLaravelで開発をされている方はどちらなのか、興味津々です。

リンクタグによる導入
importによる導入

リンクタグによる導入

bladeファイルのヘッダにタグを挿入し、styleを設定する方法。
index.blade.phpのコメントアウト業に説明書きを付与しております。
Qiitaの仕様なのか、拡張子.blade.phpだと色が変わらないのでちょっと寂しい。
厳密に言えば、.bladeは拡張子じゃないけれど。

index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Google fontsで使いたいフォントを選択し、linkタグをコピー＆ペーストする。 -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">

  <!-- スタイルを設定する -->
  <style>
    p {
      font-family: 'Noto Serif JP';
    }
  </style>

  <title>Document</title>
</head>
<body>
  <p>pタグ全般にfont-family: 'Noto Serif JP'が適用されるよ！</p>
</body>
</html>

style部分をtemplete化すると、もうちょっと導入しやすいのかも。tailwindcssのお得感はなくなってしまうところがちょっと残念。

importによる導入

tailwindcssで使用しているapp.cssファイルに組み込んで使用する方法。

開発側のapp.cssにimportデータを記載する。

WebApp
├ resources
　├ css
　　└ app.css

app.css

// 今回新たにGoogle fontsで取得したimportのurlをコピー＆ペースト
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

// app.cssにデフォルトでimportされている項目
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

tailwind.config.jsファイルにfont-familyを宣言する。

tailwind.config.js


(中略)
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
// theme - extend - fontfamily 配下に 『Notoserif』とクラス名をつけて宣言しました。
                Notoserif: ['Noto Serif JP'],
            },
        },
    },

本番側のapp.cssに反映させる

開発環境のresources/css/app.cssに追記した内容を本番環境のpublic/css/app.cssへ反映させる。
WebApp
├ public
　├ css
　　└ app.css
このファイルは直接いじらず、パッケージ管理で使用するnpmを使用して開発環境で設定した行を反映させる処理を行う。

% npm install && npm run dev

blade.phpでタグを挿入し、css/app.cssを呼び出す。

VS Codeなどで新たにblade.phpを作成してhtml:5を展開した場合、リンクタグによるapp.cssの宣言が入っていないので、忘れずに書くこと。laravelでpublicフォルダ内のファイルを呼び出すときはasset()を使うのがおすすめ。

index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 本番環境のapp.cssを呼び出す -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">

  <title>Document</title>
</head>
<body>

<!-- tailwind.config.jsで宣言したクラスを、適用したいタグに付与する。 -->
  <p class="Notoserif">クラス名”Notoserif”のpタグに対してfont-family: 'Noto Serif JP'が適用されるよ！</p>

</body>
</html>

以上で、Google Fontsが使えるようになります。（いや、なったはず？！）
同じ操作をしてうまく行かなかった方、ぜひ情報交換したいです。

#駆け出しエンジニアと繋がりたい

参考

事前準備

composerのインストール

laravelのインストール

via composerの項目を参照（Docker使わないから）

テストアプリケーションの作成

% laravel new WebApp

"WebApp"の部分は、お好きな名前をつけましょう。

初期設定

.envの更新
config/app.phpの更新
sqliteファイルの作成
動作確認

今回はローカル環境でのテストなのでDB_CONNECTION=sqliteに設定。
configフォルダ内のapp.phpには時刻設定（日本人ならtimezoneとlocaleを修正）。
databaseフォルダ内に新たなファイルdatabase.sqliteを作成。
この時点でmigrateしておくと、親切。

% php artisan migrate

あとは適宜、良きに計らってくんなまし。

tailwindcss Jetstreamの導入

そもそも認証機能を使いたくてJetstreamを入れたら、tailwindcss使ってたというのが今回のネタにたどり着いた原因でもあるので、tailwindcss単体の導入と言うよりは、認証機能の追加ということでJetstreamの導入について触れておきます。

% php artisan jetstream:install livewire --teams
% php artisan migrate
% npm install && npm run dev