WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.056 --> 00:00:02.096 align:middle What about CSS? 00:00:02.456 --> 00:00:06.116 align:middle You're free to add whatever CSS you want to app/styles/app.css. 00:00:06.756 --> 00:00:08.886 align:middle That file is already loaded on the page. 00:00:09.346 --> 00:00:11.346 align:middle Want to use Bootstrap CSS? 00:00:11.346 --> 00:00:13.646 align:middle Check out the Asset Mapper docs on how to do that. 00:00:14.056 --> 00:00:19.816 align:middle Or, if you want to use Sass, there's a symfonycasts/sass-bundle to make that easy. 00:00:20.356 --> 00:00:22.966 align:middle Though, I recommend not jumping into Sass too quickly. 00:00:23.326 --> 00:00:27.406 align:middle A lot of the features that Sass is famous for can now be done in native CSS, 00:00:27.406 --> 00:00:30.226 align:middle like CSS variables and even CSS nesting. 00:00:30.916 --> 00:00:33.306 align:middle What's my personal choice for a CSS framework? 00:00:33.646 --> 00:00:38.196 align:middle Tailwind. And part of the reason is that Tailwind is insanely popular. 00:00:38.196 --> 00:00:41.936 align:middle So if you're looking for resources or pre-built components, 00:00:42.056 --> 00:00:44.336 align:middle you're going to have a lot of luck if you use Tailwind. 00:00:44.926 --> 00:00:47.546 align:middle But Tailwind is a bit odd in one way: 00:00:47.836 --> 00:00:51.526 align:middle it's not simply a big CSS file that you plop onto your page. 00:00:52.006 --> 00:00:57.566 align:middle Instead, it has a build process that scans your code for all the Tailwind classes you're using. 00:00:58.066 --> 00:01:02.006 align:middle It then dumps a final CSS file that only contains the code you need. 00:01:02.656 --> 00:01:05.006 align:middle In the Symfony world, if you want to use Tailwind, 00:01:05.136 --> 00:01:07.266 align:middle there's a bundle that makes it really easy. 00:01:07.776 --> 00:01:12.616 align:middle Spin over your terminal and install a new package: composer require symfonycasts - 00:01:12.616 --> 00:01:19.376 align:middle hey I know them - tailwind-bundle: For this package, 00:01:19.376 --> 00:01:22.236 align:middle the recipe doesn't do anything other than enable the new bundle. 00:01:22.676 --> 00:01:25.946 align:middle To get Tailwind rocking, one time in your project, run: 00:01:26.036 --> 00:01:29.996 align:middle php bin/console tailwind:init This does three things. 00:01:29.996 --> 00:01:33.136 align:middle First, it downloads a Tailwind binary in the background, 00:01:33.366 --> 00:01:35.216 align:middle which you'll never really need to think about. 00:01:35.556 --> 00:01:39.846 align:middle Second, it creates a tailwind.config.js file at the root of our project. 00:01:40.256 --> 00:01:45.736 align:middle This tells Tailwind where it needs to look in our project for Tailwind CSS classes. 00:01:46.456 --> 00:01:51.206 align:middle And third, it updated our app.css to add these three lines. 00:01:51.516 --> 00:01:55.686 align:middle These will be replaced by the real Tailwind code in the background by the binary. 00:01:55.686 --> 00:02:00.446 align:middle Finally, Tailwind needs to be built, so we need to run a command to do that: 00:02:00.446 --> 00:02:04.956 align:middle php bin/console tailwind:build -w This scans our templates 00:02:04.956 --> 00:02:07.656 align:middle and output the final CSS file in the background. 00:02:08.126 --> 00:02:13.166 align:middle The -w puts it in "watch" mode: instead of building once and exiting, 00:02:13.416 --> 00:02:15.436 align:middle it watches our templates for changes. 00:02:15.826 --> 00:02:20.246 align:middle When it notices any updates, it will automatically rebuild the CSS file. 00:02:20.516 --> 00:02:21.546 align:middle We'll see that in minute. 00:02:22.146 --> 00:02:23.906 align:middle But we should already see a difference. 00:02:24.486 --> 00:02:25.856 align:middle Let's go to the homepage. 00:02:27.156 --> 00:02:27.846 align:middle Did you see that? 00:02:28.146 --> 00:02:30.436 align:middle The base Tailwind code did a reset. 00:02:30.436 --> 00:02:33.566 align:middle For example, our h1 is now tiny! 00:02:34.176 --> 00:02:35.336 align:middle Let's try this out for real. 00:02:35.756 --> 00:02:38.406 align:middle Open templates/main/homepage.html.twig. 00:02:38.916 --> 00:02:43.796 align:middle Up on the h1, make this bigger by adding a class: text-2xl. 00:02:44.486 --> 00:02:50.256 align:middle As soon as we save that, you can see that tailwind noticed our change and rebuilt the CSS. 00:02:50.256 --> 00:02:53.236 align:middle And when we refresh, it got bigger! 00:02:53.786 --> 00:02:59.766 align:middle Our source app.css file is still super simple - just those few lines we saw earlier. 00:03:00.226 --> 00:03:05.086 align:middle But view the page source and open the app.css that's being sent to our users. 00:03:05.586 --> 00:03:07.526 align:middle It's the built version from Tailwind! 00:03:08.066 --> 00:03:10.446 align:middle Behind the scenes, some magic exists 00:03:10.506 --> 00:03:15.006 align:middle that replaces those three Tailwind lines with the real Tailwind CSS code. 00:03:15.516 --> 00:03:16.676 align:middle And... that's kind of it! 00:03:16.826 --> 00:03:18.176 align:middle It just works. 00:03:18.496 --> 00:03:21.656 align:middle Though there is an easier and more automatic way to run Tailwind. 00:03:22.246 --> 00:03:24.676 align:middle Hit Ctrl+C on the Tailwind command to stop it. 00:03:24.986 --> 00:03:29.676 align:middle Then, at the root of our project, create a file called .symfony.local.yaml. 00:03:30.456 --> 00:03:34.366 align:middle This is a config file for the symfony binary web server that we're using. 00:03:34.856 --> 00:03:42.356 align:middle Inside, add workers, tailwind, then cmd set to an array with each part of a command: symfony, 00:03:42.816 --> 00:03:48.786 align:middle console, tailwind, build, -- watch, or you could use -w: it's the same. 00:03:49.396 --> 00:03:53.036 align:middle I haven't talked about it yet, but instead of running php bin/console, 00:03:53.556 --> 00:03:57.996 align:middle we can also run symfony console followed by any command to get the same result. 00:03:58.516 --> 00:04:01.596 align:middle We'll talk about why you might want to do that in a future tutorial. 00:04:01.596 --> 00:04:06.056 align:middle But for now, consider bin/console and symfony console the same thing. 00:04:06.876 --> 00:04:10.766 align:middle Also, by adding this workers key, it means that instead of us needing 00:04:10.766 --> 00:04:13.916 align:middle to run the command manually, when we start the symfony web server, 00:04:14.176 --> 00:04:16.276 align:middle it will run it for us in the background. 00:04:16.876 --> 00:04:20.366 align:middle Watch. In your first tab, hit Ctrl+C to stop the web server... 00:04:20.546 --> 00:04:23.956 align:middle then re-run symfony serve so it sees the new config file. 00:04:24.556 --> 00:04:26.416 align:middle Watch: there it is! 00:04:26.696 --> 00:04:29.266 align:middle It's running the tailwind command in the background! 00:04:29.696 --> 00:04:31.596 align:middle We can take advantage of this immediately. 00:04:32.066 --> 00:04:38.366 align:middle In homepage.html.twig, change this to text-4xl, spin over and... 00:04:38.686 --> 00:04:43.256 align:middle it works! We don't even need to think about the tailwind:build command anymore. 00:04:43.686 --> 00:04:46.786 align:middle And since we'll be styling with Tailwind, remove the blue background. 00:04:48.716 --> 00:04:53.016 align:middle Ok, this tutorial is not about Tailwind or how to design a website. 00:04:53.296 --> 00:04:57.226 align:middle Trust me, you do not want Ryan leading the web design charge. 00:04:57.526 --> 00:05:00.016 align:middle But I do want to have a nice-looking site... 00:05:00.246 --> 00:05:03.696 align:middle and it's also important to go through the process of working with a designer. 00:05:03.696 --> 00:05:08.316 align:middle So let's pretend that someone else has created a design for our site. 00:05:08.796 --> 00:05:12.996 align:middle And they've even given us some HTML with Tailwind classes for that design. 00:05:13.546 --> 00:05:14.906 align:middle If you download the course code, 00:05:15.106 --> 00:05:18.726 align:middle in a tutorial/templates/ directory, we have 3 templates. 00:05:19.186 --> 00:05:23.096 align:middle One-by-one, I'm going to copy each file and paste it over the original. 00:05:23.596 --> 00:05:26.526 align:middle Don't worry, we'll look at what's happening in each of these files. 00:05:27.296 --> 00:05:29.176 align:middle Do homepage.html.twig... 00:05:31.246 --> 00:05:33.386 align:middle and finally show.html.twig. 00:05:33.386 --> 00:05:38.186 align:middle I'm going to delete the tutorial/ directory entirely 00:05:38.186 --> 00:05:41.356 align:middle so I don't get confused and edit the wrong templates. 00:05:41.876 --> 00:05:43.436 align:middle Ok, let's see what this did! 00:05:43.596 --> 00:05:45.666 align:middle Refresh. It looks beautiful! 00:05:45.996 --> 00:05:48.326 align:middle I love working inside a nice design. 00:05:48.886 --> 00:05:50.436 align:middle But... some parts are broken. 00:05:50.956 --> 00:05:55.676 align:middle In homepage.html.twig, this is our ship repair queue... 00:05:56.016 --> 00:05:57.476 align:middle which looks nice... 00:05:57.616 --> 00:05:59.276 align:middle but there's no Twig code! 00:05:59.756 --> 00:06:04.646 align:middle The status is hardcoded, name is hardcoded and there's no loop. 00:06:05.526 --> 00:06:08.456 align:middle Next: let's take our new design and make it dynamic. 00:06:08.756 --> 00:06:11.816 align:middle We'll also learn how to organize things into template partials 00:06:12.076 --> 00:06:14.826 align:middle and introduce a PHP enum, which are fun.