标签: tailwind-ui

我尝试使用文档中提到的琥珀色和石灰色等颜色。这些颜色不起作用。只有具有原色名称（例如红色、粉色）等名称的颜色才有效。

无效的颜色：琥珀色、翠绿色、石灰色、玫瑰色、紫红色、板岩色、锌色，甚至橙色。

我使用的是 2.26 版本，但我使用 Tailwind Playground 检查了 1.9 到 2.25 之间的版本，但这些颜色仍然不起作用。即使在操场上，也不建议使用这些颜色名称。

为什么我不能使用这些颜色？

我的问题很简单...我在我的应用程序中使用 HeadlessUI 的 Dialog 组件进行 React，当我单击模式时我希望它不会关闭。在文档中，有对话框。处理此交互的覆盖参数，但没有设置可以禁用它。

有什么解决办法吗？这是我正在使用的组件的 HeadlessUI 文档的链接：https://headlessui.dev/react/dialog

也许你知道 React 的“警报阻塞模式”是什么？

我无法打开 2 份披露文件中的其中一份。

下面附上的是试图实现这一目标的内容，当我添加该static道具时，它会无限期地保持打开状态。

我刚刚开始使用 Headless UI。我正在尝试使用 Headless UI 中的 Disclosure 组件来呈现我的工作体验。基本上，我需要“n”个将动态呈现的披露，并且每当打开一个披露时，其他披露就应该关闭。

我能够动态地呈现披露，并且它们都有各自的状态。（打开/关闭披露不会影响其他披露）。我想做的就是一次只公开一项披露。打开另一项披露应关闭所有剩余的披露。我已经浏览了他们的文档，但找不到一起管理多个披露状态的方法。

这是我的代码：

    import React, { useContext } from "react";
    import { GlobalContext } from "../data/GlobalContext";
    import { Tab, Disclosure } from "@headlessui/react";
    import ReactMarkdown from "react-markdown";

    const Experience = () => {
      const { data } = useContext(GlobalContext);
      const expData = data.pageContent.find(
        (content) => content.__component === "page-content.experience-page-content"
      );

      return (
        <div className="container h-screen">
          <div className="flex h-full flex-col items-center justify-center">
            <h3 className="">{expData.pageTitle}</h3>
            <div className="flex min-h-[600px] flex-col">

              {expData.jobs.map((job, i) => (
                <Disclosure …

我已经为我的 React 应用程序安装了 React-Bootstrap 和 Tailwind。我在使用它们时遇到了一些冲突。所以我想卸载顺风。

我正在尝试学习如何使用 Tailwind 动画。我正在绝望地尝试制作的动画是：

Entering: "duration-200 ease-out"
  From: "opacity-0 scale-95"
  To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
  From: "opacity-100 scale-100"
  To: "opacity-0 scale-95"

我想要设置动画的元素是：

 <div class="absolute top-0 inset-x-0 p-2 duration-200 ease-out transition transform origin-top-right">

现在我不太确定到底要做什么，因为这个动画应该只在我尝试显示时才运行：

<div class="absolute top-0 inset-x-0 p-2 duration-200 
ease-out transition transform origin-top-right" style="${this.showMenu ? '' : 'display:none'}">

然而，这并没有真正给我一个动画结果。接下来我可以尝试什么？

我对 tailwinds bg opacity 背后的 CSS 很好奇。我只能在纯 CSS 中找到“不透明度”，但这会影响所有内容而不仅仅是背景。有人可以解释一下吗？

我正在尝试使用示例 tailwindui.com 组件。他们在注释中定义了动画部分，但我无法弄清楚我应该如何在代码中定义这些部分。我正在使用纯 html/js，并且不希望为此使用任何框架/lib。

在这里我试图显示/隐藏模式对话框。背景叠加层的动画效果如下

 <!--
      Background overlay, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    --> 

我不知道如何将此信息编码到背景覆盖 div 中。

<div id="myModal" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <!--
      Background overlay, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 …

我正在尝试设置 Tailwind 3，但我收到了下一个警告。

No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.

这是我的项目结构

|_public : 
 |_index.html , 
 |_output.css  // this css file generated after i run the command | npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
|_src
 |_input.css

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],

  theme: {
    extend: {},
  },
  plugins: [],
}

我在 React 中构建了一个应用程序，我从 Tailwind UI 中获得了这个下拉菜单，该下拉菜单在单击事件时打开，我也希望在鼠标悬停时打开它。

<Menu as="div" className="relative inline-block text-left ">
    <div>
      <Menu.Button className="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-offset-gray-100">
        Features
        <ChevronDownIcon
          className="-mr-1 ml- h-5 w-5"
          aria-hidden="true"
        />
      </Menu.Button>
    </div>

    <Transition
      as={Fragment}
      enter="transition ease-out duration-100"
      enterFrom="transform opacity-0 scale-95"
      enterTo="transform opacity-100 scale-100"
      leave="transition ease-in duration-75"
      leaveFrom="transform opacity-100 scale-100"
      leaveTo="transform opacity-0 scale-95"
    >
      <Menu.Items className="absolute left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
        <div className="py-1">
          <Menu.Item>
            {({ active }) => ( …