Проблемы с настройкой приложения динамических шрифтов в Angular с помощью Tailwind ⇐ CSS

[Anonymous]

Я столкнулся с проблемой при попытке динамически установить шрифт для всего приложения на основе выбора пользователя в проекте Angular с Tailwind CSS. fonts-not-applied.png
Руководство, которому я следовал при настройке Tailwind с помощью Angular:
Установите CSS Tailwind с помощью Angular
И вот что я сделал на данный момент:
В моем Tailwind.config.js я настроил шрифты следующим образом:

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

module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
fontFamily: {
'sans': ['Inter', 'sans-serif'],
'serif': ['Lora', 'serif'],
'mono': ['Inconsolata', 'monospace']
},
...rest of the config

Кроме того, я импортировал необходимые шрифты Google в свой файл style.css:

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap");

Несмотря на проверку того, что классы Font-Sans, Font-Mono или Font-Serif были правильно применены в DOM, Tailwind, похоже, игнорируйте настройки семейства шрифтов. Однако если я применю семейство шрифтов непосредственно к элементу, используя статический класс, например class="font-mono", оно будет работать так, как ожидалось.
Что может быть причиной этой проблемы и как Могу ли я решить эту проблему, чтобы динамически применять семейство шрифтов на основе выбора пользователя? Будем очень признательны за любые идеи и предложения.

Подробнее здесь: https://stackoverflow.com/questions/781 ... h-tailwind