Tailwind CSS home page
  1. 설치
  2. Phoenix에서 Tailwind CSS 설치

  1. 프로젝트 생성

    아직 프로젝트를 설정하지 않았다면 새로운 Phoenix 프로젝트를 생성하세요. 설치 가이드를 따라 시작할 수 있습니다.

    Terminal
    mix phx.new myprojectcd myproject

  2. Tailwind 플러그인 설치

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

    mix.exs
    defp deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

  3. Tailwind 플러그인 설정

    config.exs 파일에서 사용할 Tailwind CSS 버전, Tailwind 설정 파일 경로, 그리고 에셋 경로를 설정할 수 있습니다.

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

  4. 배포 스크립트 업데이트

    assets.deploy 앨리어스를 설정하여 배포 시 CSS를 빌드하도록 구성하세요.

    mix.exs
    defp aliases do
  [
    setup: ["deps.get", "ecto.setup"],
    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
    "ecto.reset": ["ecto.drop", "ecto.setup"],
    test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
end

  5. 개발 환경에서 watcher 활성화

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

    dev.exs
    watchers: [
  # esbuild watcher를 시작하려면 Esbuild.install_and_run(:default, args)를 호출하세요.
  esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]

  6. Tailwind CSS 설치

    설치 명령어를 실행하여 독립형 Tailwind CLI를 다운로드하고 ./assets 디렉토리에 tailwind.config.js 파일을 생성하세요.

    Terminal
    mix tailwind.install

  7. 템플릿 경로 설정

    ./assets/tailwind.config.js 파일에서 모든 템플릿 파일의 경로를 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  8. CSS에 Tailwind 지시자 추가

    Tailwind의 각 레이어에 대한 @tailwind 지시자를 ./assets/css/app.css에 추가하세요.

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  9. 기본 CSS import 제거

    Tailwind가 이제 CSS를 처리하므로 ./assets/js/app.js에서 CSS import를 제거하세요.

    app.js
    // postcss와 같은 CSS 빌드 파이프라인을 추가한다면 이 줄을 제거하세요.
import "../css/app.css"

  10. 빌드 프로세스 시작

    mix phx.server로 빌드 프로세스를 실행하세요.

    Terminal
    mix phx.server

  11. 프로젝트에서 Tailwind 사용 시작

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

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