[Tailwind UI] - Providing global classes extracted via @apply

[jeanmatthieud]

Currently, each component uses a lot of classes to define each type of component (inputs, labels, buttons...)
It means that if I want to change the style of the "input" for example, I need to update every page of my website.

Could you provide each UI component with global styles for reusability ?
eg.

.ui-kit input {
  @apply appearance-none;
  @apply block;
  @apply w-full;
  @apply px-3;
  @apply py-2;
  @apply border;
  @apply border-gray-300;
  /* ... */
}

Doing so will allow us to copy / paste the global styles once, and edit them quite easily.

[simonswiss]

Hey @jeanmatthieud 👋

While doing so would remove some of the duplication on your HTML markup, this would most likely lead to duplication somewhere else.

There is a good explanation of this starting at the 5:50 mark in this video:

https://tailwindcss.com/course/composing-utilities-with-apply

Of course you can personally benefit from abstracting specific elements with @apply, but I don't think this is something we will provide in Tailwind UI.

There are other ways to abstract away repetition (template partials, components).

By the way, if you choose to use @apply, in your example above you don't need to repeat @apply with each utility, but can combine all of them within a single @apply declaration:

.ui-kit input {
  @apply appearance-none block w-full px-3 py-2 border border-gray-300;
  /* ... */
}