Lesson 14 of 21 · Styles
Style conditions
A prefix applies a utility in one state: hover:, focus-visible:, or a width such as md:. A condition in braces uses a value: {active}:bg-$accent.A group applies one prefix to more than one utility: hover:(underline opacity-0.8).An enum selects a set of utilities: {tone}:{ warm: bg-$warning, cold: bg-$accent, }.Your turn
- Add {selected}:font-700 to the Button.
- Add hover:opacity-0.8 to the Button.
Preview
1 error
The sandbox needs a browser.