我目前正在與 Twig 和 Tailwind CSS 一起開發 Symfony 6 專案。
我在這裡安裝了有關本指南的所有內容： https://tailwindcss.com/docs/guides/symfony
我能夠使用（一些）tailwind css 元素，我的 Webpack Encore 透過 PostCSS 載入所需的 tailwind 配置並在 public/build/ 目錄下建立資產。
base.html.twig 載入建置資源
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
{% block title %}Welcome!
{% endblock %}
</title>
<link
rel="icon" href="data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><text y= "1.2em" font-size="96">⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('method2') }}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
這樣我終於可以在index.html.twig（擴充了base.html.twig）中使用它們
{% extends "base.html.twig" %}
{% block title %}
Movies Page
{% endblock %}
{% block body %}
<div class="bg-blue-500 text-2xl text-center font-bold">
{% for movie in movies %}
<li>{{movie.title}}</li>
<p class="animate-ping">{{movie.releaseYear}}</p>
{% endfor %}
<img class="p-1 bg-white border rounded max-w-sm" src="{{asset('images/image1.jpg')}}"/>
</div>
{% endblock %}
如您所見，我嘗試在範例標題和圖像上套用順風屬性。 但是，有關標頭的 tailwind css 屬性有效，但不適用於映像。在瀏覽器中檢查它也不會顯示給定屬性的 css 值。我希望我的圖像更小並帶有邊框，如下所示：
這是結果：
我發現了問題：與實際圖像的路徑有關。
之前儲存在
assets/images/image1.jpg下我在樹枝模板中使用了它，如下所示：
#現在，我使用Webpack Encore的
.copyFiles()函數將映像儲存在public/build/images下webpack.config.js
.copyFiles({ from: "./assets/images", to: "images/[path][name].[hash:8].[ext]", //uses regex pattern pattern: /\.(png|jpg|jpeg|gif)$/, })現在，當我從公共建置路徑（無論哈希值如何）解決它時，它正在工作：
#我猜這在某種程度上與某些非同步進程中的 webpack 相關。我將編輯問題。