00:00 All right, so we've clearly broken some of our styles here, and in this segment, we're going to start fixing it back by porting stuff from the JavaScript config file to the theme definition in CSS. We're going to do this slowly, but surely, step-by-step. First, we're going to extend the screens, colors, and font family objects, so these three,

00:18 and then you're going to stop there, and the next customizations will be done in future segments. So the way you define the theme in Tailwind version 4 in CSS is by using the at theme block, and then you can define CSS variable with specific naming convention.

00:36 So if you wanted to define a candy color of pink, you could go dash, dash, color, dash, candy, and then define whatever color you want here, and the same for a font size, dash, dash, font, and you can see the suggestion here coming along, font size, huge, eight, rem,

00:55 and so you can see that this is actual CSS, and this is going to do the equivalent that you would do in JavaScript config file for font size or colors. So how do you know what keys are available in the theme? Well, autocomplete suggestions are going to help you quite a lot, but you can also find an exhaustive list

01:15 of these available keys in the theme. It's linked in the documentation for this exercise, and let me pull up the link here, and I'm going to zoom this, so you can see we have our defaults, breakpoints, colors. This is the entire theme, but it shows you how you can define specific keys,

01:34 blur, border radius, shadow, et cetera. So you can refer to this, and when you're ready, go ahead and start putting the first parts of our customization into the CSS configuration.