Tailwind CSS 공통영역, 폰트 설정

Tailwind CSS 공통 CSS와 폰트 설정

오늘은 팀 프로젝트를 시작하면서 Tailwind CSS를 사용하여 초기 세팅을 하는 방법에 대해 정리해았다. 초반에 시간이 걸리더라도 이러한 세팅을 하는 것은 일관된 스타일을 유지하고 협업을 원활하게 하는 데 매우 중요한거 같다.🤓

1. Tailwind CSS 설치 및 설정

Next.js를 사용하는 경우에는 이미 설치되어 있다. 리엑트로 작업할 시에는 아래 명령어를 싱행하여 Tailwind CSS를 설치한다.

npm install -D tailwindcss
npx tailwindcss init

2. Global CSS 파일 설정

src/app/globals.css 파일을 만들어 폰트 설정을 추가한다. 폰트 이외에도 공통으로 선언해서 사용하는 css를 설정할 수 있다.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 기본 폰트 설정 */
@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* 포인트 폰트 */
@font-face {
    font-family: 'Ainmom';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_01@1.0/Ainmom.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@layer base {
    body {
        @apply font-primary;
    }
}

3. Tailwind CSS 설정 파일 수정

tailwind.config.js 파일을 열어 프로젝트에 맞게 설정을 추가한다.

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: {
                primary: ['LINESeedKR-Bd', 'sans-serif'],
                secondary: ['AnotherFont', 'sans-serif'],
            },
            colors: {
                main: '#FFF7DB',
                base: '#FBF8EE',
                point: '#A16040',
            },
            fontSize: {
                basics: '1rem',
                subtitle: '1.5rem',
                title: '2rem',
            },
            screens: {
                'md-max': {'max': '1068px'},
                'sm-max': {'max': '734px'},
            },
            width: {
                'main-desktop': '1020px',
                'main-tablet': '710px',
                'main-mobile': '82%',
            },
            height: {
                '37': '37px',
            },
              animation: {
                'shake-once': 'shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3',
            },
            keyframes: {
                shake: {
                    '0%, 100%': { transform: 'translateX(0)' },
                    '10%, 30%, 50%, 70%': { transform: 'translateX(-5px)' },
                    '20%, 40%, 60%': { transform: 'translateX(5px)' },
                    '80%': { transform: 'translateX(4px)' },
                    '90%': { transform: 'translateX(-4px)' },
                },
            },
        },
    },
    plugins: [],
};
export default config;

4. 팀원들에게 공유하기

깃허브 이슈에 아래 내용을 팀원들에게 공유하여 공통 css에대한 정보 공유와 피드백을 주고 받았다.

Description

폰트, 공통 css 관련하여 공지드립니다.

폰트

기본 폰트

• font-weight : 타이틀 (700), 기본(400) 사용하시면 됩니다.

포인트 폰트

• font-weight: normal로 사용하시면 됩니다.
• class명 추가하여 사용하시면 됩니다. (포인트 폰트사용시 클레스명: font-secondary)

폰트 사이즈

• 필요한 폰트사이즈의 클래스명으로 변경하여 사용하시면 됩니다.
  ex) text-(basics 또는 subtitle 또는 title)
• 기본 : basics
• 서브타이틀: subtitle
• 타이틀 : title

컬러

• 클레스명 추가하여 사용하시면 됩니다.

• ex) 텍스트 변경: text(main 또는 base 또는 point), 배경색 변경 : bg-(main 또는 base 또는 point)

• 베이스 컬러: #FFF7DB

• 메인 컬러 : #FFF7DB

• 포인트 컬러: #A16040

전체영역

• 전체영역을 지정해주는 (ex) layout 파일에 전체 영역에 지정하면 됩니다.
• 'main-desktop': '1020px': 데스크탑에서 너비 1020픽셀
• 'main-tablet': '710px': 태블릿에서 너비 710픽셀
• 'main-mobile': '82%': 모바일에서 너비 82%

사용 예시

<div class="w-main-desktop md-max:w-main-tablet sm-max:w-main-mobile">
  <!-- 내용 -->
</div>

Button, Input

• 클래스명을 추가하여 사용하시면 됩니다. (버튼 높이는 37로 지정)
  

사용 예시

 <button class="h-37 bg-point text-white">버튼</button> 

애니메이션

1. tailwind.config.ts 에 애니메이션을 아래 처럼 설정합니다.
2. 클래스명 animate-(지정한 애니메이션 이름) 추가합니다.

추가 및 수정

• 작업 전에 작성된 공지여서, 추후에 수정될 수 있습니다.
• 공통영역 이여서, 추가 및 수정해야할 시 팀원들과 상의 후에 추가 및 수정하는게 좋을거 같습니다!

작업 경로

파일 위치 : src/app/globals.css
파일 위치 : /tailwind.config.ts