0279 · FE8월 16일
[Next.js] Next.js 15와 Tailwind CSS v4: 더 이상 tailwind.config.ts는 필요 없다
들어가며 Next.js 15와 Tailwind CSS v4가 나오면서 가장 큰 변화 중 하나는 설정 방식이다. 이제는 더 이상 tailwind.config.ts 파일이 필수적이지 않고, CSS-first 접근 방식으로 globals.css에서 직접 …
FE · CSS · 웹개발
#CSS
9월 0장 · 통산 515장
- 0262 · FE8월 2일[Next.js] TailwindCSS v4에서 CSS 변수로 커스텀 유틸리티 만들기오프닝 TailwindCSS를 사용하다 보면 “우리 프로젝트만의 색상, 폰트, 여백” 등을 디자인 시스템처럼 통일해서 쓰고 싶을 때가 많다. Tailwind v4에서는 CSS 변수를 활용해서 커스텀 유틸리티 클래스를 만드는 방식이 굉장히 자연스럽고 …FE · CSS · 웹개발
- 0169 · FE6월 4일디자인은 디테일에 있다, ::after를 활용한 밑줄 애니메이션가운데에서 퍼지는 밑줄 효과, ::after로 만드는 동적인 스타일링 React 프로젝트에서 메뉴 탭이나 버튼과 같은 인터랙티브한 UI를 만들 때, 사용자의 선택을 시각적으로 명확하게 표현해 주는 것은 중요하다. 그 대표적인 방식 중 하나가 bord…FE · CSS · 웹개발
- 0110 · FE3월 26일[CSS] "Tailwind CSS 핵심 정리! 유틸리티 클래스로 스타일링 끝내기"Tailwind CSS는 다양한 스타일을 미리 정의된 유틸리티 클래스로 제공한다. (* 유틸리티 클래스란 특정 스타일을 적용할 수 있도록 미리 정의된 단일 클래스) 대표적인 유틸리티 클래스를 몇 가지 예시로 정리해보자! 색상 (Colors) 1) b…FE · CSS · 웹개발
- 0109 · FE3월 26일[CSS] "CSS 설계의 혁명! 유틸리티 퍼스트 방식이 뜨는 이유"Tailwind CSS 방식을 공부하면서 해당 방식이 '유틸리티 퍼스트 방식의 CSS 프레임워크'라는 것을 알게 되었다. 그러나, 유틸리티 퍼스트 방식의 CSS 프레임워크가 무엇인지 궁금해지기 시작했다. 유틸리티 퍼스트(Utility-First) 방…FE · CSS · 웹개발
- 0108 · FE3월 26일[Next.js] "Tailwind CSS: 왜 많은 개발자들이 사랑하는가?"Tailwind CSS란? Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크로, HTML 요소에 직접 클래스를 적용해 스타일을 지정할 수 있도록 설계되었다. ?잠깐!!? 개별적인 유틸리티 퍼스트 방식의 CS…FE · CSS · 웹개발