Symfony, AssetMapper, Tailwindv4: unable to find asset "tailwindcss"

[sully-vian]

Summary

I found two issues with the mentionned tutorial (and provided fixes). I met a third issue that I haven't been able to fix until now.

Steps to Reproduce

1. Initilialize an app: symfony new preline-test --webapp
2. Navigate to the project directory: cd preline-test
3. Follow the Symfony TailwindCSS install tutorial
   1. Install the Tailwind bundle: composer require symfonycasts/tailwind-bundle
   2. Initialize the app: php bin/console tailwind:init
   3. Start the tailwind watcher service: php bin/console tailwind:build --watch
   4. To show tailwind is correctly working, add @source "/templates/"; to the /assets/styles/app.css file. and add a class="bg-red-500" to the body tag in /templates/base.html.twig.
   5. Confirm the compiled CSS is found at /var/tailwind/app.built.css and contains the bg-red-500 class.
4. Follow your Preline UI install tutorial for Symfony AssetMapper
   1. Install Preline with NPM: npm install preline and add the dev dependency: npm install -D @tailwindcss/forms
   2. Copy the Preline files into local assets:

   # Create vendor directory
   mkdir -p assets/vendor/preline/src/
   # Copy essential Preline files
   cp node_modules/preline/preline.js assets/vendor/preline/
   cp node_modules/preline/variants.css assets/vendor/preline/
   cp -r node_modules/preline/src/plugins assets/vendor/preline/src/

   3. Configure the CSS and Javascript entry file to import Preline UI: see tutorial step 3
   4. Update the AssetMapper importmap: see tutorial step 4

Demo Link

https://github.com/sully-vian/preline-test/tree/main

Expected Behavior

The Tailwind service should correctly compile the app.built.css file containing all used classes along with the Preline CSS.

Actual Behavior

Tutorial issue

The Tailwind service throws:

Error: Package path ./variants.css is not exported from package path/to/project/node_modules/preline (see exports field in path/to/project/node_modules/preline/package.json)

The issue can be resolved by replacing @import 'preline/variants.css'; with @import '../vendor/preline/variants.css'; in app.css.

The thrown error is now:

Error: Can't resolve './src/plugins/dropdown/variants.css' in 'path/to/project/preline-test/assets/vendor/preline'

Which comes from an error in the Preline tutorial. The cp command actually copies the node_modules/preline/src/plugins's content to assets/vendor/preline/src/ because the srcdirectory doesn't exist yet.
The solution is to run create the directory (mkdir -p assets/vendor/preline/src/) before copying the plugins.

Now, tailwind correctly compiles the CSS. So the issue is in the tutorial, not really in the package in itself.

---

Deeper issue

When running symfony server:start, the Symfony server is accessible locally with the given port.

Create a basic page

Create /templates/hello.html.twig:

{# /templates/hello.html.twig #}
{% extends 'base.html.twig' %}
{% block body %}
    <h1>Hello from the template!</h1>
{% endblock %}

And add the following to /config/routes.yaml:

# /config/routes.yaml
home:
    path: /
    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController::templateAction
    defaults:
        template: 'hello.html.twig'

The page is now accessible at the website's root.

Open the devtools, you should see a console error with a failed GET request for an app-xxxx.css file. The exact error is:

Unable to find asset "tailwindcss" referenced in path/to/project/assets/vendor/preline/src/plugins/datepicker/styles.css". The file "path/to/project/assets/vendor/preline/src/plugins/datepicker/tailwindcss" does not exist.

The fact that the error happens in Symfony and not when tailwind compiles the CSS is revealing. It seems the AssetMapper is loading the Preline CSS files after processing the app.css through Tailwind. The AssetMapper reads the Preline CSS files, comes accross @import "tailwindcss"; and looks for a physical file named "tailwindcss". It fails to find it and shows the error above.

Screenshots

No response