 utilities are pretty useful to indent the first line of a paragraph. 

That will give your articles a book-like feel.

Ident the first line of a paragraph

 Let's add a typographic touch to this article by using some text indentation on the paragraph here. So here on the first paragraph, I'll add a class of indent dash. And let's use level 12 here. And you can see the first line of our paragraph has been indented now. And say we wanted the same indentation to all the paragraphs.

 I could delete the class from this paragraph and add the indent 12 class to the parent element. And now the first line of every paragraph in our article has been indented.

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.

 attribute to determine if it's currently open or not. 

 modifier prefix to apply styles only when the <details> element is... open.

Tailwind’s open modifier prefix

 Ok, so here we have a list of frequently asked questions, and as you can see, each question can be toggled, opened or closed. These FAQs are implemented with the details tag, meaning that it will only show the summary when it's closed, and when it's open, it will show the rest.

 Let's say that we wanted to apply different styles to a question when it's open, to attract more attention to it. So let me show you something. I'll apply a background of white, as well as a shadow XL on the first details element. And so now it clearly stands out, but we want these styles to be applied only when the question is open, and not when it's closed like this.

 And turns out the details element has an open attribute to it when it's open. To demonstrate that, I'll go in the second details and add open. And you can see now the second question is displayed as open. And we can target this open attribute with the new open variant in Tailwind CSS version 3.

 So here I'll prefix the BGWhite class with the open variant, and do the same for the shadow open column.

 And just like that, these utilities will only be applied when the details element is open.

 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.

Container queries are changing the game. They make your UI components more robust and resilient.

Browser support is getting really good, so it's time to embrace a new CSS/Tailwind skill!

Container queries in Tailwind

 Container queries. Browser support is getting pretty good and you can now use them in Tailwind CSS. Let's take a look. Here's a responsive card where the layout changes at the small break point. You can see the image goes to the left instead of from the top. Here's a code for the card and you can see it's using the small break point to make changes. So that all works well but now let me

 create a grid with two columns. Inside of that grid I will paste the exact same card two times so they show up side by side. Obviously when we have two columns we have much less horizontal space but the card still relies on the viewport width to make the layout changes. Utilities for container queries will eventually make it to Tailwind CSS core but for the time being you can

 bring it through a first-party plugin. npm install dash d at Tailwind CSS slash container queries and now in the Tailwind config file I can require that plugin. All right let's start working with the card in the first column. I wrap this card in a div with a class of

 at container and this will define the container type inline size to this block of html. Now I want to change all the sm utilities to instead use container queries. So I can use at and this will give me a list of at container break points. Those are based on the default max width scale not the default media query break point and of course you can customize all of that.

 I'll go with 36 rem so at xl and now we've replaced our media query break point with break points listening to the container width. The container has more than 36 rem in width so we've switched to the side-by-side layout but as I keep growing you can see that now the container

 is back to below 36 rem so instead of breaking like this card that listens to the whole viewport width this is aware of its own container so let's keep going until we hit that container width again and it should switch back to a side-by-side layout. Beautiful and just to appreciate how it works we

 have three columns and then two columns and right away you can see the container queries have deemed that there's not enough space to switch to the horizontal layout. Let's make the window narrow and you can see now our two columns have shifted to this vertical layout and eventually if they have enough space horizontally again you can see that all cards switch to this horizontal layout

 but will eventually go back to the vertical layout. So that's container queries in Tailwind CSS be sure to check out the browser support before you use them and also check out the plugins github repo for full documentation.

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.

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.