问题标签 [tailwind-ui]

我将 TailwindUI 用于登录页面，它包含一个下拉菜单，当它展开时，如下所示：

现在，当单击“解决方案”链接时，我使用一些非常简单的内联 JavaScript 来切换不可见属性，从而使菜单出现。代码看起来像这样：

我想知道如何实现过渡效果，使菜单的切换看起来不那么突然。TailwindUI 推荐以下设置：

这样做的最佳方法是什么？

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

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

也许你知道 React 的那种“警报阻止模式”？

我正在使用 tailwind UI 创建一个非常简单的静态 html/css 网站，并遵循本教程：https ://justinjackson.ca/tailwind-ui-netlify

页眉/页脚的最佳做法是什么，所以我不需要手动复制/粘贴导航到每个页面的 html，然后在更新导航时重新复制/粘贴？我不需要完整的反应，甚至不需要 CMS，这就像网站的普通和静态一样。

正在考虑即使是可以在构建时为我添加 html 的简单构建工具也可以工作，但找不到任何东西。打开其他选项。

我是 Tailwind 的新手，我有一个视频背景页面（基于该帖子https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/），我试图添加一个模式( http://www.patternify.com/ ) 在该视频背景之上。我尝试了几种不同的方法，但所有这些方法都对背景的位置产生了奇怪的影响。

有人可以告诉我应该如何在 Tailwind 中完成吗？

I am using tailwind ui to create a page using Vue.js - v.2

I've looked over this SO thread and I believe I have my transitions in the correct spot.

When I click the menu to show the <MobileSidebar> component, everything works great. When I close the <MobileSidebar> component, the component is just removed from the screen. I do not see the sidebar "slide" off of the browser.

I'm passing the open state as a prop; emitting the status. That seems to be working fine as well.

How can I allow the transition to render before the element is hidden/removed from view?

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

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

在这里，我试图显示/隐藏一个模态对话框。背景覆盖的动画 doe 给出为

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

到目前为止，这是我尝试过的；

为了便于测试，我已将其放入代码笔中。 https://codepen.io/rishavs/pen/BadMQaN?editors=1000

当我打开一页时，我需要选择已经打开。我使用这个 tailwindcss 选择

我试过这个

道具“自动对焦”存在，但似乎不起作用。有什么建议吗？

我在使用 esbuild 的 Rails 7 上。我正在使用tailwindUI。仅使用 css 组件时它可以正常工作。当一个组件使用 JS 时，它就不再工作了。例如，下拉菜单默认打开，我无法关闭它。我在 tailwind.config.js 中添加了 require('@tailwindcss/ui')

Rails 7.0.0.alpha2 ruby​​ 3.0.2p107 "@tailwindcss/ui": "^0.7.2"

任何想法？

我正在使用 alpinejs x-for 循环构建一个按钮组，其中第一个和最后一个按钮应该有 rounded-l-md 和 rounded-r-md 使用first:rounded-l-mdand last:rounded-r-md。last:rounded-r-md工作正常，但是first:rounded-l-md不起作用，因为我认为用于循环的<template>循环被视为第一个元素。

我添加了一个 jsfiddle：https ://jsfiddle.net/20qega7d/