Почему мой CSS Tailwind не интерпретирует цвета? ⇐ CSS

[Anonymous]

Я делаю свои первые шаги в Tailwind CSS, и поэтому вопрос, который я собираюсь задать, может показаться довольно простым, но на самом деле я не могу преодолеть проблему, которую, очевидно, должно быть довольно просто решить.< /p>
После установки Tailwind без использования каких-либо библиотек или фреймворков я провел несколько тестов, чтобы адаптироваться к этому новому способу написания CSS, но у меня возникли проблемы с добавлением цветов в целом, как для фона, так и для фона. цвета и цвета текста, потому что по какой-то причине они не интерпретируются при написании с помощью Tailwind.
Я думаю, проблема связана с какой-то конфигурацией, потому что тот же код при вставке на сайт Tailwind Play работает отлично, только на моем компьютере это не так.
Ниже приведены файлы, которые я использую, распечатка конечного результата, а также ссылка на проект, который я создал в CodeSandbox. так что вы можете увидеть всю настройку точно так же, как она есть на моем компьютере.
Мой код в Codesandbox
Файлы< /h1>
index.html

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

Document







TAILWIND

Just flexbox



Flexbox + Background Color



Flexbox + Text Color


TAILWIND + CSS

style="color: rgb(220 38 38); background-color: rgb(56 189 248)"
class="flex items-center justify-center"
>
Tailwind + inline CSS.

css\input.css

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

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

fonts.css

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

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap");

tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
export default {
content: ["./**/*.{html,js}"],
theme: {
fontFamily: { sans: ["DM Sans", "sans-serif"] },
},
plugins: [],
};

package.json

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

{
"name": "colors-tailwind",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"tailwindcss": "^3.3.2",
"vite": "^4.3.9"
}
}

РЕЗУЛЬТАТ
[img]https://i.sstatic .net/vEhPZ.jpg[/img]

Как видите, Tailwind работает для таких свойств, как Flexbox, но не для цветов, как цветов фона, так и цветов текста. Может кто-нибудь объяснить мне, что здесь происходит?
Еще раз напоминаю, что на случай, если осталось что-то уточнить, я оставил ссылку на проект на CodeSandbox, где такая же проблема тоже возникает.
Наконец, я уже несколько раз пытался перезапустить проект, используя инструкцию Tailwind, а также искал на этом же сайте, была ли уже проблема такого рода произошло с другими людьми. Тем не менее, для 3-й версии Tailwind я пока не нашел ответа на эту проблему.

Подробнее здесь: https://stackoverflow.com/questions/765 ... ing-colors