Ruby on Rails에서 Tailwind CSS 설치하기

Ruby on Rails v7+ 프로젝트에서 Tailwind CSS 설정하기

아직 설정되지 않은 경우, 새로운 Rails 프로젝트를 생성하세요. 가장 일반적인 방법은 Rails 커맨드라인을 사용하는 것입니다.

터미널

rails new my-projectcd my-project

tailwindcss-ruby와 tailwindcss-rails gem을 설치한 후, 프로젝트에서 Tailwind CSS를 설정하기 위해 설치 명령어를 실행하세요.

터미널

./bin/bundle add tailwindcss-ruby -v 4.0.0.beta.9./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install

./app/assets/stylesheets 디렉토리에 위치한 application.tailwind.css 파일에 Tailwind CSS를 임포트하는 @import를 추가하세요.

application.tailwind.css

@import "tailwindcss";

./bin/dev로 빌드 프로세스를 실행하세요.

터미널

./bin/dev

Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

index.html.erb

<h1 class="text-3xl font-bold underline">  Hello world!</h1>