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

  1. 프로젝트 생성

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

    Terminal
    symfony new --webapp my-projectcd my-project

  2. Webpack Encore 설치

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

    Terminal
    composer require symfony/webpack-encore-bundle

  3. Tailwind CSS 설치

    npm을 사용해 tailwindcss와 그에 필요한 의존성, 그리고 postcss-loader를 설치한 후, init 명령어를 실행해 tailwind.config.js와 postcss.config.js를 생성하세요.

    Terminal
    npm install -D tailwindcss postcss postcss-loader autoprefixernpx tailwindcss init -p

  4. PostCSS 지원 활성화

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

    webpack.config.js
    Encore
  // ...
  .enablePostCssLoader()
;

  5. 템플릿 경로 설정

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

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  6. Tailwind 지시어 추가

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

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

  7. 빌드 프로세스 시작

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

    Terminal
    npm run watch

  8. 프로젝트에서 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>