标签: tailwind-ui

我正在尝试在我的 vue 2 项目中插入 headless ui popover 。我遇到这个错误

Uncaught TypeError: Object(...) is not a function
    at eval (headlessui.esm.js?d511:670)
    at Module../node_modules/@headlessui/vue/dist/headlessui.esm.js (chunk-vendors.js:23)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Navigations/Navbar.vue?vue&type=script&lang=js&:5)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Navigations/Navbar.vue?vue&type=script&lang=js& (app.js:998)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Navbar.vue?7538:1)
    at Module../src/components/Navigations/Navbar.vue?vue&type=script&lang=js& (app.js:2161)

我的代码看起来像这样。

  <div v-if="isLoggedIn" class="flex space-x-2">
      <NotificationCenter />
      <Popover class="relative">
    <PopoverButton>Solutions</PopoverButton>

    <PopoverPanel class="absolute z-10">
      <div class="grid grid-cols-2">
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </div>
    </PopoverPanel>
  </Popover>
    </div>

在脚本内部，我像往常一样导入并添加了组件。

import { Popover, PopoverButton, PopoverPanel } …

我将 TailwindCSS 与 DaisyUI 结合使用（通过 CDN）。

使用DaisyUI Dropdown时，有什么方法可以更改下拉项的颜色吗？这包括下拉列表本身的背景颜色，然后将鼠标悬停在项目上（CSS：hover），然后单击它（CSS：active）。

（点击时）

到目前为止，我已经能够更改下拉列表本身以及悬停时的背景颜色。

<div class="dropdown">
    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
        <p class="text-medium">Testing</p>
    </div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
        <li class="rounded hover:bg-gray-300 dropdown-active">
            <a href="page-one.html">Protecting your privacy</a>
        </li>
    </ul>
</div>

当单击列表颜色（CSS 活动）时，我似乎无法获取：

.dropdown-active:active {
   background-color: #0B6339 !important; 
}

因此，我花了一段时间尝试隐藏网站某些页面中的导航和页脚组件，但遗憾的是没有运气。我在 Stackoverflow 上尝试了多种解决方案，其中只有一种通过创建一个新的布局组件然后将其放入路由中来部分工作，然后从登录页面中排除页脚和导航。但问题是它有效，但在主页上它只显示页脚和导航，中间没有像我在主页中所做的设计那样。

对我有用的唯一解决方案是创建 和 就像我在示例中所做的那样，但是我无法排除某些页面并将它们隐藏在那里......

这是它目前的样子，但不起作用：

import React from "react";
import Home from ".//Pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./Pages/Dashboard";
import Login from "./Pages/Login";
import Price from "./Pages/Price";
import ErrorPage from "./Pages/ErrorPage";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Profile from "./Pages/Profile";

function App() {
  return (
    <Router>
      <nav>
        <Navbar />
      </nav>

      <Routes>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Login" element={<Login />} />
        <Route …

我有 4 行，每行三个按钮。

《顺风》播放链接

我想要的是

当我单击第一行中 3 个按钮中的任意一个时，然后单击下一行中 3 个按钮中的任意一个，然后单击这些行中的任意一个按钮，然后单击最后两行。

所有单击的按钮都应保持突出显示。

我怎样才能在顺风CSS中实现这一点。

我的研究

我已经搜索并找到了focused状态，但是一旦我单击第二行中的任何按钮，突出显示的内容就会消失在前一行中选择的按钮中。

我的代码

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-6">
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login21</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login22</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login23</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login31</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login32</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login33</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button …

我正在使用 Tailwind CSS 和 Tailwind UI。我想使用此页面上的第一个导航栏。上面说的Requires JS。Tailwind 默认提供 JavaScript 吗？如果是这样，我应该导入或使用哪个文件？