问题标签 [tailwind-css]

我注意到 Tailwindcss 中的 :hover 使用默认的悬停选择器，这会导致移动设备上的“卡住”悬停状态。有没有办法修改 :hover 函数来代替 @media(hover:hover) ？

我是tailwindcss的新手，我想在我的新项目中同时使用sassy css和tailwind。但是当我使用“@apply”时，我特别遇到了嵌套问题。

红色适用于所有 li，但最后一个孩子（灰色）不起作用。我不确定这是否可能

我通过使用 tailwind 实用程序和 tailwind 指令来提取帮助组件，但是当我尝试将 text-md @apply text-md 应用于组件时，我收到此错误：

@apply不能与 with 一起使用，.text-md因为.text-md要么找不到，要么它的实际定义包括一个伪选择器，如 :hover、:active 等。

错误情况下的代码图像

结果没有 .text-md 实用程序错误情况下的代码图像

现在，我应该怎么做才能解决它？

我正在 Vue 上创建一个自定义选择组件，并使用 tailwind 对其进行样式设置。

我想让一个 chevron-down caret svg 向右对齐，单击它会打开选​​择选项。我遇到了一些麻烦。

这就是它的样子，但是单击时的 svg 不会打开下拉列表。

有什么建议么？

我目前正在开发 Rails 6 应用程序并制作表单。我想将表单放在页面中间。我使用 Tailwindcss 来设置页面样式。但是当我添加它时，如果移动到页面的右侧，它不会居中。

这是表单的样子：

有任何想法吗？

我已经组装了 ember、postcss 和 tailwind 的香草组合，对于我的生活，我无法理解为什么这段代码有效。

对于带有 postcss 和 tailwind 的通用 ember 应用程序：

然后在 ember-cli-build 中配置 postcss：

最后在 app.css 中：

同样，奇怪的是这行得通。

谁能解释为什么这些指令有效？以及它们是如何粘在一起的？

我有一个包含以下内容的部分：

ACard看起来像这样：

这一切的结果是这样的：

如您所见，尽管我遵循了Tailwind 文档关于网格间距的说明，但这些卡片仍然相互接触。我已经尝试添加标签ml-2，<article>但这只会导致过早地包装元素并留下太多空间。

我在这里做错了什么以及如何在卡片之间添加间隙？谢谢！

我在一个网站上工作（我第一次使用tailwind CSS），我为导航栏捕获并调整了一些代码。

在这里查看它：-已编辑

导航栏在桌面上对我来说看起来很棒，在移动设备的下拉菜单上，除了我想让菜单下拉到英雄内容的顶部，而不是向下推。

我写 CSS 已经有一段时间了，但我认为部分问题可能与我在当前版本中使用 flexbox 的方式有关。我的记忆让我觉得我必须对position: absolute&进行一些调整position: relative，但我不知道我需要在这里做什么：/

有什么想法/建议吗？

我已经使用 Webpacker 设置了一个新的 Rails 应用程序，并添加了 Tailwind 和 Stimulus 作为依赖项。

当我使用默认生成器创建刺激控制器时，它似乎使用 .es6：

app/javascript/packs 中的所有 javascript 示例似乎也使用 .es6：

但是，webpacker 环境文件 tailwind.config.js 等似乎使用了 CommonJS：

和

我正在寻找解释为什么这两种口味。我可以（并且应该）标准化其中一个吗？

一些相关的问题：如果我将所有资产切换到 webpacker，是否可以完全删除 app/assets 文件夹，或者是否应该遵循“卸载”过程（删除 gem 等）？

将鼠标悬停在来自浏览器的自动完成建议上时，我无法弄清楚如何增加或如何使用预览文本的默认字体大小。

我对所有样式都使用https://tailwindcss.com/。

例如：

这是我输入一些文本后具有默认字体大小的正常输入元素：

这是当我将鼠标悬停在建议的自动完成项目之一时预览的字体大小：

如您所见，字体大小比第一张图片小得多。

我已经在使用一些 CSS 片段来禁用所有特定于浏览器的样式：

最后一个属性font-size什么都不做。

我使用以下 css 作为输入字体大小：

我还尝试将字体大小分配为内联样式来修复它，但效果不佳：

现场示例：https ://codesandbox.io/s/o766kp4z05 使用示例并尝试在电子邮件字段中输入您的电子邮件并查看字体大小。字体大小也有同样的问题。

是否可以修复字体大小？