Shared Components

[00:00 - 00:13] The creators of Tailwind encourage us to use shared components in our framework rather than shared CSS classes for sharing styling. And I generally think that this is a good idea.

[00:14 - 00:23] And if you've done any sort of React development, you know perfectly well what a component is and how to write them because that's pretty much what React is all about. So I won't go into any details about that.

[00:24 - 00:37] But I will just share with you one utility function that I use in almost every project that I work on that is front end related. So this button for instance is just a native HTML button with some utility classes on it.

[00:38 - 00:42] And we can use my little helper function instead called. So let me just create it here.

[00:43 - 00:57] It's called make styled component of TSX and I will just go through it quickly. So it's a higher order component or more specifically it's a function that creates components.

[00:58 - 01:01] I guess any higher order component is that. So it's a little bit of a misleading name.

[01:02 - 01:12] Anyway, it takes two parameters. So it takes an element which is basically which type of element is this that you were overriding and you will use a string for that.

[01:13 - 01:21] So it will be the string button in the case that I just suggested. And then it will have an array of predefined class names.

[01:22 - 01:29] And that is basically just an array of strings. And what it does is it bakes these predefined class names into this component.

[01:30 - 01:44] But you can still give it a class names property and it will just combine those . So basically it returns create element with class name that is the combined classes and then whatever other properties you might have specified on it.

[01:45 - 01:53] And it will give it the display name styled button or whatever you created. So that is basically what it does and it's a very trivial little thing.

[01:54 - 02:11] So let's try and use that instead of our button. So we will create some buttons first and I will create a new file here called buttons.

[02:12 - 02:28] And the reason why I'm not using uppercase is that this is something that exports multiple buttons and so it's not actually the name of the export. So in this file I'm using the make style component and I'm creating two buttons here.

[02:29 - 02:34] A primary and a secondary button. So you can see the first parameter it takes is which element it should be.

[02:35 - 02:48] And then after that you can just specify and I said array before but obviously this is an array. It's just that you can specify an arbitrary number of class names afterwards.

[02:49 - 03:13] So here we have first these classes that we will use for both buttons and then specifically the primary button will have the indigo color whereas the secondary button will have the gray color and then there's some disabled and outline styles that just look nice and you can look into those if you want. But we'll just take these as they are right now.

[03:14 - 03:32] So if we go into our choose type page here and find the choose time button here we can now replace this with a primary button. And import this.

[03:33 - 03:37] Did I say everything? It looks like I did.

[03:38 - 03:55] And if we look now you can see that there's a little change when I hover over it and if I tap to it it will have a nice outline. So this is now our primary button and in my opinion this is a nice way to style native elements.

[03:56 - 04:07] Note that you could still add class name here and you could add additional utility classes if you want. One thing to be aware of though is that it's using CLSX underneath.

[04:08 - 04:15] You can see it here. So obviously CLSX isn't tailwind aware so to say.

[04:16 - 04:32] So if you use if you have a pre-baked margin of two and you specify a margin of four as your class name afterwards the behavior is undefined at least to the best of my knowledge. There's no override in the order of things and some tailwind utility classes conflict with each other.

[04:33 - 04:45] So what happens then is not well defined. So that is a little thing to keep in mind and I think those class combination libraries that I spoke of before are better at handling that sort of situation.

[04:46 - 05:11] But as I said I have no experience with those yet so I can't speak to it completely. [ Silence ]