Streaming on Twitch twice a week

Creating state-selectors in utility-first CSS

utility-first CSS

Want to create state-prefixed CSS classes that only apply on hover, focus, or other states? Repeat that same pseudo-selector at the end of your selector.

  .focus\:yellow:focus {
    background: yellow;

  .hover\:orange:hover {
    background: orange;

<button class="focus:yellow hover:orange">
  Yellow on focus, orange on hover

More fire tips

Namespacing styled-components

To improve the readability of React components, we can import the styled-components they use from another file under a ui-namespace.

Read fire tip

Read all fire tips →