Wrapping Up

[00:00:00]
>> So with that, that is kind of all of the parts of Tailwind that I have in the two or three years that I've been using it, are the ones that stuck with me of, those are the kind of most important ones. Now, you should definitely go take a look in the docs because there's a lot more things that some of them may be very unique to what you're doing and stuff along those lines, and you can try all those things out.

[00:00:25]
But I think that for the most part, having a lot of those variants and a lot of being able to kind of just know the state of a lot of the forms and being able to have styles that rely on the state of other DOM nodes and the container queries and all of those pieces.

[00:00:42]
And especially, I think the responsive variants are also, again, worth the cost of entry, because it has made doing all that stuff so incredibly fast that the productivity gains, I think, on my end, at least, in my experience, have been absolutely and totally worth it. And I hope that you feel the same way as you kinda get comfortable with it as well, and maybe you'll find different parts that are the most useful for you.

[00:01:09]
But these have been the parts that over and over and over and over and over and over again, I find myself on a daily basis to the point where they, at first, even if some of those utility classes look a little squirrelly, you get the muscle memory at a certain point.

[00:01:21]
And then all of a sudden you're whipping out a design in a day, and it's like this isn't even real. And now everyone thinks I'm really good at what I do. It's just I have good tools and it makes it easy.
>> Let's start with, is there any special considerations when building for production?

[00:01:38]
>> So at the end of the day, it spits out. The nice part about that PurgeCSS piece is it's scanning those files based on this content and putting together only the styles that I'm using. Which is why they don't want you to use apply, cuz then those words are in your codebase, whether or not you use the style.

[00:01:57]
If you wanna use an applier, too, and make some components, know that you're opting out of some of the performance optimizations. But if it makes it more practical, go for it, you have my permission. You don't have the official Tailwind permission, you have my permission. But for production, it'll spit out the JavaScript files, and then if it is useful, you could see in the playgrounds where it shows you the JavaScript that would have spit out.

[00:02:23]
At that point also, it's going to run through PostCSS, which I use Svelte and SvelteKit. And even our React apps, we use Vite, which also has built-in PostCSS support, which is then also gonna minify, we use cssnano as a PostCSS plugin. So Tailwind goes through, scans my entire codebase, sees what class I'm actually using, only includes those.

[00:02:49]
Those then get sent into PostCSS with no work on my part, it just happens, and get minified down to the bare minimum. Or if I want to add vendor prefixes, which I don't need to, cuz I have the metrics of what browsers we use, which as somebody who works on a developer-facing product, it's 99% Chrome.

[00:03:12]
And I can also skip a lot of the vendor prefixes because I'm dealing with people who have Monarch. If I worked in a different industry, I would not maybe be able to do that. But the fact that it is running through PostCSS means you're getting the production build basically for free.

[00:03:27]
>> Are there any tools in the Tailwind ecosystem that you use in your workflow around larger projects, for example, shadcn/ui, daisyUI, Flowbite, etc?
>> So I don't. However, I will say, Flowbite's documentation is just good for learning how to do stuff in Tailwind, right? There's one or two things where there's a special little bit of JavaScript part on their end, but Flowbite's like docs.

[00:03:54]
If you wanna do that thing where the Submit button looks like it's part of the input field and the borders are all there, you just type that in, and they've got a documentation and an example, right? The stuff like a date picker or some of the other stuff, you do need their full-on library.

[00:04:08]
But a lot of this I don't personally cuz our designers have their own very specific design language, and we have a full-on team, so we actually have our own. But I've looked at all those, and they look great. And do I regularly, let's just say, get inspiration from them?

[00:04:28]
Absolutely.
>> We have a user who just finished watching Figma for Developers. And is wondering if you have any tips on building a custom designed system with Tailwind CSS or kind of with the Figma workflow there.
>> Give me six months. So right now we are, like I said before, one of the nice parts about having all the utility classes is that we could do the audit to figure out what colors are where.

[00:04:54]
So we have a designer, Ash, who is using Figma. So Figma has this new idea of variables in Figma, so like the colors are weirdly called bg-red. We are only gonna do light, medium, and dark, we're not gonna do the full 900. But we are literally in the process of, in Figma, mapping all the design tokens and variables to Tailwind classes, that literally what I was doing, what day of the week is it?

[00:05:20]
Whatever day of work before I flew out here, I was literally working from Figma's API trying to generate the Tailwind styles directly from a designer's designs to generate the design system. So at this moment, I do not. Give me a month or two and I will.
>> What's the Tailwind alternative to using calc?

[00:05:44]
For example, height: calc(100vh- 70px).
>> That's a good question. I have a suspicion that it's easier than we all think it is. This could go poorly, but why not? So my suspicion it's probably as easy as, So if I did something like class, and let's say we wanted height, for instance, and we wanted it to be, Calc, and let's say, what, 100 view height, minus-

[00:06:30]
>> Like 70 pixels.
>> 70 pixels. That's it. [LAUGH] You can see, as I hover over, height: calc(100vh- 70px). You can just do the arbitrary values in there, and it just works.
>> Do you have any tips for handling scrolling panels within a grid container?
>> Yes.
>> For example, if you're looking to build a full screen app similar to Slack.

[00:07:00]
>> So there is a bunch of scroll snap stuff kinda built-in, and check this out. You can actually have the snap point, and then there's one where you can actually set it to mandatory, and it goes back. And then if you go enough, it'll actually kinda scroll. And this is a Flexbox, I have to believe, not a grid per se, although that might just be wrong, but you can actually, there's a bunch of utilities in here for exactly.

[00:07:25]
I almost like wanted to do the slideshow piece before I decided that I was gonna do everything in the browser anyway. Like this as well and kinda build a little slide out because you can do that in here, and there's a bunch of utility classes. And scroll behavior, you get overflow, all those things you can kind of do all those, but the scroll snap, I think it's super cool as well.

[00:07:48]
>> How do you incorporate CSS variables?
>> I can define them or whatever, but you saw a lot of the classes that were getting used had CSS variables. But you can literally do the dash dash syntax in one of those arbitrary square brackets. Is there a easy? Yeah, so let's say you had them in one of the layers.

[00:08:13]
So there's the classic root thing as well. You can literally either put them in the theme as something you pull in, so that they're just utility classes you can use that are based on the variables that already existed. Or I believe you can do the arbitrary value thing and just inline them as well.

[00:08:31]
Also in my case, Svelte lets me literally put dash dash whatever in there, and put them in directly as well. So I have that at my disposal. Yeah, there's some bonus content of the stuff where I'm like, I don't wanna go until 7 tonight. [LAUGH] That is there as well that you can kinda take a look at, but again, there is a lot.

[00:08:52]
Cmd+K on the Tailwind Docs is your friend. You can kinda search and find stuff. And yes, you should. The only person I think to ever read it from start to finish is me, mostly cuz I was gonna teach a six-hour workshop on it. I felt like that was the responsible thing to do.

[00:09:06]
But it's kinda useful if you're just kinda popping in and finding the pieces that you need. But again, that container query plugin is my heart and soul, and one of my favorite things. I would definitely highly recommend that as well. And I'm trying to think if there's anything in here that's just fun.

[00:09:26]
The transitions and the animations and transforms are always fun, even though everyone hates me when I use them. That's their problem, not my problem.
>> All right, thanks to you.
>> Thank you.
>> [APPLAUSE]