
기존 Tailwind CSS 프로젝트에서 커스텀 스타일을 적용하는 주된 방법은 tailwind.config.js 파일의 theme.extend 옵션을 활용하는 것이었다. 작업중 이전 프로젝트에서 하던대로 작성을 하고 있었는데, 제대로 작동이 되지 않았다. 알고보니 최신 버전에서는 테마 변수(Theme Variables) 와 @theme 지시어를 도입하여 CSS 내에서 직접 테마를 확장하고 커스텀하는 방식을 사용하고 있었고, 이 방식을 사용하여 해결하였다.테마 변수와 @theme 지시어란?Tailwind CSS 공식 문서(Theme variables - Customizing your theme)에 따르면, 테마 변수는 @theme 지시어를 사용하여 정의하는 특별한 CSS 변수이다. 이 변수들은 프로젝트에서..