Phoenix에서 Tailwind CSS 설치하기

Phoenix 프로젝트에 Tailwind CSS 설정하기.

프로젝트 생성

아직 설정하지 않았다면 새로운 Phoenix 프로젝트를 생성하세요. 설치 가이드를 따라 진행하면 됩니다.

Terminal

mix phx.new myprojectcd myproject

Tailwind 플러그인 설치

Tailwind 플러그인을 의존성에 추가하고 mix deps.get을 실행하여 설치하세요.

mix.exs

defp deps do  [    # …    {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},  ]end

Tailwind 플러그인 설정

config/config.exs 파일에서 사용할 Tailwind CSS 버전을 설정하고 에셋 경로를 커스터마이징할 수 있습니다.

config.exs

config :tailwind,  version: "4.0.0",  myproject: [    args: ~w(      --input=css/app.css      --output=../priv/static/assets/app.css    ),    cd: Path.expand("../assets", __DIR__)  ]

배포 스크립트 업데이트

배포 시 CSS를 빌드하기 위해 assets.deploy 별칭을 설정하세요.

mix.exs

defp aliases do  [    # …    "assets.deploy": [      "tailwind myproject --minify",      "esbuild myproject --minify",      "phx.digest"    ]  ]end

개발 모드에서 감시자 활성화

./config/dev.exs 파일에서 Tailwind를 감시자 목록에 추가하세요.

dev.exs

watchers: [  # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)  esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]},  tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]}]

Tailwind CSS 설치

Tailwind CLI를 독립 실행형으로 다운로드하려면 설치 명령어를 실행하세요.

Terminal

mix tailwind.install

Tailwind CSS 임포트

./assets/css/app.css 파일에 Tailwind CSS를 불러오기 위해 @import를 추가하세요. 또한 Tailwind CSS가 유틸리티를 스캔할 위치를 지정해야 합니다.

app.css

@import "tailwindcss" source("../..");

기본 CSS import 제거

Tailwind가 이제 CSS를 처리해주기 때문에 ./assets/js/app.js에서 CSS import를 제거하세요.

app.js

// Remove this line if you add your own CSS build pipeline (e.g postcss).import "../css/app.css"

빌드 프로세스 실행

빌드 프로세스를 실행하려면 mix phx.server를 사용하세요.

Terminal

mix phx.server

Tailwind 사용

여러분의 콘텐츠 스타일링을 위해 Tailwind의 유틸리티 클래스를 사용해 보세요.

index.html.heex

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