I'm currently working on a Symfony 6 project with Twig and Tailwind CSS.
I installed everything for this guide here: https://tailwindcss.com/docs/guides/symfony
I am able to use (some) tailwind css elements, my Webpack Encore loads the required tailwind configuration via PostCSS and builds the assets in the public/build/ directory.
base.html.twig Load build resources
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>
So I can finally use them in index.html.twig (which extends 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 %}
As you can see, I tried applying the tailwind attribute on the example title and image. However, the tailwind css properties regarding headers work, but not for images. Checking it in the browser also doesn't show the css value of the given property. I want my image to be smaller and have a border like this:
This is the result:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I found the problem: it has to do with the path of the actual image.
Previously stored under
assets/images/image1.jpgI used it in the twig template like this:
Now, I use Webpack Encore's
.copyFiles()function to store the images underpublic/build/imageswebpack.config.js
.copyFiles({ from: "./assets/images", to: "images/[path][name].[hash:8].[ext]", //uses regex pattern pattern: /\.(png|jpg|jpeg|gif)$/, })Now when I resolve it from the public build path (regardless of hash) it is working:
I guess this is somehow related to webpack in some async process. I'll edit the question.