Chapters

32 Chapters | 4:16:27 |

01

Hello LAST Stack!

4:01
02

Asset Mapper

5:18
03

JavaScript Modules

6:33
04

3rd Party JavaScript Packages

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus

6:45
08

Symfony UX Packages

6:47
09

Turbo Drive

5:42
10

Turbo Frames

8:43
11

Popover!

11:44
12

Auto-Submitting Forms

3:37
13

Pagination & Column Sorting

8:04
14

Data Tables with Turbo Frames

7:03
15

View Transitions

7:04
16

Toast Notifications

3:46
17

Fancier Toasts: Auto-close & Fading

7:34
18

Turbo Streams: Update any Element

5:23
19

HTML dialog for Modals

13:18
20

AJAX Modal!

8:29
21

Fantastic Modal UX with a Loading State

8:04
22

Fancy things on Modal Form Success

8:30
23

More with fun Modals! Editing & Deleting

10:05
24

Turbo Stream Responses

4:24
25

Twig Components

10:52
26

Modal Twig Component

11:54
27

Live Components

11:47
28

Real-Time Validation & Dependent Form Fields

11:37
29

Testing Part 1: Twig & Live Components

5:32
30

Testing Part 2: Functional Testing

12:36
31

Performance

9:16
32

Bonus: More on Flowbite

11:08

> Symfony 6 > 30 Days with LAST Stack

Buy Access to Course

06.

Tailwind CSS

Autoplay

Previous Chapter

Next Challenge

I love using Tailwind for CSS. If you've never used it before, or maybe only heard of it, you might... hate it at first. That's because you use classes inside of HTML to define everything. And so your HTML can end up looking, well, a bit crazy. But give it a chance. I've absolutely fallen in love with it. And, instead of this looking ugly to me, it looks descriptive.

Tailwind Requires Building!

Tailwind isn't your traditional CSS behemoth where you download a giant CSS file and include it. Instead, Tailwind has a binary that parses all of your templates, finds the classes you're using, and then dumps a final CSS containing just those classes. So it keeps your final CSS as small as possible.

But to do this, duh duh duh! Tailwind requires a build step. And that's okay. Just because we don't have a build step for our entire JavaScript system doesn't mean we can't opt into a small one for a specific purpose.

Installing symfonycasts/tailwind-bundle

And there's a super-easy bundle to help us do this with AssetMapper. It's called symfonycasts/tailwind-bundle. Hey, I've heard of them!

Head down here, go to the documentation... and I'll copy the composer require line. Spin over and run that:

composer require symfonycasts/tailwind-bundle

This bundle will help us run the build command in the background and serve up the final file. We point it at a real CSS file, then it'll sneak in the dynamic content. You'll see.

While we're here, run:

php bin/console debug:config symfonycasts_tailwind

to see the default configuration for the bundle. By default, the file that it "builds" is assets/styles/app.css... which is great because we already have an assets/styles/app.css file!

To get things set up, run a command from the bundle:

php bin/console tailwind:init

Tip

If using the Symfony CLI, you can add a build command as a worker to be started whenever you run the Symfony web server:

# .symfony.local.yaml
workers:
    tailwind:
        cmd: ['symfony', 'console', 'tailwind:build', '--watch']

See the docs for more information.

This downloads the Tailwind binary in the background, which is awesome. That binary is standalone and doesn't require Node. It just works. The command also did two other things. First: it added the three lines needed inside of app.css:

            
Copy Code

Show All Lines

                        8 lines
            |
            assets/styles/app.css
        
            @tailwind base;
        
            @tailwind components;
        
            @tailwind utilities;
        
Show Lines

                                                    // ... lines 4 - 8

When this file is built, these will be replaced by the actual CSS we need. Second, this created a tailwind.config.js file:

            
Copy Code

                        12 lines
            |
            tailwind.config.js
        
            /** @type {import('tailwindcss').Config} */
        
            module.exports = {
        
              content: [
        
                "./assets/**/*.js",
        
                "./templates/**/*.html.twig",
        
              ],
        
              theme: {
        
                extend: {},
        
              },
        
              plugins: [],
        
            }

This tells Tailwind where to look for all the classes we'll use. This will find any classes in our JavaScript files or our templates.

To execute Tailwind, run:

php bin/console tailwind:build -w

For watch. That builds... then hangs out, waiting for future changes.

So... what did that do? Remember: we're already including app.css on our page. When we refresh, woh! It looks a bit different! The reason is, if you view the page source, and click to open the app.css file, it's full of Tailwind code! Our app.css file is no longer this exact source file! Behind the scenes, the Tailwind binary parses our templates, dumps a final version of this file, which is then returned. This file already contains a bunch of code because I filled the CRUD templates with Tailwind classes before we started the tutorial.

Using Tailwind

But let's see this in action for real. If we refresh the page, this is my h1. It's small and sad. Open templates/main/homepage.html.twig. On the h1, add class="text-3xl":

            
Copy Code

Show All Lines

                        8 lines
            |
            templates/main/homepage.html.twig
        
Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <h1 class="text-3xl">Space Inviters: Plan your voyage and come in peace!</h1>
        
            {% endblock %}

Now, refresh. It works! If that text-3xl wasn't in the app.css file before, Tailwind just added it because it's running in the background.

Pasting in The Layout

So Tailwind is working! To celebrate, let's paste in a proper layout. If you downloaded the course code, you should have a tutorial/ directory with a couple of files. Move base.html.twig into templates:

            
Copy Code

                        48 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                <head>
        
                    <meta charset="UTF-8">
        
                    <meta name="viewport" content="width=device-width, initial-scale=1">
        
                    <title>{% block title %}Space Inviters!{% 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>">
        
                    {% block stylesheets %}
        
                    {% endblock %}
        
                    {% block javascripts %}
        
                        {{ importmap('app') }}
        
                    {% endblock %}
        
                </head>
        
                <body class="bg-black text-white font-mono">
        
                    <div class="container mx-auto min-h-screen flex flex-col">
        
                        <header class="my-8 px-4">
        
                            <nav class="flex items-center justify-between mb-4">
        
                                <div class="flex items-center">
        
                                    <a href="{{ path('app_homepage') }}">
        
                                        <img src="{{ asset('images/logo.png') }}" width="50" alt="Space Inviters Logo" >
        
                                    </a>
        
                                    <a href="{{ path('app_homepage') }}" class="text-xl ml-3">Space Inviters</a>
        
                                    <a href="{{ path('app_voyage_index') }}" class="ml-6 hover:text-gray-400">Voyages</a>
        
                                    <a href="{{ path('app_planet_index') }}" class="ml-4 hover:text-gray-400">Planets</a>
        
                                </div>
        
                                <div
        
                                    class="hidden md:flex pr-10 items-center space-x-2 border-2 border-gray-900 rounded-lg p-2 bg-gray-800 text-white cursor-pointer"
        
                                >
        
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
        
                                    <span class="pl-2 pr-10 text-gray-500">Search Cmd+K</span>
        
                                </div>
        
                            </nav>
        
                        </header>
        
                        <!-- Make sure the main tag takes up the remaining height -->
        
                        <main class="flex-grow">{% block body %}{% endblock %}</main>
        
                        <!-- Footer -->
        
                        <footer class="py-4 mt-6 bg-gray-800 text-center">
        
                            <div class="text-sm">
        
                                With <svg class="inline-block w-4 h-4 text-red-600 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 3.22l-.61-.6a5.5 5.5 0 00-7.78 7.78l7.39 7.4 7.39-7.4a5.5 5.5 0 00-7.78-7.78l-.61.61z"/></svg> from Symfonycasts.
        
                            </div>
        
                        </footer>
        
                    </div>
        
                </body>
        
            </html>

And these other two go into the main/ directory:

            
Copy Code

                        63 lines
            |
            templates/main/homepage.html.twig
        
            {% extends 'base.html.twig' %}
        
            {% block title %}Space Inviters!{% endblock %}
        
            {% block body %}
        
                <div class="flex">
        
                    <aside class="hidden md:block md:w-64 bg-gray-900 px-2 py-6">
        
                        <h2 class="text-xl text-white font-semibold mb-6 px-2">Planets</h2>
        
                        <div>
        
                            {{ include('main/_planet_list.html.twig') }}
        
                        </div>
        
                    </aside>
        
                    <section class="flex-1 ml-10">
        
                        <form
        
                            method="GET"
        
                            action="{{ path('app_homepage') }}"
        
                            class="mb-6 flex justify-between"
        
                        >
        
                            <input
        
                                type="search"
        
                                name="query"
        
                                value="{{ app.request.query.get('query') }}"
        
                                aria-label="Search voyages"
        
                                placeholder="Search voyages"
        
                                class="w-1/3 px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
        
                            >
        
                            <div class="whitespace-nowrap m-2 mr-4">{{ voyages|length }} results</div>
        
                        </form>
        
                        <div class="bg-gray-800 p-4 rounded">
        
                            <table class="w-full text-white">
        
                                <thead>
        
                                    <tr>
        
                                        <th class="text-left py-2">Purpose</th>
        
                                        <th class="text-left py-2 pr-4">Planet</th>
        
                                        <th class="text-left py-2">Departing</th>
        
                                    </tr>
        
                                </thead>
        
                                <tbody>
        
                                    {% for voyage in voyages %}
        
                                    <tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}">
        
                                        <td class="p-4">{{ voyage.purpose }}</td>
        
                                        <td class="px-2 whitespace-nowrap">
        
                                            <img
        
                                                src="{{ asset('images/'~voyage.planet.imageFilename) }}"
        
                                                alt="Image of {{ voyage.planet.name }}"
        
                                                class="inline-block w-8 h-8 rounded-full bg-gray-600 ml-2"
        
                                            >
        
                                        </td>
        
                                        <td class="px-2 whitespace-nowrap">{{ voyage.leaveAt|date('Y-m-d') }}</td>
        
                                    </tr>
        
                                    {% endfor %}
        
                                </tbody>
        
                            </table>
        
                        </div>
        
                        <div class="flex items-center mt-6 space-x-4">
        
                            <a href="#" class="block py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600">Previous</a>
        
                            <a href="#" class="block py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600">Next</a>
        
                        </div>
        
                    </section>
        
                </div>
        
            {% endblock %}

            
Copy Code

                        22 lines
            |
            templates/main/_planet_list.html.twig
        
            <ul>
        
                {% for planet in planets %}
        
                    <li class="mb-4 group">
        
                        <a href="{{ path('app_planet_show', {
        
                            'id': planet.id,
        
                        }) }}" class="block transform transition duration-300 ease-in-out hover:translate-x-1 hover:bg-gray-700 rounded">
        
                            <div class="flex justify-between items-start p-2">
        
                                <div class="pr-3">
        
                                    <span class="text-white">{{ planet.name }}</span>
        
                                    <span class="block text-gray-400 text-sm">{{ planet.lightYearsFromEarth|round|number_format }} light years</span>
        
                                </div>
        
                                <img
        
                                    class="flex-shrink-0 w-8 h-8 bg-gray-600 rounded-full group-hover:bg-gray-500 transition duration-300 ease-in-out"
        
                                    src="#"
        
                                    alt="Image of {{ planet.name }}"
        
                                >
        
                            </div>
        
                        </a>
        
                    </li>
        
                {% endfor %}
        
            </ul>

Refresh. Huh, no difference. That's because, at least on a Mac, because I moved and overwrote those files, Twig didn't notice that they were updated... so its cache is out-of-date.

Open a fresh terminal tab and run:

php bin/console cache:clear

Then... woo! Welcome to Space Inviters! Styled up and ready to go! But there's nothing special about the new templates. We do have a list of voyages... but it's all boring, normal Twig code with Tailwind classes.

Referencing Assets Dynamically

We do have some broken planet images though. To fix those, go into the tutorial/assets/ directory... and move all of those planets into assets/images/. Delete the tutorial/ folder.

That broken img tag comes from the _planet_list.html.twig partial. Here it is:

            
Copy Code

Show All Lines

                        22 lines
            |
            templates/main/_planet_list.html.twig
        
            <ul>
        
                {% for planet in planets %}
        
                    <li class="mb-4 group">
        
                        <a href="{{ path('app_planet_show', {
        
                            'id': planet.id,
        
                        }) }}" class="block transform transition duration-300 ease-in-out hover:translate-x-1 hover:bg-gray-700 rounded">
        
                            <div class="flex justify-between items-start p-2">
        
Show Lines

                                                    // ... lines 8 - 11
                            
                                <img
        
Show Lines

                                                    // ... line 13
                            
                                    src="#"
        
Show Lines

                                                    // ... line 15
                            
                                >
        
                            </div>
        
                        </a>
        
                    </li>
        
                {% endfor %}
        
            </ul>

I left it for us to finish! How nice of me! We know that we can do {{ assets() }} then something like images/planets-1.png. That would work. But this time, the planet-1.png part is a dynamic property on the Planet entity. So, instead say ~ then planet.imageFilename:

            
Copy Code

Show All Lines

                        22 lines
            |
            templates/main/_planet_list.html.twig
        
            <ul>
        
                {% for planet in planets %}
        
                    <li class="mb-4 group">
        
                        <a href="{{ path('app_planet_show', {
        
                            'id': planet.id,
        
                        }) }}" class="block transform transition duration-300 ease-in-out hover:translate-x-1 hover:bg-gray-700 rounded">
        
                            <div class="flex justify-between items-start p-2">
        
Show Lines

                                                    // ... lines 8 - 11
                            
                                <img
        
Show Lines

                                                    // ... line 13
                            
                                    src="{{ asset('images/'~planet.imageFilename) }}"
        
Show Lines

                                                    // ... line 15
                            
                                >
        
                            </div>
        
                        </a>
        
                    </li>
        
                {% endfor %}
        
            </ul>

And... pretty! Yea, I know that's not what Earth and Saturn look like - I've got some randomness in my fixtures - but they're fun to look at!

Using KnpTimeBundle

Since day 6 is the "making everything look awesome day", let's do two more things. To start, I don't love this date. It's boring! I want a cool looking date.

So, install one of my favorite bundles:

composer require knplabs/knp-time-bundle

This gives us a handy ago filter. So as soon as this finishes, spin over and open homepage.html.twig. Search for leaveAt, here we go. Replace that date filter with ago:

            
Copy Code

Show All Lines

                        63 lines
            |
            templates/main/homepage.html.twig
        
Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <div class="flex">
        
Show Lines

                                                    // ... lines 7 - 13
                            
                    <section class="flex-1 ml-10">
        
Show Lines

                                                    // ... lines 15 - 29
                            
                        <div class="bg-gray-800 p-4 rounded">
        
                            <table class="w-full text-white">
        
Show Lines

                                                    // ... lines 32 - 38
                            
                                <tbody>
        
                                    {% for voyage in voyages %}
        
                                    <tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}">
        
Show Lines

                                                    // ... lines 42 - 49
                            
                                        <td class="px-2 whitespace-nowrap">{{ voyage.leaveAt|ago }}</td>
        
                                    </tr>
        
                                    {% endfor %}
        
                                </tbody>
        
                            </table>
        
                        </div>
        
Show Lines

                                                    // ... lines 56 - 59
                            
                    </section>
        
                </div>
        
            {% endblock %}

And... much cooler!

What else? Go check out the CRUD areas. These were generated via MakerBundle... but... I did preload them with Tailwind classes so they look good. Wow, there is a lot of celebrating right now. I'm not complaining.

But... if you go to a form, it looks terrible! Why? The form markup comes from Symfony's form theme... which outputs the fields without Tailwind classes.

Flowbite for Tailwind Examples

So what do we do? Do we need to create a form theme? Fortunately, no. One of the great things about Tailwind is there's an entire ecosystem set up around it. For example, Flowbite is a site with a mixture of open source examples and pro, paid features. On the open source side of things, you can, for example, find an "Alert" page with different markup to make great-looking alerts. And, you don't need to install anything with Flowbite. These classes are all native Tailwind. You can copy this markup into your project and refresh. Nothing special. And I love it.

Tip

Flowbite does also come with some JavaScript & a Tailwind Plugin. Check out the bonus chapter for the details!

This also has a forms section where it shows how we can make forms look really nice. In theory, if we could make our forms output like this, they would look great.

Adding a Tailwind Form Theme

And fortunately, there's a bundle that can help us. It's called tales-from-a-dev/flowbite-bundle. Click "Installation" and copy the composer require line. Then run it:

composer require tales-from-a-dev/flowbite-bundle

We're getting a lot of stuff installed today! This asks if we want to install the contrib recipe. Let's say yes, permanently. Cool!

Back on the installation instructions, we don't need to register the bundle - that happens automatically - but we do need to copy this line for the tailwind configuration file.

Open up tailwind.config.js, and paste that:

            
Copy Code

Show All Lines

                        13 lines
            |
            tailwind.config.js
        
            /** @type {import('tailwindcss').Config} */
        
            module.exports = {
        
              content: [
        
Show Lines

                                                    // ... lines 4 - 5
                            
                "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
        
              ],
        
Show Lines

                                                    // ... lines 8 - 11
                            
            }

This bundle comes with its own form theme template with its own Tailwind classes. So we want to make sure that Tailwind sees those and outputs the CSS for them.

The last step over on the docs is to tell our system to use this form theme by default. This happens over in config/packages/twig.yaml. I'll paste... then fix the indentation:

Tip

Starting in version 0.4.0, use @TalesFromADevFlowbite/form/default.html.twig.

            
Copy Code

Show All Lines

                        8 lines
            |
            config/packages/twig.yaml
        
            twig:
        
Show Lines

                                                    // ... line 2
                            
                form_themes: ['@Flowbite/form/default.html.twig']
        
Show Lines

                                                    // ... lines 4 - 8

That's it. Go back, refresh and eureka! In just over 10 minutes, we installed Tailwind and started using it everywhere.

Tomorrow, we'll turn back to JavaScript and leverage Stimulus to write reliable JavaScript code that we can love.

31 Comments

Sort By

ThierryGTH 4 months ago edited HIGHLIGHTED

Hi !

Thank you very much for your work.

To get tailwind completion working in twig template with PhpStorm :

PhpStorm documentation

After step 2 npm install -D tailwindcss

You don't need to do step 3 because tailwind.config.js file already exists (after tailwind:init),

but you need to add "twig": "html" to the includeLanguages list in IDE "Settings" -> "Languages & Frameworks" -> "Style Sheets" -> "Tailwind CSS"

2 | Reply |

AntoineR ThierryGTH 3 months ago

That's kind of a non-sense. We want to avoid installing node, but we need it just for completion...

| Reply |

Victor SFCASTS AntoineR 3 months ago

Hey AntoineRm,

Agree, that's not ideal, though at least you need it only for localhost where you're coding... no need of NodeJS on prod, that is still good. Or if you don't care about autocompletion - you can just ignore it.

Cheers!

| Reply |

Victor SFCASTS ThierryGTH 4 months ago

Hey ThierryGTH,

Thank you for sharing this information with others!

Cheers!

| Reply |

Joris-Mak 4 months ago

I just did this, and the tutorial shows this:

form_themes: ['@Flowbite/form/default.html.twig']

but I get an error about a missing Flowbite namespace.

Doing a bin/console debug:twig shows:

@TalesFromADevFlowbite    vendor/tales-from-a-dev/flowbite-bundle/templates/

which makes sense.
Changing '@Flowbite' to '@TalesFromADevFlowbite' makes it work.

Change since making this tutorial? (The world moves fast :wink:).
Or did I miss an update somewhere?

2 | Reply |

weaverryan SFCASTS Joris-Mak 4 months ago

Lol, yup - a chance since yesterday! https://github.com/tales-from-a-dev/flowbite-bundle/pull/20

Their docs are already updated, but I'll add a note to the tutorial.

Thanks!

| Reply |

jdevine 4 months ago edited HIGHLIGHTED

FOR THOSE WANTING TO INSTALL FLOWBITE

Some Flowbite components require custom javascript to work as intended. It is also part of the installation instructions for the flowbite-bundle. So if you are using that bundle, like this course does, I would highly recommend Flowbite. The link above links to the install instructions for Symfony. However, they aren't quite what we need when using Asset Mapper, but they are close.

1) Make sure you have node/npm installed on your local machine.
2) Install Flowbite with npm install --dev flowbite (or the equivalent command for whatever node package manager you prefer)
3) Update your tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
    "./node_modules/flowbite/**/*.js", // this includes flowbite files
    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig" // this includes flowbite-bundle files
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin') // add the flowbite plugin
  ],
}

4) Restart symfony console tailwind:build -w
5) Install Flowbite again for asset mapper use via symfony console importmap:require flowbite
6) Update app.js to import Flowbite js:

import './styles/app.css'

import alienGreeting from "./lib/alien-greeting.js";
import JSConfetti from 'js-confetti';
import 'flowbite'; // adds flowbite js

// other code

I tested this out with their accordion component and it seemed to be working as intended.

One issue you may notice if doing this along with the course code is that the form theme will not match the dark styling of the site. You can resolve this by adding the dark class to the body of the base template. Tailwind, Flowbite, and the Flowbite Bundle all support light and dark mode. Adding the dark class applies any dark mode specific styles to its children.

@ik3rib asked a question regarding using the flowbite-datepicker package. I tried to figure this out for a little while, but couldn't get it working.

Aside
Developing an app without Tailwind is not a pleasant thought for me, so I'm glad this course is covering how to use it. It is disappointing that it requires a build step though, since as I see it, the whole point of this stack, and asset mapper in general, are to avoid that. As soon as we have to add a build step, albeit a small one, it starts to negate the point of using the stack. However, at this point I can accept adding a small build step requirement as it is a necessary evil for an essential tool.

With that said, once you start having to install node packages separate from asset mapper (via npm, yarn, etc.), this stack starts to loose a lot more value for me. Especially when you consider that we have to use a require() statement in the tailwind config file, which is not really a valid command in our stack. But it works because like @weaverryan mentioned in an earlier comment, the tailwind binary is a wrapped node app. So it works.. buuut it adds additional mental overhead when trying to reason about the application setup. Every time you see that squiggly you have to remember why the require() is not erroring out there, but would elsewhere.

I do love the spirit of this stack though, and will continue learning more about i! Even though I have some concerns with it, that is the case with every other front end framework I've worked in 😅 Mostly the JS world is just so much messier and hard to keep up with when compared to PHP and Symfony. Thanks for the work on this course and everyone's work on everything Symfony-related!

2 | Reply |

weaverryan SFCASTS jdevine 4 months ago

Hey @jdevine!

Thanks for posing this! Because of this - and similar questions from others - I'm adding a bonus chapter at the end about Flowbite JavaScript - https://symfonycasts.com/screencast/last-stack/flowbite

But the tl;dr:

You don't need the Tailwind plugin. Well, you probably don't :p.
You can use the flowbite JavaScript (and I do in the bonus chapter), but we don't use it for Symfonycasts - and in my perfect world, we're all sharing tiny Stimulus controllers to handle things like drop-downs, instead of including big JS libraries like Flowbite.

Cheers!

1 | Reply |

jdevine weaverryan 4 months ago

Thanks Ryan! I'll check that out.

The main reason I wanted to include the flowbite js was because it is mentioned as a requirement in the flowbite-bundle used in this lesson. Personally, I use flowbite for reference to create templates at work, but don't use their js. Although the reason in that case is because it conflicts with some of our legacy front-end code. So we just build our own interactive functionality.

However, I think the two areas in frontend that are worth including third party (possibly large) js libraries are tailwind and flowbite (or a similar component library). It is a huuuuuge pain in the butt the constantly have to rewrite functionality for something like combobox, especially if you want to get all the accessibility stuff right. It would be nice if there was a bundle that provided flowbite components, but with the interactivity built with stimulus. I'm not sure what that would look like, as I am not as familiar with stimulus. But if it's possible, maybe that's something I'll work on building.

| Reply |

weaverryan SFCASTS jdevine 4 months ago

Hey @jdevine!

The main reason I wanted to include the flowbite js was because it is mentioned as a requirement in the flowbite-bundle used in this lesson

Ah, all the more reason for us to have the extra, clarifying chapter then :)

So we just build our own interactive functionality.

💯

It is a huuuuuge pain in the butt the constantly have to rewrite functionality for something like combobox, especially if you want to get all the accessibility stuff right. It would be nice if there was a bundle that provided flowbite components, but with the interactivity built with stimulus

💯 again! This year, I'd like to have a place where we can grab "UI components" (i.e. HTML markup + Stimulus controllers or even a Twig component instead of direct HTML markup) and put them into our project. I think these would be copy-pastable things, though I think we should try to package and use reusable Stimulus controllers whenever possible (e.g. you might copy some HTML markup for a popover, then run the importmap:require stimulus-popover to get that reusable Stimulus controller). Heck, maybe there is even a little script - bin/console ui:install popover - to grab the stuff for you. I've been bouncing this around in my head since Oct and the value continues to be reinforced. I'd love to know what would be most useful for you. And, I would love to collaborate ;) - having more people with more real-world needs would help a lot.

Cheers!

1 | Reply |

jdevine weaverryan 4 months ago edited

Glad to hear you thinking something like that is worth building too. In both my professional work and personal work I like the idea of being able to grab a premade component as a complete package (markup, styling, and interactivity), or some subset of those options.

It probably makes most sense to just provide a kind of "headless" component like you mentioned where it just installs the controller (logic).

In a dream scenario, a user could even install a full-blown component with a command bin/console ui:install popover like you mentioned, but with some additional optional parameters. For the sake of this example, I'm going to say the defaults for this command install the stimulus controller and an unstyled twig template with the necessary html and variables (basically functioning as props in other frontend frameworks). A parameter like --headless or --controller-only would only install the stimulus controller. Another parameter --theme THEME_NAME would install the component, twig template, and provide styling based on preset themes (Flowbite, DaisyUI, Bootstrap, etc.) In terms of templates, perhaps this could draw inspiration from the symfony/form package.

This is just a first off the cuff reaction to imagining how a user might want to work with these components. I haven't given a whole lot of consideration to the architecture, but have a vague idea of how it might work. Although, I don't have experience building reusable Symfony bundles. It seems like the "headless" part of it is definitely doable, the template part isn't as clear. And even if the template part works, it would be considering whether Symfony would want to actually maintain that piece or hand it off to individual bundle developers. I would argue that it would be worth maintaining, because in my opinion, it is the one missing piece to making Symfony a truly all-in-one solution (well.. aside from probably still needing Tailwind). At the same time, it would only be worth it if there was a good chance it would be a long-living solution and unlike so many frontend frameworks/libraries that come and go.

This granularity of this solution would be great because it could be used for new projects to get up and running quickly, or in a legacy codebase (which is my situation). Vue and React are great options for a lot of cases, but a massive headache to start to implement into an existing legacy codebase (although I have done that with Vue via the stimulus bridge at work).

Not sure what your thoughts are on any of that. I would be more than happy to collaborate on something like that or whatever you had in mind.

| Reply |

weaverryan SFCASTS jdevine 3 months ago

Hey @jdevine!

Thanks for the detailed thoughts! We've started working internally on this... I'm not sure when we'll have something to show, but it'll likely show up on the symfony/ux repository. Open questions are:

A) Exactly how Flexible we make this. Initially, it will probably be Tailwind only. But it could be feasible to have an unstyled version or a version where the CSS is also provided (but not via Tailwind).

B) We are definitely going to give these to the developers and not maintain them. Especially for HTML markup, devs will need to customize. But for Stimulus controllers, if it's large enough, those could be turned into their own packages.

Anyway, hopefully we'll open up the work soon and people can collaborate - not quite there yet!

Cheers!

| Reply |

AntoineR 3 months ago edited

With Symfony 7, I have no completion in my twig files with PHPstorm ( it works with VSC). I did add "twig": "html" to the includeLanguages list but nothing change. I have to work in VSC because it's really not convenient to work without completion.

Edit: After hours of research, it seems that it's a very old issues of JetBrain IDE. The only way is to install tailwind with npm. Now that symfony push for avoiding node, i hope they will take care of that, or every tailwind lover will switch to VSC.

1 | Reply |

Victor SFCASTS AntoineR 3 months ago

Hey AntiineR,

Glad to hear you were able to find the solution. And thanks for sharing it with others.

Yeah, I hope that issue will be pushed forward too!

Cheers!

| Reply |

AntoineR Victor 3 months ago edited

Yes. I will just install npm in local to get the completion.

| Reply |

Ek24 2 months ago

[ERROR] Tailwind CSS init failed: see output above.

i tried to isnstall tailwind and during installation i ran into a timeout. after the timeout i could not run:

php bin/console tailwind:init

without hte error above.

deleting the var/tailwind folder did the trick ...

| Reply |

MolloKhan SFCASTS Ek24 2 months ago edited

Hey @Ek24

That's unexpected. I wonder if you have a time limit to execute scripts on your local machine. Anyway, Thank you sharing your solutions

Cheers!

| Reply |

mostwanted 4 months ago edited

My form looks slightly different than in the video:

E.g. var(--tw-text-opacity) seens to be 1, so the color of label and input elements is rgb(17, 24, 39) (dark color). var(--tw-bg-opacity) also seems to be 1, which make the background-color for input elements rgb(249, 250, 251) (light color).

E.g. dark:text-white does not seem to have an effect on the label elements.

Any idea what the reason could be?

| Reply |

mostwanted mostwanted 4 months ago

Okay, as soon as I configure Firefox to use dark mode the form looks the same. But it looks broken when I use light mode in Firefox.

| Reply |

weaverryan SFCASTS mostwanted 4 months ago

You got it :). I should have mentioned this. I didn't style for light mode. So if you ARE in light mode, then everything still looks dark (from my design) except for the form elements, which are properly styled for both. So you get "light mode" forms... on my dark background.

| Reply |

Ayoub-A 4 months ago edited

good morninig all, i don't have any idea, why this error showed up

In bb90e00c589eb640d305e9be5c5614e2.php line 1295:

syntax error, unexpected variable "$__internal_6f47bbe9983af81f1e..."

| Reply |

Victor SFCASTS Ayoub-A 4 months ago

Hey Ayoub,

What PHP version are you using? For this project you need PHP 8.2+. Also, try to clear the cache, i.e. manually remove it with rm -rf var/cache/ and try again. Does it help? The file you linked sounds like a cached file, right? So cache clear should probably help.

Cheers!

1 | Reply |

Ayoub-A Victor 4 months ago edited

thank you
i fix it already with the composer.json i put this versions in my composer and i run composer update

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

thank you again

| Reply |

Victor SFCASTS Ayoub-A 4 months ago

Thanks for sharing it with others!

Cheers!

| Reply |

Tarik 5 months ago

Hello Ryan! Amazing course!
I'm all new to php frameworks and your lessons are really valuable, thanks a lot!

Talking about tailwindcss, it supports plugins, like daisyui. I can't make tailwind find daisyui source code when i require the pack using "symfony console importmap:require daisyui". It's because symfony's asset mapper installs the lib inside "assets/vendor/daisyui" and tailwindcss search for plugins in the "nome_modules/" folder, which is only created thru npm install.
What's the recomended approach reagaarding this issue?

Thank you!
Tarik Tarilonte.

| Reply |

weaverryan SFCASTS Tarik 5 months ago

Yo @Tarik!

Amazing course!

Thank you! This is a fun one!

Talking about tailwindcss, it supports plugins, like daisyui.

I haven't had a chance to try it yet, but I believe (i.e. I have been told by one person), that you can accomplish plugins with Tailwind (using the standalone binary that the bundle downloads) by exactly following the existing documentation. So, for Daisy - https://daisyui.com/docs/install/ - you should be able to do exactly what they show:

A) npm i -D daisyui@latest
B) plugins: [require("daisyui")], in tailwind.config.js

The standalone tailwind binary we download is a Node app... but it's wrapped up in a way that makes it standalone and not require node. But then if you need to add a 3rd party plugin to it, then you should still install it via node. And that's ok! Not needing to use node/npm is nice, but it's also totally great to be able to use it to grab something you need.

Btw, if you try this and it works, will you let me know? It's something we will need to add to the TailwindBundle documentation to help others.

Cheers!

1 | Reply |

Tarik weaverryan 5 months ago

Hi!
Yes, when the plugin is installed via npm, tailwind is able to find it and everything works as intended.

Cheers!

| Reply |

weaverryan SFCASTS Tarik 4 months ago edited

Sweeeeet! Thank you for confirming - I'll update the bundle docs!

https://github.com/SymfonyCasts/tailwind-bundle/pull/35

| Reply |

ik3rib weaverryan 4 months ago edited

Hi! I love this course! I'm working in a new app and follwing this course by the way.

I have a similar problem, but with frowbite-datepicker. My goal is to use https://flowbite-admin-dashboard.vercel.app/crud/products/ as layout, build something similar but when I started working with datepickers I realised they are not working.

I created a file called datepicker.js and copied the content of view-source:https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.2/datepicker.min.js on that file and imported it on app.js with // import './lib/datepicker.js' and it's working.

The problem is when I want to change the locales etc. I can't.

I tried to install following the docs, I installed via yarn flowbite-datepicker but then what?
It could be because in your screencast you didn't install flowbite but a form theme? in the prerequisites of the bundle they say you should install flowbite. The docs are not for assetmapper by the way

| Reply |

weaverryan SFCASTS ik3rib 4 months ago edited

Hey @ik3rib !

Sorry for the slow reply - almost back from my son’s holidays :).

I’m going to release - next week - a bonus chapter at the end of tutorial about the flowbite JavaScript. And we get the datepicker working as well on that chapter. I hope that will clear things up!

Cheers!

| Reply |

ik3rib weaverryan 4 months ago

Thank you. Appreciate it!

| Reply |

Symfony 6.4

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

Previous Chapter

Next Challenge

Tailwind CSS

Share this awesome video!

Tailwind Requires Building!

Installing symfonycasts/tailwind-bundle

Using Tailwind

Pasting in The Layout

Referencing Assets Dynamically

Using KnpTimeBundle

Flowbite for Tailwind Examples

Adding a Tailwind Form Theme

31 Comments

Delete comment?

What PHP libraries does this tutorial use?

	@tailwind base;
	@tailwind components;
	@tailwind utilities;
Show Lines	// ... lines 4 - 8

	/** @type {import('tailwindcss').Config} */
	module.exports = {
	content: [
	"./assets/*/.js",
	"./templates/*/.html.twig",
	],
	theme: {
	extend: {},
	},
	plugins: [],
	}

Show Lines	// ... lines 1 - 4
	{% block body %}
	<h1 class="text-3xl">Space Inviters: Plan your voyage and come in peace!</h1>
	{% endblock %}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>{% block title %}Space Inviters!{% 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>">
	{% block stylesheets %}
	{% endblock %}

	{% block javascripts %}
	{{ importmap('app') }}
	{% endblock %}
	</head>
	<body class="bg-black text-white font-mono">
	<div class="container mx-auto min-h-screen flex flex-col">
	<header class="my-8 px-4">
	<nav class="flex items-center justify-between mb-4">
	<div class="flex items-center">
	<a href="{{ path('app_homepage') }}">
	<img src="{{ asset('images/logo.png') }}" width="50" alt="Space Inviters Logo" >
	</a>
	<a href="{{ path('app_homepage') }}" class="text-xl ml-3">Space Inviters</a>
	<a href="{{ path('app_voyage_index') }}" class="ml-6 hover:text-gray-400">Voyages</a>
	<a href="{{ path('app_planet_index') }}" class="ml-4 hover:text-gray-400">Planets</a>
	</div>
	<div
	class="hidden md:flex pr-10 items-center space-x-2 border-2 border-gray-900 rounded-lg p-2 bg-gray-800 text-white cursor-pointer"
	>
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
	<span class="pl-2 pr-10 text-gray-500">Search Cmd+K</span>
	</div>
	</nav>
	</header>

	<!-- Make sure the main tag takes up the remaining height -->
	<main class="flex-grow">{% block body %}{% endblock %}</main>

	<!-- Footer -->
	<footer class="py-4 mt-6 bg-gray-800 text-center">
	<div class="text-sm">
	With <svg class="inline-block w-4 h-4 text-red-600 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 3.22l-.61-.6a5.5 5.5 0 00-7.78 7.78l7.39 7.4 7.39-7.4a5.5 5.5 0 00-7.78-7.78l-.61.61z"/></svg> from Symfonycasts.
	</div>
	</footer>
	</div>
	</body>
	</html>

	{% extends 'base.html.twig' %}

	{% block title %}Space Inviters!{% endblock %}

	{% block body %}
	<div class="flex">
	<aside class="hidden md:block md:w-64 bg-gray-900 px-2 py-6">
	<h2 class="text-xl text-white font-semibold mb-6 px-2">Planets</h2>
	<div>
	{{ include('main/_planet_list.html.twig') }}
	</div>
	</aside>

	<section class="flex-1 ml-10">
	<form
	method="GET"
	action="{{ path('app_homepage') }}"
	class="mb-6 flex justify-between"
	>
	<input
	type="search"
	name="query"
	value="{{ app.request.query.get('query') }}"
	aria-label="Search voyages"
	placeholder="Search voyages"
	class="w-1/3 px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
	>
	<div class="whitespace-nowrap m-2 mr-4">{{ voyages\|length }} results</div>
	</form>
	<div class="bg-gray-800 p-4 rounded">
	<table class="w-full text-white">
	<thead>
	<tr>
	<th class="text-left py-2">Purpose</th>
	<th class="text-left py-2 pr-4">Planet</th>
	<th class="text-left py-2">Departing</th>
	</tr>
	</thead>
	<tbody>
	{% for voyage in voyages %}
	<tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}">
	<td class="p-4">{{ voyage.purpose }}</td>
	<td class="px-2 whitespace-nowrap">
	<img
	src="{{ asset('images/'~voyage.planet.imageFilename) }}"
	alt="Image of {{ voyage.planet.name }}"
	class="inline-block w-8 h-8 rounded-full bg-gray-600 ml-2"
	>
	</td>
	<td class="px-2 whitespace-nowrap">{{ voyage.leaveAt\|date('Y-m-d') }}</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>
	<div class="flex items-center mt-6 space-x-4">
	<a href="#" class="block py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600">Previous</a>
	<a href="#" class="block py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600">Next</a>
	</div>
	</section>
	</div>
	{% endblock %}

	<ul>
	{% for planet in planets %}
	<li class="mb-4 group">
	<a href="{{ path('app_planet_show', {
	'id': planet.id,
	}) }}" class="block transform transition duration-300 ease-in-out hover:translate-x-1 hover:bg-gray-700 rounded">
	<div class="flex justify-between items-start p-2">
	<div class="pr-3">
	<span class="text-white">{{ planet.name }}</span>
	<span class="block text-gray-400 text-sm">{{ planet.lightYearsFromEarth\|round\|number_format }} light years</span>
	</div>
	<img
	class="flex-shrink-0 w-8 h-8 bg-gray-600 rounded-full group-hover:bg-gray-500 transition duration-300 ease-in-out"
	src="#"
	alt="Image of {{ planet.name }}"
	>
	</div>
	</a>
	</li>
	{% endfor %}
	</ul>

	twig:
Show Lines	// ... line 2
	form_themes: ['@Flowbite/form/default.html.twig']
Show Lines	// ... lines 4 - 8