가변 Google 글꼴로 NuxtJS 및 TailwindCSS를 설정하는 방법

단계별 가이드

VueJS 및 TailwindCSS를 기반으로 구축된 프레임워크인 NuxtJS를 사용하여 빠른 설정 프런트엔드 애플리케이션 보유

Google Fonts를 사용하여 초기 설정 및 부트스트래핑을 다룰 것입니다.

NuxtJS 설치

개발 시스템에 NodeJ가 설치되어 있지 않은 경우 docs 을 참조하십시오.

$ yarn create nuxt-app myapp // yarn package manager 

$ npx create-nuxt-app myapp // node package manager
? Project name: myapp
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
? Continuous integration: None
? Version control system: Git

위의 명령은 응용 프로그램을 시작하고 실행하는 데 필요한 파일을 가져옵니다.

정리 발판 생성 코드

나중에 사용할 필요가 없으므로 /components/Logo.vue에서 로고 구성 요소를 삭제합니다.
<style>에서 /layouts/default.vue 태그를 삭제하면 파일에는 <template> 태그만 남습니다.

// layouts/default.vue

<template>
  <main>
    <Nuxt />
  </main>
</template>

tailwind에서 사용할 수 있는 모든 가능한 글꼴 유형을 나열합니다.

TailwindCSS에서 제공하는 모든 사용 가능한 글꼴 가중치 목록이 있는 파일로 새 코드를 업데이트합니다.

// pages/index.vue

<template>
  <main class="container">
    <article v-for="w in weights" :key="w.class" class="mb-5">
      <h1 class="text-4xl">.{{ w.class }}</h1>
      <p class="text-3xl" :class="w.class">ABCDEFGHIJKLMNOPRSTUVWXYZ</p>
      <p class="text-3xl" :class="w.class">abcdefghijklmnopqrstuvwxyz</p>
      <p></p>
    </article>
  </main>
</template>
<script>
export default {
  data: () => ({
    weights: [
      { class: 'font-hairline' },
      { class: 'font-thin' },
      { class: 'font-light' },
      { class: 'font-normal' },
      { class: 'font-medium' },
      { class: 'font-semibold' },
      { class: 'font-bold' },
      { class: 'font-extrabold' },
      { class: 'font-black' },
    ],
  }),
}
</script>

CSS 파일 생성 및 Google 글꼴 가져오기

Google 글꼴의 글꼴 가져오기 코드를 사용하여 자산 디렉터리에 main.css를 추가합니다.

$ touch assets/css/main.css

Google Font을 선택하려면 site을(를) 방문해야 합니다.
글꼴 속성 드롭다운으로 이동하고 스타일 수를 최대(예: 18+ 스타일)로 선택하여 Tailwind CSS에서 제공하는 모든 가능한 스타일을 얻을 수 있습니다.

그리드에서 글꼴을 선택하고 스타일 선택에서 애플리케이션에 포함할 스타일을 선택합니다. 제 경우에는 공급자가 제공하는 다양한 스타일을 모두 사용하여 Raleway을 선택하겠습니다.

응용 프로그램에 적합한 모든 스타일을 선택한 후에는 보기를 전환하기 위해 모서리 그리드 아이콘 오른쪽에 있는 선택한 패밀리 또는 병아리 아래에서 선택한 모든 스타일을 볼 수 있습니다.

이제 그것들을 사용하려면 <link> 코드 스위치를 @import로 복사하는 대신 웹에서 사용 아래에 있는 코드를 복사하고 <style> 태그 안에 있는 코드를 복사하십시오. 이 코드를 main.css 파일에 붙여넣습니다.

/*
 * /assets/css/main.css
 *
 * Raleway from Google Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.container {
  @apply mx-auto
}

TailwindCSS 구성 파일에 대한 스캐폴딩 생성

$ npx tailwindcss init

tailwind.config.js에 사용자 정의 글꼴 추가

// ...
theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', ...defaultTheme.fontFamily.sans],
      },
    },
        // ...
  },
// ...

행복한 코딩!!