TailwindCSS에서 Google 글꼴을 사용하는 방법

4273 단어 fontstailwindcssnextjs
우리는 앱에서 아름다운 글꼴을 사용하고 싶기 때문에 이 기사에서 그 방법을 알려드리겠습니다. 저는 오늘 Next.js를 사용할 예정이지만 다른 프레임워크/라이브러리 또는 바닐라에서도 사용할 수 있습니다. 절차는 거의 동일할 것입니다.



앱 설정



Next.js 앱 만들기

npx create-next-app next-tailwind-ts-demo


대청소



바닥글이 이렇게 될 때까지 Head 태그 아래의 모든 항목을 삭제합니다.

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  );
}


앱에 Tailwind 추가



종속성 설치 -

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest # yarn
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # npm


구성 파일 생성 -

npx tailwindcss init -p


그러면 tailwind.config.js 및 postcss.config.js가 생성됩니다.

제거할 파일 추가tailwind.config.js의 퍼지를 다음으로 교체하십시오.

  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],


globals.css 변경

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


앱 시작하기




yarn dev # yarn
npm run dev # npm


맞춤 글꼴 가져오기



Google Fonts으로 이동하여 앱에서 원하는 글꼴을 선택합니다.

이 데모에서는 Rampart One을 사용하겠습니다.
  • "이 스타일 선택"을 클릭하면 사이드바가 나타납니다.
  • 이제 웹에서 사용 섹션에 제공된 가져오기 URL을 복사합니다.



    • 글꼴 사용



    글꼴을 사용하려면 다음 단계를 따르십시오.
  • 가져오기를 globasl.css에 붙여넣기

    • @import url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");

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


  • 내부 테마 > fontFamily의 새 속성을 확장하고 글꼴에 이름을 지정합니다.

    •  theme: {
    extend: {
      fontFamily: {
       Rampart: ["Rampart One", "cursive"],
      },
    },
  },


    배열의 규칙은 Google 글꼴에 지정된 것과 동일해야 합니다.


  • 이제 이 경우font-Rampart의 경우 모든 태그에 font-fontName의 className을 지정할 수 있습니다.

    • <h1 className="font-Rampart">This is using a custom font</h1>


    이제 필요한 아름다운 글꼴을 얻었습니다 🥳.



    유용한 링크 -

    Github repository

    TailwindCSS

    Google Fonts

    All socials
    WebSharper: 쉽게 시작하기
    웹사이트에 매체 및 YouTube RSS 피드를 삽입하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage