标签: tailwind-in-js

因此，我正在使用 tailwindCSS 构建一个小型项目，并考虑实现黑暗模式。我制作了一个按钮并将其映射以将dark类放入 html 标记中。经过一番测试后，我意识到切换看起来有点奇怪，因为它是瞬时发生的。有没有办法将过渡持续时间或计时函数应用于此更改？

这是我处理更改的基本逻辑（我也使用 vue）：

<template>
  <!-- <span class="material-icons">&#xE51C;&#xE518;</span> -->
  <input @click="darkClassToggle" id="toggle" class="toggle" type="checkbox" />
</template>

<script>
export default {
  name: "darkModeToggle",
  methods: {
    darkClassToggle() {
      const toggle = document.querySelector(".toggle");
      const html = document.firstElementChild;
      if (toggle.checked) {
        html.classList.remove("dark");
      } else {
        html.classList.add("dark");
      }
    },
  },
};
</script>

感谢您的任何帮助

我最近升级了 Next.js 应用程序中的 Tailwind 版本，结果，一些事情变得不稳定。我注意到，对于具有该type="text"属性的输入字段，当它们聚焦时，它们的边框现在会更改为不同的颜色（我从未分配过这种颜色）。在升级 Tailwind 之前，当文本输入字段悬停并聚焦时，边框颜色保持不变。有趣的是，这种情况不会发生在我的任何其他不包含该type="text"属性的表单字段上。如果有人能解释为什么会发生这种情况以及我如何解决这个问题，我将非常感激。

这是悬停在文本输入字段上时的图像： 悬停在文本输入字段上（预期）

这是该文本输入字段聚焦时的图像： 聚焦时的文本输入字段（意外）

我正在使用带有 TailwindCSS 的 Laravel Jetstream。我已经根据我对项目的一些要求修改了一些 config.js 文件（webpack、tailwind 等）。出于某种原因，当我编译 running 时npm run dev，它将配置所有颜色（例如，bg-red-100, bg-red-200, bg-red-300...），但是当我在生产 ( npm run production) 中编译时，它缺少一些 ( bg-red-100, bg-red-400, bg-red-500...)。

webpack.mix.js：

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as …

如您所知，Tailwind 是一种非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我怎么能这样做？

我决定发布并回答我自己的问题，因为这是我最近在 Angular 社区看到的一个非常受欢迎的问题

我有一个表达式，用于查找表单错误并在出现冒泡时附加一个 div：

{touched && normalizedError && (\n      <div className="visible alert-error text-xs text-red-500" role="alert">\n        {normalizedError}\n      </div>\n    )}\n

我想重构它并始终在我的输入元素下方显示 div，但使用该类invisble对用户隐藏它们，除非返回错误\xe2\x80\x94，在这种情况下，我将有条件添加该类visible。

实现这一目标的最佳方法是什么？