TailwindCSS：自己的响应式 class

Question

I'm working with TailwindCSS and I created entity like this:

@layer screens {
  @responsive {
    .flex-row-around {
      @apply flex flex-row justify-around;
    }

    .flex-col-around {
      @apply flex flex-col justify-around;
    }
  }
}

I've generated stylesheet and now I'm trying to use it:

<div class="flex-col-around md:flex-row-around">
  ...
</div>

But my styles are not added. What is done wrong?

Answer 1

TailwindCSS does not have a screens layer. Looks like you're trying to create a new utility, in which case you'd want to use the utilities layer.

@layer utilities {
  @responsive {
    .flex-row-around {
      @apply flex flex-row justify-around;
    }

    .flex-col-around {
      @apply flex flex-col justify-around;
    }
  }
}

Here's the docs for reference:

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

---

PS If you want to use the new just-in-time compilation, it will generate the responsive utilities automatically without needed to specify them. This feature is currently experimental, but I have been using it in production for a few months now without issue.

@layer utilities {
  .flex-row-around {
    @apply flex flex-row justify-around;
  }

  .flex-col-around {
    @apply flex flex-col justify-around;
  }
}

https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode