Symfony에서 Tailwind CSS 설치하기

Symfony 프로젝트에 Tailwind CSS를 설정하는 방법입니다.

프로젝트 생성

아직 설정하지 않았다면 새로운 Symfony 프로젝트를 생성하세요. 가장 일반적인 방법은 Symfony Installer를 사용하는 것입니다.

터미널

symfony new --webapp my-projectcd my-project

Webpack Encore 설치

에셋 빌드를 처리하는 Webpack Encore를 설치하세요. 자세한 내용은 문서를 참고하세요.

터미널

composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundlecomposer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

Tailwind CSS 설치

npm을 사용해 @tailwindcss/postcss와 그에 필요한 의존성, 그리고 postcss-loader를 설치하세요.

터미널

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

PostCSS 지원 활성화

webpack.config.js 파일에서 PostCSS Loader를 활성화하세요. 자세한 내용은 문서를 참고하세요.

webpack.config.js

Encore  .enablePostCssLoader();

PostCSS 플러그인 설정

프로젝트 루트에 postcss.config.mjs 파일을 생성하고 PostCSS 설정에 @tailwindcss/postcss 플러그인을 추가하세요.

postcss.config.mjs

export default {  plugins: {    "@tailwindcss/postcss": {},  },};

Tailwind CSS 임포트

./assets/styles/app.css에 Tailwind CSS를 임포트하는 @import를 추가하세요.

app.css

@import "tailwindcss";

빌드 프로세스 시작

npm run watch로 빌드 프로세스를 실행하세요.

터미널

npm run watch

프로젝트에서 Tailwind 사용하기

컴파일된 CSS가 <head>에 포함되었는지 확인한 후, Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

base.html.twig

<!doctype html><html>  <head>    <meta charset="utf-8" />    <meta      name="viewport"      content="width=device-width, initial-scale=1.0"    />    {% block stylesheets %}      {{ encore_entry_link_tags('app') }}    {% endblock %}  </head>  <body>    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  </body></html>