rails7에서 css템플릿인 tailwind-css를 추가하는 방법에 대해 정리해봤다.
how to install
add tailwind
새로운 프로젝트일 경우
새로 프로젝트를 만들경우 --css지정으로 간단히 css template를 추가할 수 있게되었다.
rails new myapp --css tailwind
기존 프로젝트일경우
기존 프로젝트일경우 아래와 같이 추가해주자
gem 'cssbundling-rails'
bin/bundle install
bin/rails css:install:tailwind
gem "tailwindcss-rails"
bin/bundle install
bundle exec rails tailwindcss:install
rails tailwindcss:build
서버기동
webpack대신 tailwindcss:watch라는 커맨드를 기동해줘야한다.
즉 아래 2개의 커맨드를 실행할 필요가 있다.
bundle exec rails s + bin/rails tailwindcss:watch
필자의 경우 supervisord를 이용해 위 2개의 커맨드를 실행,관리해주었다.
동작확인
아래와 같은 scaffold를 실행후 /posts 억세스 해보면 tailwindcss가 적용된 화면 확인이 가능했다.
rails g scaffold post name:string limit:date
create 버튼이 하얀색이라 잘 안보임.
memo
1.
얼마전만해도 yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 등등 설치할것도 많고 postcss7이 버전의존성이 있어 설치가 까다로웠었는데 엄청 심플해졌다.
webpack실행할 필요도 없고 (bin/rails tailwindcss:watch는 필요)
2.
bin/rails css:install:tailwind은
실행환경에 nodejs가 있다는 전제하에 움직인다.
필자의 경우 alpine에서 실행했는데 node.js가 없어서 아래 커맨드로 추가해줬다.
apk add --update nodejs npm
3.
필자가 사용하는 supervisord.conf설정
[program:rails]
command=bundle exec puma
#command=bundle exec rails s -b 0.0.0.0
user=root
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
autostart=true
autorestart=true
redirect_stderr=true
exitcodes=1
[program:css]
command=bin/rails tailwindcss:watch
user=root
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
autostart=true
autorestart=true
redirect_stderr=true
exitcodes=1
4. css수정해도 바로반영안될때(2023/12/10추가)
asset:precompile실행하면 반영되는데 바로 반영안될때는
config/environments/development.rb에
config.assets.debug = true를 추가해주자