Какой подход использовать с общими стилями при использовании служебных классов CSS? ⇐ CSS

[Anonymous]

Я изучаю подход к использованию утилиты CSS, применив Tailwind CSS в своем проекте. Я повторно использовал их демо-шаблон для формы входа и сразу заметил (потенциальный) недостаток:

Код: Выделить всё

 setEmail(e.target.value)}
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6" />



 setPassword(e.target.value)}
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6" />

Этот код вызывает очевидные проблемы при копировании кода. Если бы я хотел, например, изменить все углы для каждого ввода в моем приложении на нескругленные, мне пришлось бы найти каждый экземпляр rounded-md и удалить его.
Я склоняюсь к использованию CSS «классическим» способом и очень хочу добиться эффекта «когда вы начнете использовать служебные классы, вы не захотите возвращаться к использованию обычного CSS». Пока это выглядит немного обескураживающе, но я стараюсь непредвзято относиться к этому подходу.
Итак, вопрос в том, каков правильный подход к использованию служебных классов CSS, чтобы Я могу добиться стандартизированного вида различных компонентов в моем приложении, но при этом не сталкиваюсь с проблемой копирования и вставки кода?

Подробнее здесь: https://stackoverflow.com/questions/791 ... ty-classes