본문 바로가기
Tailwind CSS

7. Tailwind CSS 기본 설정과 옵션 - 1

by spare8433 2024. 5. 6.

tailwind 기본 설정


기본적으로 Tailwind는 프로젝트 루트에서 tailwind.config.js 파일에 내용을 참고해 사용자 정의된 내용을 적용합니다.



기본 설치

npx tailwindcss init




기본 설정 파일(tailwind.config.js) 구조

/* tailwind.config.js */

module.exports = {
  content: [...],
  theme: {
    ...
    extend: {
      ...
    },
  },
  plugins: [...],
}




ESM 설정 및 설치

기본적으로 설치 시 프로젝트가 ES 모듈인지 감지하여 올바른 구성 파일을 자동으로 생성합니다.



다만 --esm 플래그를 사용하여 ESM 구성 파일을 명시적으로 생성할 수도 있습니다.

npx tailwindcss init --esm




ESM 설정 파일(tailwind.config.js) 구조

/* tailwind.config.js */

/** 
 @type {import('tailwindcss').Config}
  TypeScript에서 타입 선언을 하는 코드 
*/

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}




TypeScript 설정 및 설치

--ts 플래그를 사용하여 TypeScript 구성 파일을 생성할 수도 있습니다.

npx tailwindcss init --ts




설정 파일(tailwind.config.js) 구조

/* tailwind.config.ts */

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config




설정 옵션


Content

Tailwind 클래스 이름이 포함된 모든 HTML 템플릿, JS 구성 요소 및 기타 파일의 경로를 추가할 수 있습니다.


module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}




Theme

Theme 섹션에서는 color palette, fonts, type scale, border sizes, breakpoints 등 사이트의 시각적 디자인과 관련된 모든 것을 정의할 수 있습니다.




예시

module.exports = {
  // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      ...
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
     screens: {
      'sm': '640px',
      'md': '768px',
      ...
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        ...
      },
      borderRadius: {
        '4xl': '2rem',
        ...
      }
    }
  }
}




기본 테마 재정의

theme 섹션 바로 아래에 내용을 정의하는 경우 기본 테마의 옵션을 재정의해 사용할 수 있습니다.



기본 테마 확장

theme.extend 키 아래에 내용을 정의하는 경우 기본값을 유지하면서도 새 값을 추가해 사용할 수 있습니다.



기본 테마 값 참조

기본 테마의 값을 참조하려면 tailwindcss/defaultTheme 에서 해당 값을 가져올 수 있습니다.


const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}



다른 테마 값 참조

theme 에서 다른 값을 참조해야 하는 경우 정적 값 대신 클로저를 활용 합니다. 클로저는 theme() 함수를 활용해 객체를 반환합니다.


※theme() 함수는 완전히 병합된 테마 객체에서 값을 찾으려고 시도하므로 기본 테마 값 뿐만 아니라 사용자 정의 항목도 참조할 수 있습니다.


/* tailwind.config.js */

module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing') // spacing 의 객체 내용
    })
  }
}



클로저는 각 섹션 내부의 키가 아닌 최상위 테마 키에만 사용할 수 있습니다.

// ❌ theme 에 최상의 key 가 아닌 경우 클로저 사용 불가
module.exports = {
  theme: {
    fill: {
      gray: ({ theme }) => theme('colors.gray')
    }
  }
}

// ✅ 최상위 key 에서 클로저 사용
module.exports = {
  theme: {
    fill: ({ theme }) => ({
      gray: theme('colors.gray')
    })
  }
}




Plugins

플러그인을 사용하면 CSS 대신 JavaScript를 사용하여 Tailwind에 사용자의 스타일시트에 등록할 수 있습니다.


// Plugin 함수
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // Add your custom styles here
    }),
    ...
  ]
}



공식 플러그인

기본 기능이 아니지만 인기 있는 기능들을 위한 공식 플러그인을 제공합니다.


module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}



1. Typography

@tailwindcss/typography 플러그인은 마크다운이나 CMS 데이터베이스와 같은 소스에서 가져온 콘텐츠 블록에 합리적인 타이포그래피 스타일을 사용할 수 있는 prose(산문 클래스) 세트를 추가합니다.


plugin git link →




2. Forms

@tailwindcss/forms 플러그인은 유틸리티 클래스를 사용하 form 스타일을 더 쉽게 지정할 수 있는 독창적인 양식 재설정 레이어를 추가합니다.


plugin git link →




3. Aspect ratio

@tailwindcss/aspect-ratio 플러그인은 오래된 브라우저에서 작동하는 네이티브 aspect-ratio 지원의 대안이며, 요소에 고정된 가로 세로 비율을 부여하기 위해 결합할 수 있는 aspect-w-* 및 aspect-h-* 클래스를 추가합니다.


예시

<div class="aspect-w-16 aspect-h-9">
  <iframe src="..." ...></iframe>
</div>

plugin git link →




4. Container queries

@tailwindcss/container-query 플러그인은 뷰포트 대신 @container로 표시된 부모의 치수에 따라 요소를 스타일화할 수 있는 @sm, @md와 같은 새로운 @{size} variants 을 추가했습니다.


<div class="@container">
  <div class="@lg:text-sky-400">
    <!-- ... -->
  </div>
</div>

plugin git link →




utilities 클래스 추가

addUtilities 및 matchUtilities 함수를 사용하면 Tailwind 의 utilities 레이어에 새 스타일을 등록할 수 있습니다



정적 유틸리티 등록

간단한 정적 유틸리티(Static utilities)를 등록하려면 addUtilities 함수를 사용하여 구현할 수 있습니다.


const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.content-auto': {
          'content-visibility': 'auto',
        },
        ...
      })
    })
  ]
}




동적 유틸리티 등록

matchUtilities 함수를 사용하여 사용자 테마 구성 설정에 정의된 값에 매핑되는 동적 유틸리티(Dynamic utilities)를 등록합니다.


const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    // 사용자 정의 테마 등록
    tabSize: {
      1: '1',
      2: '2',
      4: '4',
      8: '8',
    }
  },
  plugins: [
  // plugin 함수에 두번째 인자로 테마 객체를 가져와 활용 할 수 있다.
    plugin(function({ matchUtilities, theme }) {
      // tab 이라는 유틸리티에 사용자 정의한 테마 tabSize 를 매핑하여 동적으로 사용할 수 있도록 설정
      matchUtilities(
        {
          tab: (value) => ( { tabSize: value} ),
        },
        { values: theme('tabSize') }
      )
    })
  ]
}



실제 사용 예시

// 등록된 동적 유틸리티 사용 예제
<div class="tab-2"> <!-- ... --> </div>

// 임의의 값 사용 가능
<div class="tab-[13]"> <!-- ... --> </div>




components 클래스 등록

플러그인에서 addComponents 를 호출하고 CSS-in-JS 구문을 사용하여 스타일을 전달하면 Tailwind의 components 레이어에 새 스타일을 등록할 수 있습니다.


Tailwind의 다른 components 클래스와 마찬가지로 플러그인으로 추가된 components클래스는 프로젝트에서 실제로 사용되는 경우에만 생성된 CSS에 포함됩니다.


const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        ...
      })
    })
  ]
}




prefix 와 important 설정 관련

기본적으로 component 클래스는 사용자의 prefix 기본 설정을 따라가지만 사용자의 important 기본 설정에 영향을 받지 않습니다.


addComponents 를 활용해 plugin 에 스타일을 추가한 위 예제에 아래 설정을 추가

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}



실제 예상되는 css 의 모습

.tw-btn {
  padding: .5rem 1rem;
  border-radius: .25rem;
  font-weight: 600;
}



※ !important 를 활용하고싶다면 개별적으로 스타일 속성에 부여해야 합니다.

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn': {
          padding: '.5rem 1rem !important',
          borderRadius: '.25rem !important',
          fontWeight: '600 !important',
        },
        // ...
      })
    })
  ]
}




base 클래스 등록

플러그인에서 addBase 를 호출하고 CSS-in-JS 구문을 사용하여 스타일을 전달하면 Tailwind의 base 레이어에 새 스타일을 등록할 수 있습니다.


base 스타일은 div 또는 h1과 같은 기본 선택기를 대상으로 하기 때문에 당연히 사용자의 prefix 또는 important 옵션을 따르지 않습니다.


const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.2xl') },
        'h2': { fontSize: theme('fontSize.xl') },
        'h3': { fontSize: theme('fontSize.lg') },
      })
    })
  ]
}




variant 추가

addVariant 및 matchVariant 함수를 사용하면 hover, focus, support 와 같은 내장 variant 처럼 사용할 수 있는 사용자 정의 수정자를 등록할 수 있습니다.


정적 variant

간단한 정적인 변형(Static variants)를 등록하려면 addVariant 함수를 사용하여 구현할 수 있습니다.addVariant 함수의 첫 번째 인자는 사용자가 HTML에서 사용할 수정자 이름이며 두번째 인자는 실제 적용될 variants 들입니다.


const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('inverted-colors', '@media (inverted-colors: inverted)')
    })
  ]
}



실제 적용 예시

<form class="flex inverted-colors:outline ...">
  <input class="optional:border-gray-300 ..." />
  <button class="bg-blue-500 hocus:bg-blue-600">...</button>
</form>



동적 variant

내장된 support-*, data-*, aria-* 과 같은 새로운 매개변수화된 동적인 변형(Dynamic variants) 를 등록하려면 matchVariant 함수를 사용하십시오.


const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ matchVariant }) {
      matchVariant(
        'nth',
        (value) => {
          return `&:nth-child(${value})`;
        }, {
          values: {
            1: '1',
            2: '2',
            3: '3',
          }
        }
      );
    })
  ]
}



실제 적용 예시

<div class="nth-[3n+1]:bg-blue-500 ..."><!-- ... --></div>



참고

https://tailwindcss.com/docs/configuration
https://tailwindcss.com/docs/content-configuration
https://tailwindcss.com/docs/theme
https://tailwindcss.com/docs/plugins

저작자표시

'Tailwind CSS' 카테고리의 다른 글

9. Tailwind CSS 주요 클래스 내용과 문법(layout)  (0) 2024.05.09
8. Tailwind CSS 기본 설정과 옵션 - 2  (0) 2024.05.08
6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수  (0) 2024.05.04
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일  (0) 2024.04.30
4. Tailwind CSS 반응형 디자인  (0) 2024.04.29

관련글

티스토리툴바