Tailwind CSS는 개발자가 별도의 스타일시트 없이 HTML 마크업에 flex, shadow-xl과 같은 재사용 가능한 유틸리티 클래스를 직접 적용할 수 있는 ‘유틸리티 우선’ CSS 프레임워크입니다. 이는 빠르고 일관된 디자인 시스템 구축을 가능하게 하며, 공식 문서(tailwindcss.com)에서 더 많은 정보를 얻을 수 있습니다.
Rails에 Tailwind를 통합하는 과정은 tailwindcss-rails 젬 설치(bundle add tailwindcss-rails)와 bin/rails tailwindcss:install 명령 실행으로 간결하게 이루어집니다. 이는 수동 설정 없이 Rails의 젬 시스템으로 쉽게 가능합니다.
개발 시 서버 실행은 bin/rails s 대신 bin/dev를 사용해야 합니다. bin/dev는 Procfile.dev를 통해 Rails 서버와 tailwindcss --watch 프로세스를 동시에 실행하여, CSS 변경 사항을 실시간으로 감지하고 반영함으로써 개발 효율성을 높입니다.
비디오는 projects show 뷰를 예로 들어 Tailwind 클래스 적용을 시연합니다. H2 태그에 text-xl, font-semibold, mb-4 등을, UL 태그에 space-y-2를 적용합니다. 각 할 일 항목에는 bg-white, p-4, shadow, rounded, flex, items-center, justify-between 등 다양한 유틸리티 클래스를 조합하여 시각적으로 매력적인 레이아웃을 구현합니다. 이처럼 Tailwind는 복잡한 CSS 없이도 유연하고 현대적인 UI를 빠르게 구축하는 방법을 보여줍니다. 최종적으로 ‘doable’ 앱은 헤더, 내비게이션 등 전체 UI가 세련되게 변화하며, 스타일링된 코드는 GitHub 저장소에서 참고할 수 있습니다.