问题标签 [tailwind-css]

当用户在模式之外单击时，我试图自动关闭模式。当用户在模态中单击时，我确实希望模态保持打开状态，但是我遇到了一些问题（它不会工作）。

目前，如果我单击屏幕上的任何位置，模式将关闭。这个模态是用 tailwind css 和http://jquerymodal.com/构建的

我的模态代码：

我的 jQuery 来处理模态：

尝试使用包含 TailwindCSS 的 webpack 设置 Vuejs 项目。我一直在遵循 Jerrie 的博客文章 ( https://www.jerriepelser.com/blog/using-tailwindcss-with-vuejs/ ) 以及亚当在 github 上的示例 ( https://github.com/adamwathan /vue-cli-tailwind-example）。但是在构建我的 main.css 文件时，我一直遇到问题。

我的步骤：

1.) 创建一个 Vue 项目 -

2.) 然后我运行 NPM install -

随着我的 Vue 项目设置，我一直在尝试添加 Tailwind，但遇到了一些困难。

3.) 安装 Tailwind NPM -

4.）然后添加我的配置文件 -

这就是我遇到问题的地方...

5.) 创建一个 CSS 文件 -

6.) 然后我输入我的 main.css 文件并添加 -

从这里我的文本编辑器返回错误“at-rule unknown”，这阻止我更新对我的 .postcssrc.js 文件进行最后润色。

任何反馈将不胜感激！

谢谢
-MB

我希望早午餐输出两个单独的 CSS 文件，基本上是这样的：

但我希望他们两个都使用不同的顺风配置文件。目前我只有文档所说的：

但这当然会使两个 css 文件都使用相同的顺风配置。

早午餐有解决方案吗？

我使用 Tailwind CSS https://codepen.io/SuddenlyRust/pen/zaMBoW关注 Pen

我左边的项目符号点不会设置相同的宽度。我给了它们 2.5rem 的宽度，但浏览器计算了两者的不同宽度（以 px 为单位）。有人知道我如何正确对齐所有内容。因为当我有一个长列表时，我想将文本居中对齐。或者也许有更好的解决方案来解决这个问题？

我目前有一个 vue 组件，用于选择要订购的饮料。您可以增加或减少每种类型的饮料量。

有 2 个按钮（增量和减量），当该类型的订购饮料数量等于 0 时，需要隐藏减量按钮。这可以通过使用设置css 属性:class="drink.amount > 0 ? 'visible':'invisible'"的 tailwind 类轻松完成。visibility:hidden使用此方法时，它看起来像：

现在我尝试实现 css 动画（滑动饮料块下方的按钮以隐藏它，然后从 dom 中隐藏）。我想使用 vue 转换组件来实现这一点，因为它在整个应用程序中被大量使用。

现在我遇到的问题是 vue 转换组件仅适用于有限数量的 vue 函数，其中v-if和v-show. v-if从 dom 中删除 html。v-show设置属性display:none这两个函数都具有移动按钮的效果：

我想知道如何使用 vue 过渡组件并在没有动画的情况下获得请求的对齐按钮。

以及随附的脚本。

最后是css：

作为当前的解决方法，我删除了转换组件，添加了transition-slide-right-enter-active类，如果计数 == 0，我有条件地添加transition-slide-right-enter类。这不会隐藏元素，但不需要隐藏它，因为我在中心块下方移动。

无论如何，我无法让这个导航栏正确折叠。我需要在响应模式下将导航栏从 flex 中更改出来，但它目前无法正常工作。

HTML：

JavaScript 代码：

我该如何解决这个问题？

我已经尝试使用 Tailwindcss 创建一个应用程序，但我有以下错误：

我正在使用https://github.com/nuxt-community/create-nuxt-app来生成应用程序。

我试过更换包裹，但我得到了

我可以安装新软件包但不能删除它们。

• 版本：“^1.0.1”
• 操作系统：Windows7

运行以下命令后（通过 npm 脚本或全局 purgecss 安装）

purgecss -c ./purgecss.config.js

我明白了：

错误：加载配置文件时出错找不到模块'/D:\userdata\myusername\myapp/purgecss.config.js'

任何帮助表示赞赏，谢谢！

我正在尝试为使用 TailwindCSS 构建的静态站点设置 webpack。我正在尝试使用 PurgeCSS 制作我的 css 文件并删除任何未使用的东西，但我不相信它正在工作。它将无错误地编译，但 css 文件为 16kb，并且 Google lighthouse 审计说有未使用的 css。

webpack.config.js

包.json

任何帮助将不胜感激！

我想创建这种布局：

想要布局

我想使用流行的实用 css 框架“Tailwindcss”来实现这一点。有人知道如何进行吗？任何方向都会帮助我。

我确信这种结构是可能的，但我找不到任何东西。

此外，数据被拉出数据库并以如图所示的数字顺序到达。

非常感谢您抽出宝贵时间！