Component doesn't has any styles when using

What I'm using:

Use Vue CLI to create a brand new project,
Setup WindiCSS & Configure tailwind.config.js
Follow the usage of the documentation, copy the code of "LangUI Prompt Container - Rounded",
The display of the component looks weired.

So my question is: I was following the instruction and not doing anything else. Why the style was missing? Is there anything I messed up?

my tailwind.config.js

import { defineConfig } from 'windicss/helpers'

const getSizeMap = (base: number) => {
  return new Array(base)
    .fill(0)
    .map((_, index) => index)
    .reduce<Record<string, string>>(
      (spacing, num) => ({
        ...spacing,
        [num]: `${num}px`,
      }),
      {},
    )
}

const colorMap = {
  transparent: 'transparent',
  white: '#fff',
  black: '#000',
  'light-black': '#333',
  gray: '#adadad',
  'light-gray': '#f1f3f6',
  'true-gray': '#6f6f6f',
  primary: '#20bba9',
  success: '#00b365',
  warning: '#ffc300',
  danger: '#f5483b',
}

export default defineConfig({
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // 关闭 preflight
  preflight: false,
  // 覆盖默认值
  theme: {
    extend: {},
    // 使用 px 作为默认单位，而非 rem
    // @see https://tailwindcss.com/docs/customizing-spacing
    spacing: getSizeMap(1400),
    fontSize: getSizeMap(50),
    lineHeight: getSizeMap(50),
    borderRadius: getSizeMap(50),
    // 扩展 @see {@link https://windicss.org/utilities/backgrounds.html#customizing}
    backgroundColor: (theme) => ({
      ...theme('colors'),
      ...colorMap,
    }),
    textColor: (theme) => ({
      ...theme('colors'),
      ...colorMap,
    }),
    borderColor: (theme) => ({
      ...theme('colors'),
      ...colorMap,
    }),
  },
})

my index.css (use to configure tailwind components)

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

and my component container.vue (Copy via "copy" button on the website)

<template>
    <div class="prompt-container">
        <!-- Prompt Messages Container - Modify the height according to your need -->
<div class="flex h-[97vh] w-full flex-col">
  <!-- Prompt Messages -->
  <div
    class="flex-1 overflow-y-auto rounded-xl bg-slate-200 p-4 text-sm leading-6 text-slate-900 dark:bg-slate-800 dark:text-slate-300 sm:text-base sm:leading-7"
  >
    <div class="flex flex-row px-2 py-4 sm:px-4">
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/363536/ffffff&text=U"
      />

      <div class="flex max-w-3xl items-center">
        <p>Explain quantum computing in simple terms</p>
      </div>
    </div>
    <div class="mb-2 flex w-full flex-row justify-end gap-x-2 text-slate-500">
      <button class="hover:text-blue-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
          ></path>
          <path
            d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
          ></path>
        </svg>
      </button>
    </div>
    <div
      class="mb-4 flex rounded-xl bg-slate-50 px-2 py-6 dark:bg-slate-900 sm:px-4"
    >
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
      />

      <div class="flex max-w-3xl items-center rounded-xl">
        <p>
          Certainly! Quantum computing is a new type of computing that relies on
          the principles of quantum physics. Traditional computers, like the one
          you might be using right now, use bits to store and process
          information. These bits can represent either a 0 or a 1. In contrast,
          quantum computers use quantum bits, or qubits.<br /><br />
          Unlike bits, qubits can represent not only a 0 or a 1 but also a
          superposition of both states simultaneously. This means that a qubit
          can be in multiple states at once, which allows quantum computers to
          perform certain calculations much faster and more efficiently
        </p>
      </div>
    </div>
    <div class="flex px-2 py-4 sm:px-4">
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/363536/ffffff&text=U"
      />

      <div class="flex max-w-3xl items-center">
        <p>What are three great applications of quantum computing?</p>
      </div>
    </div>
    <div class="mb-2 flex w-full flex-row justify-end gap-x-2 text-slate-500">
      <button class="hover:text-blue-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
          ></path>
        </svg>
      </button>
      <button class="hover:text-blue-600" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
          ></path>
          <path
            d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
          ></path>
        </svg>
      </button>
    </div>
    <div
      class="mb-4 flex rounded-xl bg-slate-50 px-2 py-6 dark:bg-slate-900 sm:px-4"
    >
      <img
        class="mr-2 flex h-8 w-8 rounded-full sm:mr-4"
        src="https://dummyimage.com/256x256/354ea1/ffffff&text=G"
      />

      <div class="flex max-w-3xl items-center rounded-xl">
        <p>
          Three great applications of quantum computing are: Optimization of
          complex problems, Drug Discovery and Cryptography.
        </p>
      </div>
    </div>
  </div>
  <!-- Prompt suggestions -->
  <div
    class="mt-4 flex w-full gap-x-2 overflow-x-auto whitespace-nowrap text-xs text-slate-600 dark:text-slate-300 sm:text-sm"
  >
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Regenerate response
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Use prompt suggestions
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Toggle web search
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Select a tone
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Improve
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Make longer
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Explain in simple words
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Summarize in three lines
    </button>
    <button
      class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
    >
      Translate content
    </button>
  </div>
  <!-- Prompt message input -->
  <form class="mt-2">
    <label for="chat-input" class="sr-only">Enter your prompt</label>
    <div class="relative">
      <button
        type="button"
        class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-600"
      >
        <svg
          aria-hidden="true"
          class="h-5 w-5"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"
          ></path>
          <path d="M5 10a7 7 0 0 0 14 0"></path>
          <path d="M8 21l8 0"></path>
          <path d="M12 17l0 4"></path>
        </svg>
        <span class="sr-only">Use voice input</span>
      </button>
      <textarea
        id="chat-input"
        class="block w-full resize-none rounded-xl border-none bg-slate-200 p-4 pl-10 pr-20 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-800 dark:text-slate-200 dark:placeholder-slate-400 dark:focus:ring-blue-500 sm:text-base"
        placeholder="Enter your prompt"
        rows="1"
        required
      ></textarea>
      <button
        type="submit"
        class="absolute bottom-2 right-2.5 rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 sm:text-base"
      >
        Send <span class="sr-only">Send message</span>
      </button>
    </div>
  </form>
</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
    name: 'prompt-container',
    setup() {
        return {}
    }
});
</script>

<style lang="scss" scoped>
.prompt-container {
    width: 100%;
}
</style>

LangbaseInc / langui

Component doesn't has any styles when using #14