我目前正在与 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
1
903
{% block title %}Welcome!
{% endblock %}
{# 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 %}
{% block body %}{% endblock %}
这样我终于可以在index.html.twig（扩展了base.html.twig）中使用它们
{% extends "base.html.twig" %}
{% block title %}
Movies Page
{% endblock %}
{% block body %}
{% for movie in movies %}
{{movie.title}}
{{movie.releaseYear}}
{% endfor %}
}})
{% endblock %}
如您所见，我尝试在示例标题和图像上应用顺风属性。 但是，有关标头的 tailwind css 属性有效，但不适用于图像。在浏览器中检查它也不会显示给定属性的 css 值。我希望我的图像更小并带有边框，如下所示：
这是结果：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我发现了问题：与实际图像的路径有关。
之前存储在
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 相关。我将编辑问题。