无头 UI 组件不会采用样式答案

【问题标题】：Headless UI component will not take style无头 UI 组件不会采用样式
【发布时间】：2021-11-22 21:58:00
【问题描述】：

我目前正在使用 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>

【问题讨论】：

标签： vue.js vite headless-ui

【解决方案1】：

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

您需要启用 jit 模式才能使用 bg-blug-900/20 这样的类。

你可以在official doc看到如何做到这一点

【讨论】：

【解决方案2】：

这两个问题中的任何一个

Tailwind CSS 未正确安装或配置，因此您无法使用诸如“rounded-xl”之类的 Tailwind CSS 类。
'bg-blue-900/20' 不是内置的顺风 CSS 类，所以要么在顺风中使用customize color，要么使用内置颜色，如 'bg-blue-400'、'bg-blue-500' 等

【讨论】：