TailwindCSS에 사용자 지정 글꼴 클래스 추가

반응형

이 문서에서는 TailwindCSS와 함께 사용자 지정 글꼴을 사용하고 Tailwind 클래스로 제공하는 방법에 대해 알아보겠습니다.

TailwindCSS는 현재까지 가장 유용한 CSS 프레임워크 중 하나이며 아름다운 UI를 빠르고 간단하게 만들 수 있는 수많은 놀라운 기능을 가지고 있다.

많은 기능이 즉시 제공되며 이러한 구성 요소를 사용자가 상상하는 UI에 결합하는 것은 사용자의 몫입니다.

TailwindCSS는 한 단계 더 나아가 지원하지 않는 특정 요구사항이 있을 경우 사용 가능한 테마를 확장하여 사용자 지정 옵션을 구성할 수 있도록 지원합니다.

 

더 골

사용자 지정 글꼴을 사용하는 방법에 대해 알아 보려면 다음을 수행합니다.

• 기본 Response 앱 시작
• 테일윈드CSS 설정
• 사용자 지정 글꼴을 추가하고 TailwindCSS의 구성에서 구성합니다.
• 글꼴을 사용합니다!

내가 이 문제에 대해 아주 기초부터 끝까지 접근해볼 테니 아직 리액트나 테일윈드를 모르더라도 걱정하지 마!

생성-응답-앱을 사용하여 대응 설정

 

우리가 제일 먼저 하고 싶은 일은 리액트에서 프로젝트를 진행하는 것입니다. 우리는 Create-React-app이라는 도구를 사용하여 프로젝트를 진행할 것입니다.

터미널을 사용하여 프로젝트를 생성할 폴더로 이동하십시오. 그런 다음 다음 명령을 실행하여 Response 응용 프로그램을 생성합니다(원하는 대로 이름 지정).

npx create-react-app react-tailwind-project

프로젝트에 대한 폴더를 만들고 몇 가지 항목을 구성한 다음 새 응용 프로그램을 관리하는 방법에 대한 지침을 제공합니다.

 

지금은 프로젝트로 이동하여 Response 애플리케이션을 시작하겠습니다.

cd react-tailwind-project && npm start

이렇게 하면 http://localhost:3000에서 개발 서버가 시작되고 다음과 같이 표시됩니다.

이제 출발선을 잡았으니 테일윈드 준비로 넘어갑시다!

 

뒷바람 설정

프로젝트에서 Tailwind를 초기화하고 구성하기 전에 몇 가지 종속성을 설치해야 합니다.

npm install -D tailwindcss postcss autoprefixer

우리는 지금 모든 패키지를 가지고 있어야 합니다. 우리의 프로젝트에서 TailwindCSS를 실행해야 합니다. 다음으로 TailwindCSS를 초기화하겠습니다.

npx tailwindcss init -p

 

이렇게 하면 프로젝트에 다음과 같은 두 개의 파일이 생성됩니다.

• postcss.config.js(이 문제는 다루지 않음)
• 뒷바람.config.js

어서 tailwind.config.js 파일을 여세요. 우리는 Tailwind에게 우리의 프로젝트에서 어떤 파일을 신경 써야 하는지 말해야 합니다.

Tailwind의 클래스와 도구를 사용할 파일과 일치하도록 컨텐츠 배열에서 다음 글로벌 패턴을 추가합니다.

module.exports = {
    content: [
          './src/**/*.{js,jsx,ts,tsx}',
        ],
    theme: {
          extend: {},
    },
    plugins: [],
}

 

Tailwind는 빌드 시간 동안 필요한 클래스를 생성할 때 검색할 파일을 알기 위해 이를 사용합니다.

Tailwind를 설정하여 프로젝트에서 사용할 수 있도록 하는 마지막 작업은 Tailwind의 지시문을 /src/index.css의 루트 index.css 파일로 가져오는 것입니다. 이러한 가져오기를 해당 파일의 맨 위에 추가합니다.

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

잘 되고 있는지 확인해보자고 /src/App.js에서는 일부 텍스트에 Tailwind 클래스를 추가합니다. "편집" 지시사항을 노란색으로 변경하는 건 어떨까요?

<p className="text-yellow-500">
    Edit <code>src/App.js</code> and save to reload.
</p>

 

모든 것이 제대로 설정되었다면 텍스트 색이 바뀌는 것을 볼 수 있습니다!

사용자 지정 글꼴 및 클래스 추가

이제 여러분이 기다리던 대목이 나옵니다!

Tailwind에는 글꼴-san, 글꼴-serif 및 글꼴-mono와 같은 글꼴 패밀리를 변경할 수 있는 클래스 세트가 있습니다. 하지만 Tailwind가 내장되어 있지 않은 폰트를 사용하려면 어떻게 해야 할까요?

 

다행히도 TailwindCSS를 사용하면 테마의 자체 사용자 지정 확장을 구축하여 해당 패밀리를 위한 클래스와 함께 사용자 지정 글꼴 패밀리를 제공할 수 있습니다.

우리가 제일 먼저 해야 할 일은 마음에 드는 글꼴을 골라 index.css 파일로 가져오는 것입니다.

Google 글꼴의 노바 플랫을 사용할 것이지만 자유롭게 고르세요!

Tailwind 지시문을 가져온 후 index.css에서 원하는 글꼴을 가져옵니다.

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

@import url('https://fonts.googleapis.com/css?family=Nova+Flat');

 

현재 이 글꼴을 프로젝트에서 사용할 수 있지만, 저는 게을러서 Tailwind가 해당 글꼴을 사용할 수 있도록 자동으로 클래스를 구성해 주었으면 합니다.

이를 구성하려면 tailwind.config.js로 다시 이동합니다. 테마 키 아래에서 fontFamily 키를 사용하여 Tailwind에 사용자 정의 글꼴 패밀리를 추가할 수 있습니다.

module.exports = {
    content: [
          './src/**/*.{js,jsx,ts,tsx}',
        ],
    theme: {
          fontFamily: {
                  'nova-flat': '"Nova Flat"'
          },
          extend: {},
    },
    plugins: [],
}

여러 패밀리를 nova-flat에 추가하려는 경우 쉼표로 구분된 리스트(예: Nova Flat, arial, mono)로 추가하거나 해당 값을 배열 *(예: ["Nova Flat",arial,mono`)로 전환할 수 있습니다.

그것을 저장한 후, 우리는 이제 Tailwind를 통해 font-<우리 이름>이라는 이름의 새로운 클래스를 이용할 수 있다. 제 경우에는 폰트-노바-플랫일 거예요.

 

그것을 사용합시다!

/src/App.js에서는 "Learn React" 레이블의 글꼴을 새 글꼴로 변경합니다.

<a
  className="App-link font-nova-flat"
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
>
      Learn React
      </a>

만약 모든 것이 제대로 설정되었다면, 여러분의 멋진 새 글꼴이 나타날 것입니다!

 

Tailwind가 이제 어디에서나 사용할 수 있는 유용한 클래스를 만든 것은 정말 멋집니다!

마무리

이 예제는 까다롭고 예술적인 필요에 맞게 TailwindCSS를 구성할 때 사용할 수 있는 여러 옵션의 시작에 불과합니다.

TailwindCSS가 제공하는 모든 것들을 확인해보세요!

읽어주셔서 정말 감사합니다, 도움이 되셨길 바랍니다!

 

다음번에는 해피 코딩!

추신:

우리가 여기서 배운 것들로 가는 지름길이 있습니다.

테마 확장을 tailwind.config.js로 구성하지 않았다면 Tailwind가 임의 값이라고 부르는 값을 본질적으로 전달할 수 있는 클래스를 사용할 수 있었습니다.

이 경우 임의 값은 글꼴-[Nova_Flat]처럼 표시됩니다.