Form Improvements

[00:00:00]
>> So we had this one issue before, which I just think is just a not an us issue. I think it is more of a either IntelliSense slash TypeScript issue slash whatever issue, which is, we do know that we could take a color and do that slash syntax to get opacity of it, so like doing slash 30.

[00:00:20]
However, despite the fact that I had never tried to do slash current and then it had at one point recommended, you can do one of these, these aren't real. When you try it for the very first time live streaming you get embarrassed by things. But the syntax for a color and during that slash to get the opacity is very real, just not on current, right.

[00:00:46]
And it makes sense to me because if you look at what the slash 30 does, is it takes that hex value makes it an RGB a and puts a 0.3. And I don't know how you would do current which is not like if you check out big current that is literally a CSS property right that is a CSS thing that you couldn't make an RGBA because it's a value.

[00:01:16]
So I think tailwind maybe the types of the IntelliSense thought I could do it but it couldn't. So that's however, I could theoretically set a VGA opacity to 60 and get the same effect, right? But I do need to do it in two statements in this case, right?

[00:01:34]
So we all learned that together the hard way, not my favorite way to learn about a Edge cases and bugs and the frameworks that I use but you know we're here for it. Cool, so we talked about a lot of these and like I will leave most of these as an exercise to the reader there are even more than this as well.

[00:01:53]
And like I said, there are other ones that are not related to stuff like form state, right? There is first of type, like a bunch of the other pseudo selectors from CSS. Roughly speaking, if it is in CSS, it is in Tailwind with one caveat, which is, if it is really in CSS, right, if it has wide browser support.

[00:02:17]
There are certain things we're going to see a little bit later that you can't technically do, not because Tailwind can't do them but because like browser support isn't there, so tailwind chooses not to do them. Could one either build a plugin and some post CSS and or make some choices around it?

[00:02:35]
Absolutely, and while we're talking about like, yeah, at least community plugins in this case, right, we can say, if we go to the tailwind site we go to the docs. There have been and are in the past official plugins. And a lot of these official plugins are ones that use polyfills.

[00:02:57]
Like container queries I think now has support. And aspect ratio I believe was in there at one point as well. But now it's got wide enough support it can actually can rely on the CSS. So a lot of times for things that are kind of their thing, they're very much like we see in JavaScript and TypeScript with decorators.

[00:03:15]
Right, where it's like there are things that once they hit stage three, it's maybe okay to polyfill them because the spec isn't gonna change but they don't have the wide browser support yet. So in those cases, if one needed, the latest and greatest future CSS stuff, then, theoretically some combination of perhaps a post CSS plugin and or a TypeScript or tailwind plugin would get you there too.

[00:03:44]
But with all that stuff, there's a certain level of risk involved, right, and so, yeah. So we've got all of these like I said, some of them will show up later. Some of them I'm going to leave as, like, an exercise for the reader, is it really worth our time to get into the details of styling something, an indeterminate checkbox?

[00:04:01]
Probably not, right? You can take a lucky guess what out-of-range and in-range does on a range slider, all right. These are all things they again these are not they we get tailwind variants for them so we can use them but they are effectively just the same as the pseudo class, right?

[00:04:18]
If you want to know how to use them what they do. That said, there are a bunch of little things that we can do, that again are all CSS effectively, they're just things that Tailwind tends to make really easy for us. And so we use some very simple variants when we were still on our form before, but we still have some little weirdities.

[00:04:44]
If I scroll in, you can kinda see that I get like the kind of MacOS glow around my input field which looks a little bit weird and, I will say that over the years, MacOS has toned it down a little bit, right. I am old enough to remember when my calendar app smells of rich mahogany and looks like fine leather bound volumes.

[00:05:11]
And so that's the amount. And I actually have mine set to graphite, so you might have a little more of a bluey hue to yours. And maybe we don't want that, right? And so we can switch it to outline none. And you can see my border changes color a little bit on this one.

[00:05:26]
Cuz I have, if you look, I've got some of these variants. I've got border purple and I've got I got focus where we make it a little bit darker. So focus is when it's focused, right? And doing that outline, none will get rid of the OS level like colors and stuff along those lines.

[00:05:46]
And so if you want something where you kind of looks more like you want, you've got some little niceties that you can bring in there as well. There's also the ring set of classes as well. And so this gives you the outline none will allow you to take it away.

[00:06:00]
And then ring kind of gives you something kind of similar where I can set it to purple on focused and see it in there as well. So, you can kind of get a little bit more custom the way you want as well. We've got the disabled ones. They can't be focused.

[00:06:17]
So I can leave the focus class on there and not worry about it. Like we saw before, because I was changing the opacity on hover, opacity on disabled and background color on hover, but these are now going for the same things. You cannot focus a disabled field. So I can build up this stack of classes.

[00:06:33]
And again, it's nice especially if you're using it in like something like JSX or svelte or view because you then you can look at the component see everything very clearly of what's going on and change it all like kind of in one place. And you don't end up like because we're just working regulation now there will be times where I make the same change to four input fields.

[00:06:54]
That's a place where if I didn't have a framework, I might put it in that components layer or that utilities. I'll be very honest with you, the most of the impetus of why I do these days is when I'm sharing styles between our Svelte app and our React app.

[00:07:09]
Generally speaking, if I was just in one of those it doesn't come up for me as much, right? So if that kind of makes you feel a little, I don't know about that, don't worry about it, you'll be okay. If you need it, you know you need it.

[00:07:24]
So we can also sell the placeholder text. And again, this all becomes super easy, right? And because a lot of times in CSS, sometimes the property names get some really like funky names that is really hard to remember it is kind of having a little bit of a reset on naming conventions because like CSS is old.

[00:07:42]
So it was JavaScript. And having a little bit of a reset there makes life easier. So here I can actually style, the kind of kind of color of the placeholder text as well. And there are a few other things you can do. And again, I would just encourage you in these situations, you can do stuff like, [SOUND] input here, that's the check box.

[00:08:05]
Let's, we're playing around some other stuff. There was a question of like, can you group a bunch of the variants? And we found a blog post, it made it seem like you could, but it was one of those wish list blog posts, so you can't. But we looked it up, and so that said, could one theoretically put some plugins together?

[00:08:27]
Perhaps, should you? I don't know. So with place holder, no space. There we go. You can kind of see it looks mostly for the point we've got all the colors. I don't think there's a lot more you can do with it in terms of the text we'll talk about groups appears in a little bit those are super cool.

[00:08:47]
But yeah and they also the caret, so that's the it's kind of hard to see these days but I can style the actual blinking cursor as well. So I can a little things that they kind of make things a little bit nicer, right, and they're all very very easy to do the other one that I really like is this accent, right, and so now it'll be purple instead of gray on mine or blue by default on MacOS I think you can change it to other colors now.

[00:09:14]
Mine's always been gray forever. But yeah, you can do these access to the carets and the placeholders and the rings. And it's very easy to like just string these together and have them in place. And they kind of, I think, add that little extra layer that also works on a radio button as well.

[00:09:28]
And then you can do interesting things we saw on that list before like invalid, right? So this is an email, and so now if there's something in there and it's not valid, we can have it turn red, so on and so forth. And this is it's always a little like squirrely though because theoretically that's the email is fine on that one.

[00:09:54]
If I put something not valid, it'll work. It's required ones become interesting because they they're instantly invalid insofar that they're empty so you have to begin to string it together. So there's there's stuff you can do along those lines. You can also change the cursor, all right, very easily.

[00:10:12]
If you look here it is simply disabled cursor not allowed. And again, with the IntelliSense the nice part is you don't really have to look anything up, right. If I wanted to change the cursor to something else, right, and I can do it on basically any DOM node, not just an input.

[00:10:29]
That's just where we've done it so far, usually the right answer at that point is just say, cursor and I can see all the various different options that I have. I look for other fun ones that I thought might be nice to do but honestly, they were all the most straightforward one is not allowed.

[00:10:49]
Or if you wanna have something that is acting like a button and give it thought of clicky finger, stuff along those lines. Nobody really appreciates too much innovation in changing their cursor on them, right? So I'll show you how to do it, but please don't get carried away.

[00:11:05]
Technically, there's no reason why you couldn't do it. But as somebody who might use your app, please don't.