Почему стили добавленные с помощью @apply в TailwindCSS не применяются?

Question

[KrisWis]

Часть кода main.css выглядит так:

@tailwind base;
@tailwind components;
.header-link {
  @apply text-gray-500 font-semibold inline-block py-3 px-2 border-b-2 border-transparent hover:text-violet-800 hover:border-violet-800;
}

И применение данного класса в index.html, написанного с помощью TailwindCSS:

<li><a class="header-link" href="#">Home</a></li>
<li><a class="header-link" href="#">About</a></li>
<li><a class="header-link" href="#">Contacts</a></li>

Но на странице, данные классы не применяются, хотя они есть в файле styles.css. В чём может быть проблема?
Мой файл package.json, если нужно:

{
  "name": "tailwindcss",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss build -i src/main.css -o public/styles.css --watch"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }
}

Answer 1

[KrisWis]

Как я и думал решение до глупости простое. В файле index.html, в строчке

<link rel="stylesheet"  href="/public/styles.css"/>

Нужно убрать первый слеш в параметре href, т.к из-за него vscode не может найти файл со стилями, чтобы вышло так: <link rel="stylesheet" href="public/styles.css"/>
Также, если у вас в коде есть такой скрипт:

<script src="https://cdn.tailwindcss.com/"></script>

то его желательно удалить для исправления проблемы.