Plugins

[00:00:00]
>> At a high level, I will just kind of talk about plugins. And I think that's kind of final piece and then you are you all get your like Tailwind merit badge. Generally speaking, it's not we did a workshop on the recently where you can like add all this power and functionality and stuff along those lines into your build system.

[00:00:20]
A lot of the plugins for Tailwind are just nice ways of packaging up stuff that you could have done in those layers. And so, it is useful if you've got multiple codebases and you wanna be able to port that stuff around. Or the other version of that if you are running a consultancy and you wanna have a pack of the stuff that you use all the time, it is super useful.

[00:00:45]
But, I think, let's actually look at the plugin API here, because I think it does a really good job of showing it. It is effectively a function where you get, and you can kinda tell, what you're getting yourself into with this addUtilities, addComponents. What do you think that does?

[00:01:06]
The same thing that was in your style. But what's super powerful about it is then you can publish it up to NPM, and it actually wires itself into that IntelliSense. So here's one, the way that I use it is on our marketing site, we have a bunch of typography.

[00:01:22]
Obviously what a h1 looks like on mobile, what it looks like on every screen size is a different set of text. LG, and then MD text, whatever, and so I have a plug in that is just I say typography for the display and hierarchy for a heading. And then at each viewpoint, it's got all the breakpoints in there, right?

[00:01:45]
And I can use that across our documentation site, our marketing site, all the different places and I don't have to like port that over by hand I just bumped the dependency and we are good to go. I do wanna draw your attention to one of the official ones that I use a lot in the website.

[00:02:06]
It says tailwindworkshop.forsell.app, and you just go I'll show you my own repo you can look at the code, cuz that's all in tailwind as well, and you can kind of see some of the pieces that I used. I'll show you one of the official ones that I use.

[00:02:20]
There are two that I use a lot and I'll just draw them to your attention, but really the major thing that I do with plugins is kind of then adding the base styles, right? So now I have one plug-in NPM install like our I actually just we have the files like internally that we use cuz they're just functions, right?

[00:02:43]
It's just literally, you hand their Tailwind/plugin a function, in there you get addUtilities, addComponents. You get access to the configuration file. You get access to the theme file, so you can patch the theme. You can read stuff from their current theme and extend it. So, it's just basically a way to use JavaScript to package up everything that would happen that you would do in one of these styles in a much more portable format.

[00:03:11]
But I'll show you some of the plugins that I think are also really good. And we saw that thing with has before. The other one that's kinda cool is the addVariant, but there's not a lot going on there, you basically give it the same syntax you would do like end.

[00:03:26]
The hover pseudo class that we saw like variant is just end colon hover, but you call it hover colon, right? it does the post CSS nesting for you and just wires it all up, it's just a nice way to package everything up. The one that I use a lot that, what I used on the site that you we've been looking at all day is Tailwind typography.

[00:03:53]
Basically, it gives you this new prose class that is just like decent headings, decent line spacing, it did give me those back ticks like they use it on the site, right? All of that was the Tailwind typography plug-in that basically you can just write Markdown and it will look good, as long as you put a prose around will keep everything from getting too wide.

[00:04:15]
All the little stuff that is tedious, cuz I'm gonna be honest, I don't really understand line height, I just know that I don't like it when it looks bad. And this gives me relatively good line height, good typography, good headings, good everything along those lines. That one is super simple, we use it on a site anytime we're gonna render content and Markdown.

[00:04:33]
We throw the pros class on it, it gets laid out really nicely, and everything's great. The forums when I don't use because we have a very specific design language in that sense. The one that I really love, and we talked a little bit about this which is some of the things that are plugins or plugins presently because they are maybe not full on web standards are in CSS yet.

[00:05:02]
And so if they're in core, there's like a little bit of an expectation that you're not gonna make breaking changes. If they are a plugin, like the expectations that you have are slightly different. And so container queries are a CSS feature that this just gives you utility methods for.

[00:05:18]
And container queries are the thing you always wanted that you never knew that you had, that you wanted, which is we saw those responsive breakpoints for a wide screen agenda queries. How wide is the div that I'm in, right? So if that div is only 300 pixels wide, then you might choose the layout and flex column versus that div ends up.

[00:05:42]
Even that grid layout that we saw before, I might choose to then have all the contents in that sidebar in a flexbox. And if it was a wide even on a smaller screen, then I want it to be a row, versus if it ends up as a sidebar, then I want it to be a column.

[00:05:57]
And it allows the browser just say, okay, what is the container that I'm in? And remember doing that in JavaScript you gotta get the client with and all that it's terrible. I'll actually show it to you in this code base real quick. Cool, let's grab it. I use it in that CSS grid thing and we saw earlier, so we'll go to, Say, do I have it readily available?

[00:06:38]
So you basically can put it @container, which is very much like when we saw peer and group, right? You can do container, you can also do one with a slash as well. And what it will do in those senses is it will go ahead and allow you to have different nested ones.

[00:06:56]
You can be like, hey, I am an element, I could be a child way down the DOM tree. And it's like, if this container is wide, I wanna render like this. I use it like, hey, make the text smaller if we're in a very small div. And go either flex row, enlarge your text if we're in a wider one.

[00:07:16]
Not necessarily the viewport of the entire app, but just the div that we're in. The fact that I don't have to do that in JavaScript, or try to just have heuristics, is the greatest thing ever. So then you can do something like, Here's an example where I say, add extra small, make the text size base, right?

[00:07:39]
You're gonna have the font size changes based on the container that it's in, so even if it's flexible in size, the other things make total sense as well. And so that's a plugin that you can just install on this just NPM install, and I'll show you the Tailwind config that I'm using for this app, and you can go take a look at it as well.

[00:07:57]
There's a few other tasty notes in here that we'll look at, and then we'll kind of open it up for just larger questions, which is you NPM install them, you can pull them in, you throw them in this plugins array, right? And that's it, and then you have those container queries, and it's great.

[00:08:12]
You should do it, it's wonderful. And the typography again, you put the pros on it, it's great. The only ways I really extended this theme is I changed the fonts out, right? So the sans font is now like some font that I found on font source that I liked.

[00:08:25]
That stupid title display font that I sometimes regret, but now I've already shown it to you, and I can't ever change it. And then one of my favorite monospace fonts. The other part is that content, which is the glob that it will use to figure out where to look for CSS classes to figure out what to purge, right?

[00:08:43]
By default, it will look at HTML. You don't put your CSS file in there, because then you won't purge anything, cuz it'll be in the thing. But like for instance, I wrote Svelte and Markdown and stuff along those lines. So if you're using other files where you're referencing these classes, you do need to include them.

[00:09:02]
But that's I kind of set it and forget it. But beyond that some of these plugins are really powerful. And there's again like most things you can there's an awesome list for every given library. There's awesome Tailwind, awesome whatever, and it's a like 1000 plugins that I look really cool and I don't have a use case for.

[00:09:20]
But that doesn't mean that you don't, that just means I don't, worth taking a look at. I do think that the container core is one and the typography one are almost like worth the cost of entry, because I think they're really powerful and solve a lot of problems.