Tailwind CSS는 ‘유틸리티 우선(utility-first)’ 방식의 CSS 프레임워크로, 별도의 커스텀 CSS 파일을 작성하는 대신 flex, flex-column, shadow-xl 등과 같은 작고 재사용 가능한 유틸리티 클래스를 HTML 마크업에 직접 적용하여 스타일을 지정합니다. 이는 마치 레고 블록을 쌓듯이 빠르고 일관성 있는 디자인을 가능하게 합니다. 더 자세한 정보는 tailwindcss.com에서 확인할 수 있습니다.
Rails 애플리케이션에 Tailwind CSS를 추가하는 가장 우아한 방법은 젬(gem)을 사용하는 것입니다. tailwind-css-rails 젬을 bundle add tailwindcss-rails 명령어로 설치한 후, bin/rails tailwindcss:install 명령어를 실행하면 별도의 수동 설정 없이 Tailwind CSS가 Rails 프로젝트에 통합됩니다.
Tailwind CSS를 설치한 후에는 bin/rails s 대신 bin/dev 명령어를 사용하여 Rails 서버를 실행해야 합니다. bin/dev 스크립트는 Procfile.dev에 정의된 대로 Rails 서버와 함께 Tailwind CSS watch 명령을 동시에 실행합니다. 이 watch 명령은 CSS 변경 사항을 감지하여 최종 CSS에 자동으로 포함시키므로, 개발자는 페이지를 새로고침할 때마다 실시간으로 스타일 변경을 확인할 수 있습니다. 예를 들어, 텍스트 색상을 text-gray-300으로 변경했을 때 bin/dev를 통해 즉시 반영되는 것을 시연합니다.
영상에서는 projects show view를 예시로 들어 실제 스타일링 과정을 보여줍니다. H2 태그에 text-extra-large, font-semibold, text-gray-800, mb-4 (margin bottom 4)와 같은 클래스를 적용하여 제목의 크기, 굵기, 색상 및 하단 여백을 조정합니다. UL 태그에는 space-y-2를 적용하여 수직 간격을 부여하고, 각 목록 항목(LI)에는 bg-white, p-4 (padding 4), shadow, rounded (둥근 모서리), flex, items-center, justify-between 등을 적용하여 배경색, 패딩, 그림자, 모서리 둥글기, 그리고 플렉스박스를 이용한 정렬을 구현합니다.
이러한 Tailwind CSS 클래스들을 활용하여 애플리케이션의 전체적인 UI가 크게 개선된 모습을 보여줍니다. 헤더, 프로젝트 및 할 일 목록, 새로운 할 일 추가 페이지 등 전반적인 요소들이 현대적이고 매력적인 디자인으로 탈바꿈합니다. 영상에서는 완성된 스타일링 코드를 GitHub 저장소에 제공하여 사용자들이 참고할 수 있도록 합니다.