logoalt Hacker News

progx • today at 9:09 AM • 2 replies • view on HN

if you don't like this.

  .button {
      @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700;
  }
why not write it like this?

  .button {
    @apply
      py-2
      px-4
      bg-indigo-500
      text-white
      font-semibold
      rounded-lg
      hover:bg-indigo-700
      focus:bg-indigo-700
    ;
  }

Replies

progx • today at 9:12 AM

Or:

  .button {
    padding: var(--gap-s) var(--gap-m);
    background-color: var(--color-indigo);
    color: var(--color-white);
    font-weight: 700;
    border-radius: var(--gap-s);
    &:hover, &:focus {
        background-color: var(--color-indigo-hover);
    }
  }
Fair comparison (i really don't like this too):

  .button { padding: var(--gap-s) var(--gap-m); background-color: var(--color-indigo); color: var(--color-white); font-weight: 700; border-radius: var(--gap-s);    &:hover, &:focus { background-color: var(--color-indigo-hover); } }
;-)
progx • today at 9:16 AM

"Nothing stops you from using sky-400 and blue-400 in the same project. Consistency still depends on your discipline, not on the framework."

And how did plain css solve that? You're mixing up a few issues there.