Arbitrary properties syntax lets you write any CSS you want
Fun fact, @tailwindcss actually supports every single CSS property, even those that do not exist yet.
You can use the arbitrary properties syntax to write any CSS you want, and for which Tailwind doesn't provide utility classes.
Transcript
00:00 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
00:19 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.
00:38 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.
00:54 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?
01:13 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.
01:32 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.
01:51 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.
02:10 Thanks for watching.