Безголовый компонент пользовательского интерфейса не будет иметь стиля

Question

В настоящее время я играю с пользовательским интерфейсом без головы, и я не могу стилизовать ни один из компонентов. Это код в моем файле вкладок

      <template>
  <TabGroup>
    <TabList class="bg-blue-900/20 rounded-xl">
      <Tab>Products Information</Tab>
      <Tab>Find Offices Nearby</Tab>
      <Tab>Requirements</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>Content 1</TabPanel>
      <TabPanel>Content 2</TabPanel>
      <TabPanel>Content 3</TabPanel>
    </TabPanels>
  </TabGroup>
</template>

<script>
  import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'

  export default {
    components: {
      TabGroup,
      TabList,
      Tab,
      TabPanels,
      TabPanel,
    },
  }
</script>

Answer 1

Это одна из этих проблем

1. Tailwind CSS не установлен или не настроен должным образом, поэтому вы не можете использовать классы Tailwind CSS, такие как 'rounded-xl'.
2. 'bg-blue-900/20' не является встроенным классом CSS попутного ветра, поэтому либо настройте цвет в попутном ветре, либо используйте встроенные цвета, такие как 'bg-blue-400', 'bg-blue-500' и т. д.

Answer 2

Tailwindcss v2.1 представил режим JIT, который генерирует стили по запросу.

Вам нужно включить режим jit, чтобы использовать такие классы, как bg-blug-900/20.

Вы можете увидеть, как это сделать в официальном документе