The "class" dark mode strategy only targets 

If you're trying to combine a custom variant with dark mode, make sure you respect this hierarchy.

Combining variants with the dark mode “class” strategy

 Let's say we want to create a new Skin modifier in Tailwind, but we also want this to work with Dark Mode. So you can see here, we're adding a variant called Skin, and it's targeting any element with the Skin class in the parent. And we've also enabled Dark Mode using the class strategy.

 In the HTML tab, we've got four blocks of Markup, but each of the four ones use the exact same utility classes. And you can see the first one is the default color, second one is just Dark, third one just Skin, which is our variant, and the fourth one is Dark and Skin combined to see how it works.

 And looks like the first three elements work just fine, but the Dark and Skin combination does not work. If I scroll down on the last block of HTML, you can see that we applied Dark and Skin on the same element. And that's why it's not working, because in Tailwind, the Dark class targets its children element.

 Let me just hover over a Dark class to show you. So here, if I hover DarkBGIndigo700, you can see we have the Dark selector and then a Space. So Dark is expecting the children element to be styled. When we try to apply both Dark and Skin modifiers together,

 you can see that we have Dark, Space, Skin, which assumes that Skin would be a child element of Dark. And so to make it work, what we need to do is have the Dark class being a parent of the Skin class. And most of the time, if you have the Dark class on the body element for the whole website, that's not going to be a problem.

 But here, what I'm going to do is duplicate this and this div, and then we'll have the Dark one as the first one, and then the Skin class as the second one. And now you can see that the Dark and Skin colors work properly,

 because we're respecting the nested hierarchy between Dark and Skin. And that's it.

 v3.2 let you style elements based on a specific data attribute value.

Useful for 3rd-party libraries, or for places where JS framework props cannot go

New "data attribute variants" let you style elements based on a specific data attribute value

 We have three callout elements here, and the only difference really between all of these is the background color and the text color. You can imagine we could build a callout component that would have a prop called status, and then you would pass this prop to handle the styles. Well, what if instead of a status prop, the differentiator here was a data attribute?

 So take a look at this. We have a callout component here, and we're using this callout component three times, passing a data status prop, which can be success, warning, or danger. The component renders the exact same HTML with the same styles as before.

 So the only problem, obviously, is that the three callouts are now green, and we need to use this data status attribute to handle the styles. We're going to use the new data attribute variants added to Tailwind 3.2 to handle this. So here where I have BG green 200, I will prefix this with a data attribute variant, data dash square brackets.

 So we want to target the data status when this attribute's value is equal to success. And so now only the first callout is green because our first callout here has data status set to success. So let's do the same for the other two callouts. Data status equals warning.

 In that case, we want BG yellow 200. And finally, data status equals danger, BG red 100. Nice. So that's working really well. Obviously, the text inside is still green 800, so we need to do that now.

 And you might think we could do something like data status success, text green 800. But as you can see now, all text is black. And this is because this element does not have a data status attribute. This parent element does.

 So on the parent here, I will add a class of group. And this will allow me to now have a group data attribute variant. And you can see that it's targeting the group where the data status is success. Group data status equals warning, text yellow 800.

 And group data status, danger, then give us text red 800. And there you have it.

 We've styled our callout components based on the data attribute passed with a pretty cool technique to know.

Styling the `::selection` pseudo-element to match your brand color is a great way to bring extra delight to your designs!

 pseudo-element to match your brand color is a great way to bring extra delight to your designs!

On brand text selection with the `selection` modifier

[0:00] [0: 00] Looking at this agency website, we immediately get a really strong sense of brands and brand color. It's all the way to the company name. We have this nice purple everywhere on the project.
[0:10] [0: 10] Everything looks great until we try to select some text. Honestly, that's a little bit of a let-down here. Let me show you how with just two utility classes, we can take this design to the next level and bring some delight.

[0:23] [0: 23] You could do this anywhere. Here, I will go in the parent most div up here, but you can do that in the body tag as well. I will target the selection pseudo element and apply a class of bg, and use our brand color which is purple-600.

[0:37] [0: 39] That's the first class. I'll also add selection.

: [0:41] [0: 42] text-white. Now, if the user tries to select some text, they will have a really pleasant surprise which looks much nicer. That was well-worth the effort.

CSS Grid can simplify the spacing adjustment gymnastics when using transforms to translate an element across both sections of a background color split.

Create a "color background split" effect with CSS Grid.

It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections

Color background split effect with CSS Grid.

[0:00] [background music]
Lecturer: [0:00] Last week, we shipped the new Thinkmill website, which is built with Astro and Tailwind CSS and I wanted you to show you a cool little CSS trick here that I've done for this news cards that you can see it sits halfway across the background split.

[0:13] I thought it'd be fun to recreate this effect here in a Tailwind Play. I have two sections. One with the white background and one with the cyan background. We want to position our element here halfway across both colors. We're not going to have the element inside one of the section, but let's have it between the two.

[0:30] Let's have a div with a class of relative, so we can anchor a background color stripes. Let's have a max width of lg, centered with mx-auto, a white background, p-8 rounded-lg. We'd also have a border with a width of two and maybe a shadow as well. Let's go with shadow-lg.

[0:48] All right, that doesn't look that great, but that's going to work for us. Let's have a p tag with some lorem ipsum text. Now, instead of translating this thing over the line, we are going to have two bands that matches the top and the bottom background colors.

[1:01] Inside the relative parent, I'm going to have an absolutely position element, which is going to occupy all the available space. This is going to be purely decorative. Let's add an aria-hidden attribute to it.

[1:14] We want these to be a grid, which is going to have only one column and we're going to have two elements inside of it. If I add a class on the second of bg-purple-200, we can see that it covers exactly half the bottom height of our element. If the first one had bg-indigo-200, it would cover the other part.

[1:33] Obviously, we want our paragraph here on top and that's behind the bands. I can fix that by adding a relative class. Actually, the correct class to use here would be isolate and that looks terrible right now. If I change the colors to match the backgrounds with bg-white and bg-cyan-100, check this out, now we have these pretty compelling results.

[1:55] If I go to the preview mode, you'll see that our call out components doesn't take any space from the first section and the second section. If we had that element at the start of the blue section and then translated it up by its own half, we would have to figure out by how much to adjust the padding here.

[2:10] The way we've done it, we preserve the padding level 24 that we have at the top and at the bottom, which I think makes that approach a pretty compelling solution.

 CSS property, even those that do not exist yet.

 to write any CSS you want, and for which Tailwind doesn't provide utility classes.

Arbitrary properties syntax lets you write any CSS you want

 The new arbitrary properties allow you to use absolutely any CSS property you can think of even if it hasn't been added to Tailwind CSS yet. Let's take a look. Alright, so we're going to take this little article as an example. So here's our image tag and here I'll open square brackets for the new arbitrary property

 syntax and inside of that you can use absolutely any CSS key value pair. Let's use the clip path property and we'll set the value to the circle shape. Ok, nice, but let's have a little bit more fun with it. So I want a circle which has a radius of 70% and has its center at 20% from the left and 30% from the top.

 Now watch out, arbitrary values cannot contain spaces so here we're going to replace each of the spaces with an underscore which will resolve to the correct syntax. Alright, that's kind of interesting now but it would be much nicer if the text was wrapping around the image following the curve here.

 And for that we can use another CSS property called shape outside and here I'll use the exact same circle than in our clip path. And just like that we've created a clipping mask for our image and we have the text wrapping around nicely around the curve. And that's pretty cool but you may ask more than ever why not just use inline styles?

 Back in our example we have a different aspect ratio applied to the image at a larger breakpoint and with that aspect ratio our circle clip path kind of falls apart. So we got our clip path definition here and we'll redefine this at the large breakpoint. So lg and once again clip path and here instead of a circle we're going to have a polygon.

 And here I'll just paste some coordinates for our polygon points. And yeah nice our new clip path looks pretty good. You can see that the text is still following the curve from the circle that we had defined. So once again let's copy that polygon and for the large breakpoint the shape outside property will follow this exact same polygon.

 And boom that's looking pretty cool. Alright we've just done something that inline styles cannot do. Define two properties and then redefine these two properties in the media query for the large breakpoints. So let's take a look at the result. We have the circle crop until we hit the large breakpoint and then we have a custom shape polygon.