1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

tailwindcssでGoogleFontsを使用

Posted at

はじめに

tailwindcssでGoogleFontsをNext.jsで使用するにあたり
クラス+プロパティで書きたいのでtailwind.config.tsファイルに追記するも反映されなくて困った話

問題

今回はcourgetteの文字を追加したかったので
tailwind.config.tsにfontfamilyを追加

tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'courgette': ['Courgette', 'cursive'],
      },
    },
  },
  variants: {},
  plugins: [],
};
export default config;

このままでは反映されず

解決

global.cssファイルに
@import url('https://fonts.googleapis.com/css2family=Courgette&display=swap');の1文を追加

global.css
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
<div className="font-courgette">

スクリーンショット 2024-03-13 225753.png

反映させることが出来ました!

参考記事

この方の記事でimportの1文を追加するところにたどり着きました
https://zenn.dev/natonao/articles/280324541b86ba

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?