twitch
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.

<style>
  .focus\:yellow:focus {
    background: yellow;
  }

  .hover\:orange:hover {
    background: orange;
  }
</style>

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

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.

JavaScriptstyled-componentsreadability
Read fire tip

Read all fire tips →