search

Home  >  Q&A  >  body text

Webpack: Some css style properties are not applied or not running

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:

P粉111627787P粉111627787276 days ago337

reply all(1)I'll reply

  • P粉342101652

    P粉3421016522024-02-27 12:29:11

    I found the problem: it has to do with the path of the actual image.

    Previously stored under assets/images/image1.jpg

    I used it in the twig template like this:

    Now, I use Webpack Encore's .copyFiles() function to store the images under 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)$/,
  })

    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.

    reply
    0
  • Cancelreply