Using Tailwind’s Space and Divide Utilities
Today we are going to take a quick peek at the new Space and Divide Utilities that were added to Tailwind in version 1.3.
<div class=" flex md:flex-row justify-center md:space-x-4 md:space-y-0 flex-col space-y-4 "> <div class="h-24 w-24 bg-blue-200"></div> <div class="h-24 w-24 bg-blue-200"></div> <div class="h-24 w-24 bg-blue-200"></div> <div class="h-24 w-24 bg-blue-200"></div> <div class="h-24 w-24 bg-blue-200"></div> </div> <div class="my-8"></div> <div class=" flex md:flex-row mx-auto w-3/5 justify-between md:divide-x-2 md:divide-y-0 flex-col divide-y "> <div class="flex-grow text-center uppercase font-bold">Never</div> <div class="flex-grow text-center uppercase font-bold">Gonna</div> <div class="flex-grow text-center uppercase font-bold">Give</div> <div class="flex-grow text-center uppercase font-bold">You</div> <div class="flex-grow text-center uppercase font-bold">Up</div> </div>
What’s up, everyone? In this video, we’re going to look at how to set defaults for your props and also to validate props. So to do that I have three buttons here; give, you, and up, based on a popular song, and what we need to do is be able to set variants on these buttons… so we’re going to use props for that.
We’re going to look at the app component. You can just see I have three buttons here and here is the code for the actual component. It’s just a simple button and we’re applying a class of ‘button‘ and a class of ‘button teal‘. Now, what if we wanted to have another variant of this button that wasn’t teal but it was orange? Because we’re working in Vue and using components we’d probably use a prop for that.
Let’s come down here and we’re going to add a prop and it’s going to be called color and we’re going to give that some information about what this prop should be. We’re going to tell it the type should be a string, we’re just going to accept a string telling us the color… and, let’s go ahead and run with that for now.
Let’s come out here and we’re going to change this so that we can say color equals teal and the last one is gonna have the color orange. Those are gonna be our two colors; teal and orange. Let’s come back into the component and try to implement that. What we can do is we can add a custom class here and we’re gonna say that class should be button dash dash and then whatever the color they passed in is. We’re going to remove this and we’ll see that we now have a teal button and an orange button. But what if the teal button is our default and anytime we use it without the prop we want to go ahead and tell it that it should be teal?
I’m going to come back in and we’re going to implement a default prop. We can say default and we’re just going to give that a string of teal and when we save that you can see that when we don’t pass any prop in like with this middle button it renders out this teal prop. So now we have a prop for our color and we have a default set for it. But one problem with using a string prop is that technically people can pass in a value that’s not supported. If we come back and look here I could pass in for the second component color red and they would never know that that’s not an accepted value. The color wouldn’t show up on the front end but they wouldn’t get any type of error either. Here’s where prop validation comes in handy.
We can come within our prop definition and set up a validator and pass out a function which accepts one argument: value, which is the value of the prop. Then we want to check if the prop’s value matches one of the specified values that are allowed. So we’re going to say: if value equals equals equals, so if the value is equal to teal, or value is equal to orange then we’ll return true that this is a valid prop value, otherwise, we’ll return false… this is not a valid prop value.
Now if we come to look at our console here we’ll see that we get an error when this is evaluated: invalid prop custom validator check failed for prop color. So it’ll throw an error telling us that we passed in a color prop that is not accepted. This is useful for scenarios like this where you’re allowing the users of your component to pass in string values as props but you need to make sure that they pass in allowed values only.