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 > 30 Days with LAST Stack

Buy Access to Course

06.

Tailwind CSS

|

|

Autoplay

Previous Chapter

Next Challenge

Login or register to check out the script

59 Comments

Sort By

Login or Register to join the conversation

ThierryGTH 2 years 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"

3 |

AntoineR ThierryGTH 2 years ago

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

|

Victor SFCASTS AntoineR 2 years 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!

|

Victor SFCASTS ThierryGTH 2 years ago

Hey ThierryGTH,

Thank you for sharing this information with others!

Cheers!

|

Joris-Mak 2 years 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 |

weaverryan SFCASTS Joris-Mak 2 years 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!

|

jdevine 2 years 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 |

weaverryan SFCASTS jdevine 2 years 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 |

jdevine weaverryan 2 years 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.

|

weaverryan SFCASTS jdevine 2 years 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 |

jdevine weaverryan 2 years 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.

|

weaverryan SFCASTS jdevine 2 years 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!

|

S-H 1 year ago edited

There have been some changes in tailwind since this tutorial came out. In addition to add the class 'dark' to body (thanks to jdevine for his comment), you also must add the line

darkMode: 'selector',

to the tailwind.config.js. It should look like

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  content: [

Thanks for the great tutorial and helpfull comments!

1 |

Omer-E S-H 6 months ago

This is not working for me, what is changed since then?

|

Victor SFCASTS Omer-E 6 months ago

Hey Omer,

Since Tailwind CSS v4 that tailwind.config.js is redundant now and you should declare your variants in the CSS:

@import "tailwindcss";
@plugin "@flowbite/plugin";

/* REQUIRED for Flowbite dark mode */
@custom-variant dark (&:where(.dark, .dark *));

And then make sure you have <body class="dark"> to apply the dark theme.

I hope that helps!

Cheers!

|

Ek24 2 years 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 ...

1 |

MolloKhan SFCASTS Ek24 2 years 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!

|

AntoineR 2 years 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 |

Victor SFCASTS AntoineR 2 years 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!

|

AntoineR Victor 2 years ago edited

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

|

Omer-E 6 months ago edited

I'm unable to set dark mode with flowbite forms with tailwind-version-4. I tried to set in the main body tag class = "dark" and in the tailwind.config.js darkMode: 'selector',, but those didn't do the trick.

|

Victor SFCASTS Omer-E 6 months ago edited

Hey Omer,

Yeah, in Tailwind v4, dark mode is no longer configured in tailwind.config.js. Having that file with Tailwing v4 is not the best practice anymore. Now you can do it in the CSS file where you import Tailwind CSS and Flowbite:

@import "tailwindcss";
@plugin "@flowbite/plugin";

/* REQUIRED for Flowbite dark mode */
@custom-variant dark (&:where(.dark, .dark *));

And after this make sure your CSS is recompiled and try to add dark CSS class to the body tag:

<body class="dark">

In short, you should declare your custom variants directly in the CSS using special tag instead of doing it in tailwind.config.js as it was in Tailwind v3.

I hope that helps!

Cheers!

|

Omer-E Victor 6 months ago edited

Hey Victor,

Indeed I tried this with version 7.4 Symfony and the tailwind.config.js is not used. Is there a way to get @plugin "@flowbite/plugin"; with assetmapper or are node_modules inevitable. What I did now is get default.css file from the flowbite repository and include this in my app.css and that worked but I dont understand why the tales-form-a-dev is not including this css file.

note: Im considering learning webpack-encore

|

Victor SFCASTS Omer-E 6 months ago

Hey Omer,

First of all, we have a bonus chapter about Flowbite at the end of this course: https://symfonycasts.com/screencast/last-stack/flowbite - I would recommend you to check it in case you're interested in Flowbite integration. I hope that will help you with some possible questions. I personally don't use Flowbite much, so it's hard to me to give you decent advice on it.

I think the short answer is yes, Node modules are inevitable if you want Tailwind plugins like Flowbite to work as plugins, because those plugins are not just CSS. What you did (copying default.css) works only because you bypassed the plugin system entirely.

Webpack Encore should be a good option for solving this. And we have a separate coruse about it here: https://symfonycasts.com/screencast/webpack-encore . Or you can take a look at the modern Vite.js tool instead, which has become popular lately, though we still don't have a course about it yet.

Cheers!

1 |

Yoyo 10 months ago

Hello when i loop over "planets" i realize the array is empty, was there a step before to populate the db ?

|

Victor SFCASTS Yoyo 10 months ago

Hey Yoyo,

Did you load the fixtures? :) When you download and unzip the course code - you will find the README.md file inside with all the instructions you have to do. On of them will be load the fixtures with: symfony console doctrine:fixtures:load command. Just run this command and try again ;)

Cheers!

|

Valentin-D 11 months ago edited

Hi. I looked all over and couldn't find a fix this

composer require symfonycasts/tailwind-bundle
./composer.json has been updated
Running composer update symfonycasts/tailwind-bundle
Loading composer repositories with package information
Updating dependencies
Nothing to modify in lock file
Writing lock file
Installing dependencies from lock file (including require-dev)

In VersionParser.php line 191:

Invalid version string "9999999.9999999" `

I also tried
composer require symfonycasts/tailwind-bundle:dev-main
but the same result!

|

MolloKhan SFCASTS Valentin-D 11 months ago

Hey Valentin,

That's kinda weird. Try clearing composer's cache composer clear-cache and even upgrading composer composer self-upgrade
if that doesn't work, try reinstalling your vendors

Cheers!

|

Olexandr 1 year ago

Hi!

Thank you for the course)
Have a question about Tailwind 4 setup in the context of symfonycasts bundle.
According to Tailwind docs, the config file tailwind.config.js is not required for the version 4 and above. And bin/console tailwind:init command has the next output:

! [NOTE] Tailwind v4 detected: skipping config file creation.

So, how to deal with flowbite config in this situation? Where the flowbite templates path should be added if tailwind.config.js doesn`t exists?

"./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"

Thanks.

|

kbond SFCASTS Olexandr 1 year ago edited

Hey @Olexandr,

In Tailwind 4, you use the @plugin directive directly in your CSS file. See the Flowbite getting started guide to see how this works.

Alternatively, you can still use the v3 tailwind.config.js but now you define it in your CSS file also, with the @config directive.

Hope that helps!
Kevin

1 |

Olexandr kbond 11 months ago

The simplest solution is to set a previous version of Tailwind in symfonycasts_tailwind.yaml:

symfonycasts_tailwind:
    # Specify the EXACT version of Tailwind CSS you want to use
    binary_version: 'v3.4.17'

Thank you, @kbond.

|

giorgiocba 1 year ago

When I use Flowbite and want to edit a planet, the error appears: Unknown "tailwind_merge" filter

|

kbond SFCASTS giorgiocba 1 year ago edited

Hey @giorgiocba!

Is it a PHP/Twig error?

I believe installing this package will solve. It adds the tailwind_merge filter.

Let me know if that doesn't help.

--Kevin

1 |

giorgiocba kbond 1 year ago

Problem solved. Thank you very much!

|

Jason-Aller 1 year ago

When I went to use the SymfonyCasts/tailwind-bundle in an API Platform project using docker containers it took me a while to discover that I had to go into the docker container and run the bin/console tailwind:build command inside the docker container because running it at the WSL(host operating system) level wasn't updating the vendor folder inside the container because the compose.override.yaml has a volume entry for - /app/var that causes the var directory to not map.

Perhaps the documentation at https://symfony.com/bundles/TailwindBundle/current/index.html#watch-mode-in-docker-with-windows-host could be augmented to help diagnose that issue as it only covers situations where the Windows /var directory is mapped into the docker container. It could also be a place to add instructions for modifying a docker compose.yaml file to include the proper watch mode usage of the bin/console tailwind:build command for dev and the compile version for production.

The error message one gets if they are in this situation is "Built Tailwind CSS file does not exist". Which is true in the docker container, even if the file exists outside of the docker container.

|

MolloKhan SFCASTS Jason-Aller 1 year ago edited

Hey @Jason-Aller

Thank you for the detailed explanation, and I agree that this could be mentioned in the Symfony docs. Have you considered proposing a PR?
https://github.com/SymfonyCasts/tailwind-bundle/edit/main/doc/index.rst

Cheers!

|

astrodev 1 year ago

I tried to use complete updated software (including Symfony 7) for these casts, but then as it comes to this module where we have the first access to DB, DB access fails complete. It is that the whole zenstruck part is depecreated and not working anymore with zenstruck/foundry >= ^2. I do not see any database item at all.

|

kbond SFCASTS astrodev 1 year ago edited

Hey @astrodev,

Yeah, foundry 2 added a bunch of breaking changes - there is a migration path for 1.x-2.x you can take a look at. In the meantime, no problem staying on foundry 1.x for this tutorial.

1 |

mostwanted 2 years 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?

|

mostwanted mostwanted 2 years 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.

|

weaverryan SFCASTS mostwanted 2 years 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.

|

Ayoub-A 2 years 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..."

|

Victor SFCASTS Ayoub-A 2 years 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 |

Ayoub-A Victor 2 years 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

|

Victor SFCASTS Ayoub-A 2 years ago

Thanks for sharing it with others!

Cheers!

|

Tarik 2 years 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.

|

weaverryan SFCASTS Tarik 2 years 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 |

JeffJones weaverryan 11 months ago edited

Hi Ryan! Hope all is well! Been praying for you.

I have installed the daisyui plugin as suggested above. And it works great! Thanks so much for helping with this!

I do have another question, though. Is there a way to pass in a config? I tried and had to format it different, but I don't thinks it's taking effect - or rather, I don't think the config is being passed to the plugin. I've just started with this so, of course, it's likely that I simply don't know how to check if the config is working or not ;-) I tried to exclude the "button" and the btn classes still worked.

This is the format that passed the tailwind build process (the excludes were only for testing):

`

plugins: [
    require('daisyui', {
        themes: ['light --default', 'dark --prefersdark'],
        root: ':root',
        exclude: ['button', 'input', 'select']
    })
],

`

If you have some time, any help with this would be greatly appreciated.

Again, thanks for all the videos and helpful comments!

|

JeffJones JeffJones 11 months ago

I haven't tested it yet, but I believe I've found the solution.
https://v4.daisyui.com/docs/config/

Here's their sample configuration:
`

module.exports = {
  plugins: [require("daisyui")],
  daisyui: {
    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
  },
}

`
The reason is that the tailwind-bundle defaults to Tailwind version 3, but the docs for DaisyUO assumed Tailwind version 4. However, v4 of DaisyUI assumes Tailwind version 3.

1 |

MolloKhan SFCASTS JeffJones 11 months ago edited

Hey @JeffJones

You have a small detail in your config, move your config options outside the plugins key. Like this:

plugins: [
    require('daisyui')
],
daisyui: {
        themes: ['light --default', 'dark --prefersdark'],
        root: ':root',
        exclude: ['button', 'input', 'select']
}

Cheers!

1 |

Load more comments

Symfony 6.4 Tailwind CSS 3 Flowbite 2 Stimulus 3 Turbo 7

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
    }
}

What JavaScript libraries does this tutorial use?

// importmap.php

return [
  'app' => [
    'path' => './assets/app.js',
    'entrypoint' => true,
  ],
  'js-confetti' => [
    'version' => '0.11.0',
  ],
  '@hotwired/stimulus' => [
    'version' => '3.2.2',
  ],
  '@symfony/stimulus-bundle' => [
    'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
  ],
  'tom-select' => [
    'version' => '2.3.1',
  ],
  'tom-select/dist/css/tom-select.default.css' => [
    'version' => '2.3.1',
    'type' => 'css',
  ],
  '@hotwired/turbo' => [
    'version' => '7.3.0',
  ],
  'stimulus-popover' => [
    'version' => '6.2.0',
  ],
  'debounce' => [
    'version' => '1.2.1',
  ],
  'turbo-view-transitions' => [
    'version' => '0.3.0',
  ],
  'stimulus-use' => [
    'version' => '0.52.1',
  ],
  'flowbite' => [
    'version' => '2.2.1',
  ],
  '@popperjs/core' => [
    'version' => '2.11.8',
  ],
  'flowbite-datepicker' => [
    'version' => '1.2.6',
  ],
];

Previous Chapter

Next Challenge