标签: tailwind-css

我应该如何处理作为 Tailwind 组件的响应式断点？

没有 Tailwind，我曾经将断点声明为 scss mixins：

@mixin tablet-portrait {
  @media (min-width: 700px) {
    @content;
  }
}

然后：

@include tablet-portrait {
  // whatever
}

我知道 Tailwind 具有响应式实用程序类来内联使用它，md:color-red但我需要将此断点抽象为组件，如上例所示。

我应该如何从 Tailwind 配置文件中提取 Tailwind 断点？

我试图在移动设备中隐藏 div，但我无法做到这一点，这是我的代码如下

<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right sm:hidden">
                <p>asdasd</p>
            </div>

如何在顺风中做到这一点

可以使用 Tailwind CSS 来设置 Chakra UI 组件的样式吗？

我们如何在 Tailwind CSS 中的填充上使用自定义百分比？

我的配置：

theme: {
    extend: {
      spacing: {
        '80\%': '80%', // p-80% - doesn't work
      }
    },
  },

我们可以用简单的 CSS 以旧的方式实现这一点：

.p-80\% {
   padding: 80%;
}

但理想情况下，我们也可以使用 Tailwind 来做到这一点。

有任何想法吗？

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

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

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

 <div class="bg-gradient-to-r from-cyan-500 to-blue-500 ">

。。。。

我已经尝试过上面的代码。但这是线性渐变，我想要垂直渐变。

我花了一天时间研究如何使用 Tailwind-CSS 将鼠标悬停在链接上后制作动画。这是我想要的动画，我的链接看起来像视频。 示例来自 YouTube

我尝试过使用:after，但没有成功。这是我的链接组件=> https://codepen.io/qqharry21/pen/xxPwqjQ

我希望可以学习如何修复它，并使其像 Tailwind-CSS 的视频一样工作，谢谢！

• Index.html 和 app.css 位于 /tailwindcss/... 之外
• Vite 服务器正在运行，但无法在本地主机上运行。

如何解决这个问题

我不想将index.html 放在目录tailwindcss 中。