vue.js - 无头 UI 组件不会采用样式

Question

我目前正在玩 Headless UI，我似乎无法为任何组件设置样式。这是我的标签文件中的代码

<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 未正确安装或配置，因此您无法使用诸如“rounded-xl”之类的 Tailwind CSS 类。
2. 'bg-blue-900/20' 不是内置的顺风 CSS 类，因此要么自定义顺风颜色，要么使用内置颜色，如 'bg-blue-400'、'bg-blue-500' 等

Answer 2

Tailwindcss v2.1 引入了按需生成样式的 JIT 模式。

您需要启用 jit 模式才能使用诸如bg-blug-900/20.

你可以在官方文档中看到如何做到这一点