tailwind.config.ts와 globals.css에 정의한 스타일 우선순위

2024년들어 처음 쓰는 블로그 ㅎ

간만에 프로젝트 세팅부터 하는중인데 다까먹어서 되는게 없군요.. 열심히 다 찾아가면서 틈틈히 기록으로 남겨보는것으루..

 

 

먼저 각 파일에서 스타일을 정의하는 방법을 알아보자. 

1. tailwind.config.ts에서의 스타일 정의

tailwind.config.ts 파일은 Tailwind CSS의 기본 설정과 테마를 확장하거나 수정하는 데 사용된다. 여기서는 Tailwind의 기본 색상, 폰트, 간격, 크기 등의 전역적인 디자인 시스템을 정의할 수 있다.

• 주요 목적: Tailwind의 기본 유틸리티 클래스를 확장하거나 덮어쓰기.
• 예시: 색상, 폰트 크기, 간격 등을 전역적으로 수정하고 싶을 때 사용.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

 

이 파일에 작성된 모든 부분은 선택사항으로 변경할 항목만 추가해 주면 된다. 

정의되지 않은 부분들은 Tailwind의 디폴트 설정을 사용하게 된다. 

 

 

2. globals.css에서의 스타일 정의

globals.css는 Tailwind CSS 프로젝트에서 글로벌 CSS를 정의하는 파일이다. 이 파일은 일반적으로 Tailwind에서 기본 제공하는 유틸리티 클래스 외에 추가적인 커스텀 CSS를 작성하는 데 사용되는데, 주로 특정 컴포넌트나 섹션에 맞춤형 스타일을 적용하는 데 사용된다.

• 주요 목적: Tailwind 유틸리티 클래스로 해결되지 않는 세부적인 스타일링을 커스텀 CSS로 정의.
• 예시: 특정 컴포넌트에만 적용되는 스타일이나 CSS 변수 등을 정의할 때 사용.

/* globals.css */
body {
  font-family: 'Inter', sans-serif;
}

.custom-button {
  background-color: #1D4ED8;
  color: white;
}

 

위 예시는 글로벌 스타일로서 body와 .custom-button 클래스에 직접적인 스타일을 적용한 예이다.

3. 우선순위

Tailwind의 스타일은 기본적으로 유틸리티 퍼스트(utility-first) CSS 프레임워크입니다. 그렇기 때문에 유틸리티 클래스가 일반적인 CSS 스타일보다 우선 적용되는 경우가 많습니다. 하지만 우선순위는 CSS의 일반적인 우선순위 규칙에 따라 달라집니다.

• Tailwind 유틸리티 클래스 vs globals.css의 스타일
  • 동일한 요소에 대해 globals.css에 작성된 CSS 스타일과 Tailwind의 유틸리티 클래스가 충돌할 경우, 일반적인 CSS 우선순위 규칙에 따릅니다.
  • 예를 들어, 클래스 선택자(.custom-button)보다 Tailwind의 인라인 스타일이나 중요한 유틸리티 클래스(!important)가 우선될 수 있습니다.
• 우선순위 예시:
  • Tailwind 클래스가 먼저 적용되지만, 만약 globals.css에서 더 높은 우선순위를 가진 선택자(예: ID 선택자, !important 등)를 사용하면 그 스타일이 우선됩니다.

<button class="custom-button bg-red-500">Click me</button>

 

위의 버튼에서 globals.css에 정의된 .custom-button의 background-color: #1D4ED8이 적용되지만, Tailwind 클래스 bg-red-500이 Tailwind의 유틸리티 클래스라서 더 높은 우선순위를 가집니다.

요약

• tailwind.config.ts: Tailwind의 전역 테마 및 유틸리티 클래스를 설정.
• globals.css: Tailwind로 해결되지 않는 맞춤형 스타일을 정의.
• 우선순위: 기본적으로 Tailwind 유틸리티 클래스가 우선되지만, CSS의 일반적인 우선순위 규칙에 따라 달라집니다.

이 구조를 이해하면 Tailwind를 사용할 때 더 효과적으로 스타일을 관리할 수 있습니다.