‫Next up we're gonna take a look
‫at element states such as "hover", "disabled", or "focus".
‫And we will also implement CSS transitions,
‫and we will do all this
‫while styling some links and buttons.
‫So here in the cart page,
‫so up here we have this link.
‫And now I want to style this here a little bit.
‫So make it blue, like a usual link.
‫And then when we hover it, I want to make it a bit darker.
‫So that's something pretty straightforward.
‫And so let's learn how to handle that hover state
‫in Tailwind.
‫So let's come here to the cart page.
‫And so here we already have that link.
‫And so now we just have to add some more classes.
‫So first let's make the text smaller.
‫So text small, and then let's also make the text blue.
‫So a blue 500 like this.
‫And now let's implement the hover state.
‫And it's as simple as now writing "hover,"
‫and then here writing another class name,
‫which will then replace the other one.
‫So in case we are hovering, we want text blue 600.
‫And so this is where it becomes really handy
‫to have all these different color variations
‫built right into Tailwind.
‫But anyway, let's now try this.
‫And indeed, notice that there is a subtle color change.
‫So as I hover, it becomes this kind of bluer blue.
‫So here we can see it really nicely with this dark color.
‫Okay,
‫so basically with the "hover" prefix,
‫we can write or define any classes that we want to appear
‫in the hover state.
‫So for example, we can also use "underline".
‫And so as you can expect,
‫then the link will also get underlined.
‫And here of course, the color is 600.
‫And yeah, so this is how we define hover,
‫or how we handle the hover state.
‫So this was just a very simple example.
‫And so next up, let's style a more complex button.
‫So let's come here again to "order/new".
‫And now we want to style this "order now" button right here.
‫So let's close this,
‫and then in "create order," this is where our button is.
‫Yeah, right here.
‫And let's start here with some basic stuff.
‫So let's give it the same background color
‫as the rest of the app.
‫So, yellow 400.
‫And actually I think that here I used 500,
‫but I'm looking for 400 actually.
‫So 500 is a bit too dark.
‫Yeah, that looks nicer,
‫and so let's keep going.
‫So let's make the text also uppercase.
‫Let's make the font semibold.
‫Let's make the text also darker,
‫since we are now on this yellow background.
‫And so remember that our gray is stone.
‫And then let's use the 800 variation.
‫And finally, let's add some paddings here.
‫So vertically, let's use three
‫and horizontally, let's use four.
‫And in order for this to actually take effect
‫we need to make this button an inline-block.
‫So that's "display:inline-block."
‫And the corresponding Tailwind class
‫is just "inline-block" like this.
‫All right, so this is already looking pretty nice.
‫Let's just add maybe some letter spacing there.
‫And we can really place this anywhere we want
‫because the prettier extension
‫will then take care of ordering this.
‫So tracking, let's choose this one.
‫And then finally, let's also give it some rounded corners.
‫So that's a new class that we haven't talked about yet,
‫but it's very simple.
‫So we just specify rounded here,
‫and then we can use
‫these different values that we have here.
‫For example, "rounded large," which will give us
‫I think it is eight pixels.
‫Yeah, but actually what we want is "rounded full."
‫So this pill shape button here that many applications use.
‫And so this basically gives us
‫a really really large border radius like this.
‫Okay, and so with this basic styling in place,
‫let's now add some element states.
‫Starting again with "hover."
‫So when we hover,
‫this time we want to make the background a bit lighter.
‫So let's go 100 down, make it yellow 100,
‫or not 100, 300 actually.
‫And so, let's see.
‫And indeed that works.
‫However, there is no transition here, so no animation,
‫which usually we also have in most web applications.
‫And so let's now add that transition here in Tailwind.
‫And the way that we do this is to do "transition"
‫and then the properties
‫that we actually want to be transitioned.
‫So many times when we write normal CSS, we just do all.
‫So we can do this,
‫but let's be a bit more specific
‫because we already know
‫that only the color should be animated.
‫And so we can then specify "transition colors" like this.
‫So this is already going to work.
‫Nice.
‫But if we want to specify also the duration,
‫we can do so with "duration"
‫and then dash whatever milliseconds that we want.
‫So let's say 300 milliseconds, and beautiful.
‫But now, notice what happens when I click on this button.
‫Well, for now here we get, of course, these problems.
‫Well, first of all,
‫let's actually deactivate all of this here.
‫So I don't want anything to happen.
‫So when I click on that button,
‫I don't want to create a new order,
‫because now all I want to do is to style this.
‫So now here we get the wrong phone number.
‫So let's fix this.
‫And well, this is not what I wanted.
‫So let's go back.
‫And what I wanted to show you
‫in the first place was actually the focus state here.
‫So let's just do it this way.
‫So hitting the "tab" key to reach this button.
‫So here we have this really ugly looking blue outline,
‫and so we don't want that.
‫And so, let's get rid of it.
‫In here, let's just quickly
‫and temporarily fix that error that we had earlier,
‫which was that we wasn't returning anything here.
‫So let's at least return null.
‫So we will just remove that a bit later.
‫So in order to remove that ugly focus there,
‫we can do "focus," so the focus state,
‫and then here, "outline-none."
‫However, we cannot just leave it like this
‫because this will create some accessibility issues.
‫And so we need to do something else.
‫So in this focus state, instead of having this outline,
‫we can use something that Tailwind created,
‫which is what they call a ring.
‫So a ring, as we can see here, is basically some shadows
‫that they will place outside the element.
‫So this creates this ring.
‫And then we also need to define the color of the ring.
‫So again, that's within the focus state.
‫So all of this should only happen
‫when the element is focused,
‫and so we need to prefix all of this
‫always with this "focus" word.
‫So let's make it the same color as the button already has.
‫So that's yellow 300, at least in the focused state
‫because actually when we focus the button,
‫we also want the entire background color
‫to change to that yellow,
‫so yellow 300.
‫And so now watch what happens when we focus.
‫Now we still cannot really see it,
‫because we forgot the offset.
‫So focus, ring offset, and let's set it two.
‫Ah, nice.
‫So this is looking a lot better than before, right?
‫So that ugly blue outline is gone.
‫And so now if we use the tab key to reach this element,
‫then this is what the focus state looks like.
‫So this looks quite nice, and so we achieved this
‫by using this Tailwind concept of rings.
‫And again, you can learn all about that
‫here in the documentation.
‫So again, when the button is focused
‫we give it this yellow background color
‫which is the same one as the hover one.
‫So this one here.
‫And then we remove the outline and give it this ring.
‫And here we could also specify some values
‫to make it a larger ring.
‫And then here we give the ring a color and an offset.
‫So a space between the ring and the element itself.
‫Okay.
‫Next up, we could also use the "active" state.
‫So which is basically the state
‫whenever the button is being clicked.
‫So this one we are not interested in here,
‫but I just want to show you something.
‫So just let's say we give it another color,
‫and so as I click, it will get that new color.
‫Okay, but now finally what we actually want to do,
‫is to also style the disabled state.
‫So in the disabled state, we want to change the cursor.
‫So we can use a cursor class.
‫So "cursor," and then let's use the "not allowed."
‫And again, just make sure to check out
‫the documentation to find out
‫which cursors can be used.
‫So here, let's just temporarily set this to true
‫so we can see.
‫And so now as we hover, we can no longer click it
‫and we get this visual confirmation of that.
‫So this new cursor right there.
‫And of course we could do all other kinds of stuff.
‫So for example, again, changing the background color
‫to something like this.
‫But let's remove this because I think like this,
‫this is already more than enough.
‫All right.
‫So this is by far the biggest element that we wrote yet.
‫So the biggest class name string.
‫But don't worry,
‫if we later want to reuse this button,
‫we will be just able to create a new component
‫and then use that component
‫and reuse it all over the application.
‫But let's leave that for a bit later,
‫and next up, talk about styling form elements.
‫So like these input fields right here.