我目前正在与 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=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</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 相关。我将编辑问题。