Tailwindcss: Is the class name dot optional for the @apply directive ?

[lamberttraccard]

Hi,

I noticed that the class name dot is facultative when use with the @apply directive.

.foo {@apply .text-white;} .foo {@apply text-white;}

Both are working but should we stick with the dot syntax or can we safely use both ?

[m2de]

fwiw, I prefer using the non-dot syntax.

[jameslkingsley]

Non-dot syntax is preferable imo, especially since when you extract a set of classes to components you can just copy and paste after the @apply, instead of having to add a dot in-front of each class.

[adamwathan]

We're still on the fence about what syntax we want to actively encourage. Personally, I prefer using the dot prefix because you are in a CSS file and trying to reference a class name, and in CSS class names start with dots.

The dot prefix is also more familiar for people used to using something like @extend in Less or Sass:

.error {
    @extend .text-red;
}

That said, the reason we added support for no dot prefix was the reason that was mentioned: it does make it a bit easier to paste in a class list from your HTML when extracting a component.

Even still, I'm inclined to encourage using the dot prefix because if we choose to stop supporting one of them, the no-prefix option is the one I'd expect we'd drop. If anything, maybe it would be replaced by another directive that took a form more like:

.error {
  @classes "text-red bg-red-lighter border border-red";
}

[adamwathan]

Going to close this; we don't have explicit plans to stop supporting the no-prefix option but we only plan to document the @apply .class version, so I would recommend using that syntax.

[evenfrost]

Hey @adamwathan, was looking through the docs and noticed the dots in @apply calls were removed. Does this mean that no-dot syntax is preferable now?

[adamwathan]

@evenfrost Yeah I stopped using the dot prefix myself so decided that's the one I want to encourage. Both continue to work though 👍