 Hi everyone! Very sorry I couldn't be there in person. Thank you so much to Alfredo and Jonathan for arranging things so that I could speak to you this way. As you can see from the title card that I think is somewhere around my chin or to the right or left, who knows. My talk today is trying to cover Tailwind for WordPress developers, why WordPress developers might want to use it. And before getting into that I want to give you a bit of context. Thinking about the number of lines of CSS I've been writing per year since I started making websites. I know we all lie in bed at night and think about these things and for me the graph starts back in 1998 when I first was being paid to make websites for people and there was no CSS. So it's a glorious flat line and then as you can see things start to curve up a bit. Once you hit around the 2000 mark things started to get to the point where it was safe to use them and it just escalated. By the mid-2000s, writing a lot of lines of CSS, not doing much to organize them, just throwing them into a single file a lot of the time, it was a different time than now. Things did change. We had a distinct drop in the number of lines but we add a new dashed line representing the number of lines actually being sent to visitors of websites I created. The solid line is the number of lines I typed by hand and as some of you may have guessed, SAS. I love SAS, used it for more than a decade on every project I did and it really helped organize my CSS and made me happier writing CSS. And SAS functions certainly changed things, made it easier to do all kinds of things that were hard to do when it was all done by hand. And that began. SAS was probably the reason I started adding build processes to all of my projects and I never really looked back from that. That really helped me do a lot more interesting work, I thought, and take on bigger projects and so all that I think started with SAS. Then, the big change, 2018, huge drop in the amount of lines of CSS I'm writing by hand, minor drop in the amount being sent to site visitors. How do we account for that? Tailwind. So, what is it about Tailwind that gives us that huge drop in the amount that I'm writing by hand and a significant drop for visitors changing how much CSS is being sent over the wire reducing the bandwidth being consumed by sites? Let's double back to that after we discuss what Tailwind CSS is, because that will give you a bit more of a sense in terms of how that chart is possible. I like to go straight to the source. If you go to the Tailwind CSS website, they describe themselves with this sentence, rapidly build modern websites without ever leaving your HTML. What does that look like in practice? This is also taken from their website, so no credit to me for this one. So, as you can see, there are already a number of Tailwind classes on your screen. So in the code on the right, you can see they're just the classes attached that describe how the figure to the left is laid out. You can see, for example, it has a light gray background. It has rounded corners. That's the background gray dash 100, the rounded dash XL, the image below, it's width and height are defined using Tailwind classes. And then when you get into the text, they've done some minor things. They've made the quote itself large and they have added a bit of padding and spacing in between the two sections. But let's see what happens when we really get going here. So as more classes are added, you can see things getting fleshed out. So the image is now a circle. We're making the quote semi-bold. We're going to add a bit of weight to the type below. We'll make the name blue, and we will gray, just lighten down the credit. Now, from there, we're going to start making things responsive, and we're still doing everything just by adding new classes. So they're doing everything at the medium size. Tailwind defines some sizes for you. So the medium size is roughly a tablet and portrait. And so we've added a number of classes. Just doing that, you've created these two distinct responsive versions of this quote card without leaving this HTML at any point. And you've done it in minutes without jumping around into different files, without doing things that might affect other things in your project. That's the concise summary of what Tailwind CSS can do for you. So let's talk a bit about the properties of Tailwind CSS that let it do this for us. So first off, and the thing that if you're familiar with utility classes you've noticed already, it is utility class based. And what is a utility class? So if we look at some HTML that was written without Tailwind CSS in mind, you'll see classes like these, classes that describe the thing that is being created. So the HTML is creating the notification block above. It has various wrappers that are needed to attach styles to the items below. And then as you go through, you can see that in each context you're adding a new name. So you have to think about these names. You have to think about what the wrappers represent and are doing. And then you would then write the CSS for this. Obviously, if you're using something like SAS, it would be organized in a different way. But fundamentally, you are naming the blocks that you're creating and then you're adding the CSS to attach to those. The exact same element above, this is what it would look like created with utility classes. So instead of creating custom CSS for each of these design elements, you're instead just adding them directly in the HTML one after another in any particular order. And so you aren't writing any CSS for this. When you add something like p-6 or mx-auto, it will write the corresponding CSS for you and attach it to your project. So in your style.css file in a WordPress theme, the presence of those classes in your project causes the CSS to be added to that file. You don't have to write it yourself whatsoever. And that has a bunch of benefits that we'll get into. But the way to think about it is that each place that you use one of these utility classes, it only needs to be defined in the CSS one time. So it may seem as though you will end up with more CSS in the end, but that just isn't the case. That's sort of the power of utility classes. You write them directly in the HTML and creating one corresponding CSS block, and then that can be used throughout your project. So there's a big savings there, both in terms of time to write the code and then in terms of how much is sent to your visitors. A big benefit with Tailwind CSS. So some people may recognize the concept of utility classes from lots of other CSS frameworks. If you think about Bootstrap, it is using utility classes. Some of them are exactly the same or very familiar. But a big difference with Tailwind is that it is totally design agnostic. So when you start out and we're going to see this once I get to a demo, it is very raw. It's not dictating anything in terms of what your site should look like. It really expects that you are bringing your own design system and your own design, and it makes it possible to build absolutely anything. You don't end up in a position where you start out with your site already looking like something. You really start from the ground level and can build up your site from there, which is very valuable if you're building client websites based on a design that is provided to you. And finally, it is optimized for production in a very deep and thorough manner. So everything about it is really building towards this idea of sending as little CSS as possible to your visitors in as prompt a manner as possible. So it takes less time for you to create the CSS and then once it's ready to be bundled up and deployed, it is creating the smallest file possible. And that ends up the utility classes themselves end up creating a situation where you just end up with less CSS. It ends up being easier to keep your CSS organized in a way that prevents duplication and prevents you from sending CSS to visitors they don't necessarily need. So in my experience, the amount of CSS that I was sending to site visitors just dropped, it dropped a fairly significant amount from this more than other optimizations I could have managed. Switching to something like Tailwind though, it's not really about the technical side of it. It's about how Tailwind can make your life better. And so let's look and with those ideas in mind, what is it about the properties of Tailwind that let you do things like work faster? So I have found that I am able to complete projects much faster than before when using Tailwind as my CSS framework and that comes from the elimination of almost all context switching. So you don't have to be jumping back from one file to another. You can stay in one place, just keep blaring on utility classes until things look the way you want them to look. And you don't have to worry about things like specificity, nesting issues, things that come up in SAS that start to get quite complex once you're building components that are used in multiple ways. And sometimes that comes down to realizing late in the project, hey, this component needs to be in multiple places. And suddenly you're fighting with restructuring it throughout everywhere it's referenced in CSS. That's something that just goes away. It goes away when you're using utility classes in this manner. And you don't have to think about naming things anymore. So you have all these components. Who cares what the wrapper should be called. You don't have to decide. It's just you drop in the utility classes that say how it looks. You will be done in less time and you will not have to worry about wrangling these nested blocks of CSS and trying to make sure that the specificity you've created doesn't end up overriding a global property that you want. There are all sorts of things that you just are no longer things you have to think about. You can build absolutely anything. It makes it so simple to create a design system that you can use throughout your project and to maintain it in a way that just will keep working for you from start to finish without having to refactor a lot of things. And without having to it's the bootstrap example again where you don't have to fight against presets that end up making it. You know that you're already baked into a grid or form styles or anything like that it's all it all comes to you. Unstyled in a way that's very straightforward to build up to the design that you're creating for your client. And just as an example I recently had a project come to me where it wanted to reference chemistry and so the entire site was hexagons hexagons everywhere and that ended up being no problem at all. I just I feel like it there's this idea that tailwind has a look but it's really not about starting out a given way. I think there are component systems that can send you looking like other tailwind sites but you start it you start at zero and you can go in any direction you want. There's no look for a tailwind site out of the box and you can create absolutely anything with with less effort than I've found with any other CSS framework. And finally if like if you're like me and you have a lot of projects on the go or you have clients coming back to you for changes it makes it so much easier to go from one to another. You don't have to dive back into a project you haven't touched in a week or a month and start going through the the SAS files and thinking how did I structure things this time. Or digging through just a single SAS file and saying all right where does can I change this and not override how things look in any other places. And it gets as a project gets bigger and bigger that can get harder and harder this just eliminates that issue all together. And then as you have more projects that you're leaving for months because they've been deployed they're live your clients are happy. But then they come back and they just want to change one minor thing those minor changes are so much easier it's hard to even quantify how much time I've saved. Just by being able to jump into something add a utility class recompile the CSS deploy it and move on to something else it's it's so much easier and faster than anything I've done before in terms of those sorts of changes. If you're adding a new component especially that's something that can you would I would worry in the past but about things I add clashing with things that are there already that worry is just gone. So how do we bring tail into WordPress because there isn't a built in system for this it's not something tail and itself doesn't have a place you go that explains how to bring it to WordPress. And WordPress itself is evolving so much right now that that really it takes some thought to think what is the best approach. So I think that hybrid themes are really the way to go. If you haven't if you haven't been immersed in the world of the different the names of the different types of themes we can build now hybrid themes are PHP based. So the three things are going to talk about right now are classic themes hybrid themes and block themes. So like classic themes hybrid themes are PHP based and if you've been building themes for years they will be very familiar to you but they fully embrace the block editor for content. That's the big difference between classic themes where it's it's sort of they might but they don't necessarily hybrid themes will have a theme.json file that will define things for the block editor. They will make full use of the block editor throughout that's that's the best definition of that. And I think this is the best way forward for the foreseeable future in terms of integrating tailwind into WordPress. Could you use it with a classic theme you could. Why would you I feel like I the block editor is truly great and it is where WordPress is going and I feel like to not get on board with it now. I understand if you have old projects you may still be embracing the classic editor I have old projects for clients that that still use it but if you're building something new. I would suggest using a hybrid theme but there is no reason you couldn't do it with a classic theme. And what about block themes I think if you really put your mind to it it could be done but I just wouldn't suggest that block themes right now especially are very much evolving. And they have very strong opinions about how CSS should be integrated into them and are generating blocks of CSS throughout. There are all sorts of things going on there that you would be fighting against. I think again as block themes evolve I think we may get to a point where it makes sense to integrate tailwind. I wouldn't suggest it now but if you do it I would love to hear about it. So what does it actually look like to build a theme with tailwind. Let's build one and see it in practice. I last year wrote an article for CSS tricks before the big digital ocean thing happened called adding tailwind CSS to new and existing WordPress themes. If you wanted to go the route of really starting from scratch adding it to either a new theme or one that you're already working on I recommend my own article. I'm not sure if anyone else has written anything along these lines but I know that I covered it. So that's if you wanted to do that you could read this article and it talks about it a bit. But if you are not interested in starting from scratch in the sense of figuring out how to integrate tailwind to run into a bunch of gotchas and potential issues I have also created a theme generator so inspired by underscores or underscore s which many of you may remember. It is called underscore TW the TW is for tailwind. It lets you generate a theme built for tailwind right out of the box. And so if you click that button the generate button you would end up on this page or download would begin and you would have a theme. And so that is what I've done once you have that theme so you're going to unzip it you're going to move it into your WP content slash themes folder. And then once you've loaded in your code editor of choice assuming it has a little terminal. These are the commands that you need to run and this is this is it this is all you need to do to get things moving with tailwind. So let's see what that looks like. So I have loaded I already copied everything over that happened in the background. I'm running MPM install and now run MPM run watch. Once you've run this command from then on it is going to be watching your entire project checking for any utility classes you've added and as you add them it will add them to your style that CSS file simple as that. So let's we talked I talked a bit about design systems so I'm this is going to be extremely basic but just give you a sense of how this looks. If we wanted to add our project colors and project fonts where we do that. So tailwind comes with a configuration file. So this is tailwind.config.js. I'm going to scroll down to the theme area. I'm going to add a new block for colors. I have to spell the American way even though my slide went to Canadian which was you know gotta gotta keep it accurate in Vancouver. So I'm adding magenta first. I am then going to add pink. I'm using the same colors as my title card and so let me just figure this one out. So I'm adding pink and that is it. So now now a range of utility classes are automatically created for those two colors so I can use it for backgrounds for borders for any for text anything I want. I now have magenta and pink all the corresponding utility classes are automatically created. So let's take a look just to give you a sense of what it looks like in practice. Let's do a really quick job of laying out a page header. This is what things look like with no work done at all on the theme we just installed. So it does center. You can see it centers the text by the way this text is just a blog post I wrote a long time ago. It will yeah so I just paste that in. It will center that text but everything else is pretty pretty unadorned. It's very basic and to call this middle text adorned would be a stretch but it's centered and it's not the full width of the browser. So I guess that's something. So let's see what we would do. First yeah so let's let's start up here in the header. I'm going to switch back over to my code editor. You can see I'm in the header dot content file. So all we have to do let's start out in classes. Let's make the background magenta and let's put some white text on top of it. So make all the header text was make it white. It saves which back over refresh already off to a pretty good start. Now let's see if we can move that menu over to the right. We'll just switch on display flex and we'll justify between then we'll get far left far right for those elements. Things are looking a bit tight to the edges. So let's add a bit of padding you know we're already in much better shape. But what can we do about this menu area so the easy part is that we will take this button so this button would be used to show the menu on mobile devices. We're not going to worry too much about getting into the responsive side today. So I'm just going to hide it so display hidden simple as that pop back over it is gone. And now what shall we do about this menu. So here's where things get a little bit different. If we look in our PHP file so we have a standard WP nav menu block. We could there are all sorts of things we could there are a number of ways we could address this. We could create go all out and create a nav walker that would apply the CSS classes to the different elements. There are ways we could stretch it. We could we could sneak some classes into this block here straight in in the in the function itself. But instead of doing that I am going to show you an example of using a tailwind. The common question when you're first looking into tailwind is how do you if I can't control the classes being created by my CMS or whatever system I'm on or or a JavaScript widget anything like that if I can't control the class names. Can I still apply tailwind classes to them. And the answer is yes. So let's take a look at this we're still we want to change this menu we just want to make it left and right to side by side as well. We already know the ID is primary menu. So I am just going to jump over to a file called components dot CSS. So it's meant to be custom styles that that you add to your your tailwind theme. So we already know that primary menu is the ID. So all we're going to do is it's it's that's going to be the the unordered list element. So we're just going to make it flex put a gap in between the two items and that should be enough. There you go. So now they've popped back up we could we could do a lot more elaborate things we could highlight the active element we could go much further than that but that gives you a sense of we can apply styles in that way. But let's let's let's make things a bit more obvious in terms of hierarchy between our friends our logo our friendly logo on the left and our menu on the right. So there we've up the text size and then but they're not lined up anymore. So I'm just going to change it so they show the same baseline. So well let's bold it to and then yeah we're going to change we're going to set things on the same baseline. So do items and and now if we refresh we have a nice bold logo and if you look we've got a perfect line there they're lined up great. So let's let's call today on that header but what shall we do about this footer at the bottom. This is our out of the box. We've got some widgets. We've got some things going on down here. Let's create a super super basic footer. What will that look like. So I am going to delete most of this I just want to make a little note at the bottom saying saying we made this site and we're happy about it. So I'm just going to delete all of this. This is going to be very similar to what you saw at the top but just to give you a sense of how quickly you can start moving things around and styling things. I'm going to keep this wrapper that that had the probably powered by block but I'm just going to type it out to make it very clear what's happening. So now let's add a paragraph looking good looking good. Now let's see how things are appearing over here. Yeah you know so still very unadorned. Let's let's let's use the other pink we fired up and so we'll set background pink instead of background magenta and we'll do the same padding and let's center this text. I think that'll look a bit better and refresh again and there we go. Nothing special but you can very very quickly start adding classes moving things around. And so this gives you a sense of obviously if you had more down there you'd be throwing flexes around and adding gutters and all those fun things but that just gives you a sense of how quickly it can happen. So with our header and footer covered what can we do about the content that we're getting from the block editor. That is our next key spot. So when you think about post content often this is coming from clients or this is something that you you don't have full control over and tailwind has a solution for that too. So there is a an official tailwind plugin called tailwind typography and it creates typographic defaults. I'm reading straight off straight off what it says typographic defaults for HTML you don't control and what better description is there for the things that people put into the block editor. The classic editor all the editors and what did so let's let's activate that plugin and take a look at how things appear right after that. So again so I'm just going through to give you sense there's a hairline in here there's some headings but it all just looks like text back in our config file. I'm just going to add so this is the line for tailwind typography I'm just going to uncomment it save and here we go this this is just this is just a starting point. This is to show you what you get out of the box just because it will bother me for them not to be there I'm going to add some margin to the top and bottom so we've swung over to the content our single dot PHP file. We can add utility classes straight into the post class function so I'm just going to add my means margin on the top and bottom 12 is a bit more than we have for the padding for and the header and footer. And so now it's you know it's a generous space but let's see what can we do about the style of the link and the headers. So I swung over to my functions dot PHP file there's a constant here called underscore TW typography classes and this lets you control project wide the classes that are applied to the content coming from the block editor. So we can actually add tailwind utility classes but specific to different elements of our typography block so if I refresh now we're going to get magenta links and header and headings. But I think we could probably still do a bit more to distinguish between our heading levels actually let's see how this looks in the in the admin first so you can see inside the block editor itself it has also updated so it also now gets the. The magenta headings we created the magenta links that all happens behind the scenes without us having to do anything in particular. And just to give you a sense of how things can be changed and even a more specific level let's take the age three and we'll just make it black so an easy thing to notice. So we'll swing back over we refresh in here and our second heading seconds age three or third level heading but our second heading in the article is now black. And let's swing over to this refresh here and it's black here as well so we're just adding there's just one place where we can make all these decisions so so we could style the text size in the paragraphs the space between paragraphs I have used it to make. Intended paragraphs there's no space in between at all you can style block quotes all these things you can apply utility classes to them and they will be applied. Anywhere they're coming from the block editor and they will be reflected in the block editor as well so it gives you this great way to. To customize that part of the project without having to worry about that being a separate thing that you need to go go and write custom CSS for. And finally I had promised that that I hope gives you a good sense of what it looks like to bring tailwind to themes my suggested approach being the hybrid theme but the same thing working across it. And then but what does it look like in a WordPress plugin so I haven't seen a ton of plugins that are using tailwind but there is one big one that does. Yoast SEO started using tailwind for its settings area in the back and I'm almost certain this is powered by react it's it's the settings area you get from from the menu. Not all of the if you go to general some of the other ones you're not getting this this advanced settings area I think they're sort of rolling it out to more parts as they go. But right now if you go to Yoast SEO settings you will see this page and so if you have something like this in your plugin it could make it could definitely make sense to use tailwind. And the only gotcha is that you should name space your classes and what does that look like so. Because the class names chosen by tailwind are pretty generic if you started using things like hidden things like background read you might conflict with another plugin or with the theme that is being used on the site that your plugin has been installed on. So instead of doing that the trick is to add a namespace ahead of them so there is a tailwind feature that lets you out of prefix in Yoast SEO case they have chosen YST so they knocked out those vowels and made three characters long. So if you start looking here you can see a mix so you see. Once you may recognize so YST-P-4 towards the center we were using P-4 so just prefixes it with YST this makes sure that they don't have to worry about conflicting with anyone else's styles. And in terms of doing that in tailwind in that config file that we looked at before it really is just as simple as adding a key for prefix and saying what your prefix is. And then all of your generated CSS will have that prefix and then you just have to type with the prefix when you're adding your classes. But let's step back even more why do any of this why switch to tailwind when you have a system that works for me if you look at this little chart. It seems like a big life moment for me in 2018 was discovering tailwind and it was but other big things did happen in 2018. I became a dad and I had a lot less time and it was no accident that I was searching somewhat desperately for ways to do more work in less time. And to not have to worry about working at night not have to worry about working on weekends and to make the same amount of money hopefully so that was really the goal and it worked. I really you know we're already all using WordPress I don't have to talk you into that or I assume the vast majority of people in the room are already using WordPress. So I don't have to talk you into that but I will try to talk you into tailwind because I feel like of the things I have used in my career the things that made the biggest difference in terms of my quality of life have been dedicated myself fully to using WordPress when I stopped trying to create my own CMSs or use other CMSs and switching to using tailwind for all my client projects those are the two biggest things in terms of improving my quality of life. And to me it this is not a story about having a kid this is story about time we could all use a lot more time and I really feel like this is a way to free yourself up. There are things you wish you were doing if you use tailwind you could probably do more of them because if you once you really get into it I just feel like you can do more projects in less time. And I haven't talked about this much up to now but I just became a lot happier doing them I feel like the. What felt like drudgery of going back and forth from template files and then moving into CSS and writing nested CSS and naming the things that I just built and going back and forth from those files it just felt like a slog. And now I feel like when I work on new projects I go into it knowing that I'm going to enjoy every part of the project I'm going to enjoy the. Difficult parts about building a site with WordPress I'm going to enjoy building the front end for knowing that it just feels fun it feels. Like everything is at your fingertips you can build things quickly you can build things and have exactly what you have in mind just be translated to the screen in a way that feels really it feels wonderful it feels like. Magic almost just how quickly you can you can get things going that is my pitch I am sorry I couldn't see your faces as I gave it to you and thank you so much. See Greg can you hear me. Okay that's good can you see them. So somewhat of a camera there cool well we will. Yeah we'll throw it out to them anyone who's got questions raise your hand Connor's got a mic. Yeah I see him running somewhere. Let me know if you can hear them. Hello can you hear me. All right awesome I'm just looking through the GitHub repository for underscore TWU. I thought WordPress needed a index.php and style.css for a theme but it seems like you don't have it in the root you have it in like a theme directory how do you manage to do that. So that's not how I recommend deploying the introduction but the my understanding of the legacy reasons that I'm working is that I think automatic cells want to set up a master repository that has a huge number of themes and so if you look at the automatic slash theme repository you can see that it has dozens of themes. If you drop that into your themes folder it will pick up all of them even though they're not in the root they're going to level down. So I have a useful WordPress code to see that that's what's happening and what it is doing is it will look at every subfolder for first out of CSS. That said I don't recommend deploying that way it's more it's sort of cheap so that people can develop it more easily so that people can. And I guess started really quickly and then because there's the workflow in place to funnel the creative elements to send that to deploy that in any way you can use appropriate. That one is what your production site doesn't use this kind of path to develop my eyes. My eyes but it is what I'm using for their master. And again we're doing. More than any plan to remove it or change it is just a legacy way to allow me to use one folder. And so we just have one subfolder but it works out the same way. All right thanks. Anyone else questions questions. Anybody have any more questions. All right I think we're good. Well thanks for dropping. Looks like we might have one here. Awesome. Thanks for putting all of this together. One if my understanding was right one of the differences between the way this works and the way something like bootstrap works is it feels like the NPM build process is only including the expansions of the utility classes that you actually use in your in your theme is that correct. That is exactly right. So the original way that we were back in the launch. It would create a CSS item and purge everything that you didn't use using first CSS. Recently they re-tooled their workflow. So now it actually only adds it will. It will go through with everything you use and then add it one at a time. They did this time so much for optimizing their stuff they can do that. Yeah. I don't know if you saw it. The build time of my computer is in the fall part of 150 milliseconds. It's going through every file on your team finding every single tenant class in that state. And the reason they change their approach here is now you can do arbitrary utility classes. You can create your own that aren't part of the spec built into you. You can put things in a square bracket. So if they don't have the exact color or side they're looking for built into your debate. You can just use them one time. So that's something they re-tooled how they had that set up to allow any big and infinite number of the naturally utility classes as opposed to a set library that they then purge. Yes. I actually had a question myself of that's okay. I was wondering what would you say is probably the biggest drawback of using Tailwind. In WordPress or generally that you might not have touched on before. The drawback specific to WordPress. I mean your workflow does have to be tailored a little bit. If you're not used to having a build process that you're not comfortable with then you simply can use it. The nice thing about setting up a build process is you can use it for other things as well. So the build process and the under source W theme I created, it also handles your job experience. So the whole build process is very useful. But again if you're not comfortable with that kind of approach that it wouldn't work out for you. If you are working on a team then you're kind of deciding if you can make it to use in Tailwind. You're kind of deciding the rest of the team on Tailwind as well. Which isn't necessarily something that everyone is comfortable with at all times. Those are kind of those two biggest drawbacks that I see. You have to change your workflow and if other people are working on it they have to change their workflow as well. But if you compare it to some other system, once you learn the basics of what the use of the process looks like. Tailwind is just so good that it's pretty quick to pick out and be able to modify things. And it's time saving in terms of not having to look through a project and try to understand how the components are, how the aspects that you can class components and how things are set up that way. You can end up spending so much time there and you can only learn one project where Tailwind wants to play a review. So they are a drawback. There is a curve up but it's not that steep curve and I think it's worth it. But it's not the last thing. It is not a drawback. If you're getting every reporting component or something, it's the other thing. Cool. Thank you. Looks like you've got some more in the back. Hey, hello. By the way, thank you for your team generator. I think it's brilliant and I'm going to definitely use it. One question I had is regarding custom teams you do for customers because you talk about hybrid team. So what's your approach for, let's say for pages for your customers when you build something for them to maybe interact with the block editor? So do you usually go more kind of for specific pages like art code? Let's say your own page. Are you going to art code that and use all your Tailwind classes and your loops in your theme? Or are you going to let them, you're going to build in with the block editor and then kind of try to override these classes with your Tailwind method? It really depends on the client and the client and the budget. But I will also try to approach this. So sometimes you can look at home page and see it and say, nothing about this is like any other page on the site. It doesn't make sense for me to simply create a template for this and basically art code in. Do the things that you edit or something like that. So that's one option. But generally I'll try to do as much as possible with the block editor. With Tailwind it's not that I'm giving that my clients will never learn Tailwind's utility class names. They never add directly influence that I'm using. But I'll try to set the block editor with custom components to be able to create different designs they need. And that's something where you can use, you can create a custom block. You can use Tailwind to style that block. And you can do the block with the dance house and use it if you're not comfortable doing it. So you can do a true custom block using the dance house. You can do that as well. Both ways can be done with Tailwind. Okay, last question. In terms of using JavaScript 4.0, let's say your menus or your mobile menu. Do you like using Alpine.js? I'm just wondering if you or Javadar recommendation for like quick JavaScript. If you experience using Alpine.js. Alpine.js that... Yeah, sorry. Yeah, okay. I didn't want to get into it. In the same way, so I'm just going to tell you the generator. When it's launched it includes Alpine.js. Okay, good. But I felt like there were some people who weren't interested in having, also having a JavaScript library. So I brought that, but it's a 30 seconds install if you want to add it. And that's one of the first things I do when I set up my own projects from the generators I had at Alpine.js. Yeah, I strongly feel like the combination of Alpine and Tailwind is wonderful in its way. It's on Alpine.js for sure. Alright, thank you so much. I think we had one more question there, yeah. Hi, thank you so much for the great presentation. It was really helpful. I just have one question. I wonder if there is an easy way to kind of load the CSS that is used for each page only for that page. I mean for the WordPress website when it is on each page not to load the whole CSS of the website. So one of the big benefits of Tailwind is because you're using the same utility classes throughout the site it ends up making a site-wide CSS file that's really concise. And if you get one benefit out of that one CSS file that is the first time you load anything to your site and it never happens to load another one again, because the file size is just so small that it will, so long as your visitors are visiting more than one page you'll find that it's just made a future game load so fast and won't make the first game load meaningfully slower that I always, I suggest having one CSS file with classes in the whole site as a benefit of being, I think, a better situation for site visitors. And you did want to split it up. There is, in fact, a, there's a WordPress plugin. It's designed to see if the build process part in that you use Tailwind classes and that's trying to approach. So each time you save a page it is trying to create a CSS file that applies just to that page but there are drawbacks to that approach because it's doing that with Heather and Twitter as well so it makes changes to your Heather and Twitter. It invalidates your CSS to the entire site and then you have to figure out the ways to get involved with them. So there are, in my opinion, the problem with that method is it's more for real classes to be doing a page by page basis with this approach. That's something that you would, like, want to do something similar to that and work very well, but if you're going to use that, you're going to have to implement that as single, as single-wise. Right. Thank you so much. Awesome. Thanks, Greg. We're going to get, move on to our next person. Super appreciate you doing this. Everyone round of applause for Greg. He can hear it now. And if anyone has lingering questions. Yeah, thanks, Greg. If anyone has lingering questions, if you tweet or Instagram or Facebook or whatever at WCYVR, we can pass those questions along to Greg and he can respond to you that way as well. So thanks again. Have a good day, Greg. Feel better soon. Thank you so much. Take care.