You can also add responsive state-based styles to an element. This means you can do things like changing an element's hover style at different breakpoints for example.
To apply a responsive state-based style, first add the state prefix, then the responsive media prefix, followed by the property:value convention. Example:
<h1 class="color:black hover:md:color:red"></h1>
In this example, the heading element has a base color of black, and will change its color to red on hover for medium-sized screens and above only.
The following table lists all supported element states:
|Focus||Focused input element|
|Disabled||Disabled input element|
|Checked||Checked input element|