Update the Tailwind setup

[trey]

• [ ] 1. Use standard CSS @layers
• [ ] 2. Use theme instead of @apply
• [ ] 3. Adjust hover settings
• [ ] 4. Minimize output?

1.

Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project | CSS-Tricks

2.

https://twitter.com/adamwathan/status/1559250404977917954

The theme function is much simpler, much more predictable, and adds that tiny bit of necessary friction to make you ask yourself:

Am I extracting this because I need to or because I want to make things “cleaner”?

https://tailwindcss.com/docs/functions-and-directives#theme

3.

https://twitter.com/leeerob/status/1590871034382946304

TIL that @tailwindcss can automatically strip hover styles for mobile devices. No more desktop styles affecting taps!

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}