标签: tailwind-css

我在简单的CSS中有这样的背景：

 background: linear-gradient(152deg,#fff,#00bfd8 42%,#0083f5);

我想将它添加到 tailwind css 中：

  <section class="relative bg-[here] table w-full py-36 lg:py-44">

在我的具体情况下我想要

<div className="mx-auto"...</div>

但前提是屏幕是最小的。正在做：

<div className="sm:mx-auto"...</div>

将产生相反的影响（将小屏幕及以上的边距设置为自动）。

有什么办法可以把convert代码=> transform: translate(-50%, -50%)转成tailwindcss. 我已经搜索了 tailwindcss 文档，但没有解决方案。

我正在尝试使用 html2canvas 将 a 转换<div>为图像。然而，有一个问题。<div>红色圆圈标记内的文本Figure 1没有填充或任何引入参数的偏移量。但当转换为图像时，文本上方会出现错误间隙，如 中的红色圆圈所示Figure 2。我用过<h3>（标有黑色背景）和一个<span>（标有绿色背景）。

Figure 1

Figure 2

为什么会这样？有办法解决这个问题吗？

有没有办法使用 Tailwind 和 Next 的条件代码创建显示或可见性转换？我正在尝试这样的事情，我想要实现的是当后端在responseError对象下返回异常消息（使用Next中的Context）时平滑淡出效果，但根本没有过渡效果：

{
  responseError ?
    <span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
       username or password incorrect
     </span>
  : null
 }

或者

{
  responseError ?
    <span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
       { responseError.message }
    </span>
  : null
}

在实现角度的材料库来制作表单字段和表单字段时，我遇到了这个不寻常的用户界面问题，在实现时，表单字段中出现一条不应该发生的线。

用户界面规范：

1. 顺风CSS
2. DaisyUI（组件库）
3. 角材料

以下是我编写的代码：

<form
        [formGroup]="UserSignUp"
        (ngSubmit)="submitForm()"
        id="sign-in-form"
        onsubmit="return false"
        novalidate
      >
        <div class="form-control w-full">
          <label class="label">
            <span class="label-text font-semibold text-lg">Email</span>
          </label>
          <mat-form-field appearance="outline">
            <mat-label> Email </mat-label>
            <input
              formControlName="email"
              placeholder="Enter your email..."
              [(ngModel)]="obj.email"
              matInput
            />
          </mat-form-field>
          <mat-error
            class="mt-1"
            *ngIf="isSubmitted && errorControl['email'].errors?.['required']"
          >
            Email is required
          </mat-error>
          <mat-error
            class="mt-1"
            *ngIf="isSubmitted && errorControl['email'].errors?.['pattern']"
          >
            Invalid Email structure
          </mat-error>
        </div>
        <a routerLink="/dashboard">
          <button class="bg-primary text-white py-3 w-full rounded-lg">
            Sign Up
          </button>
        </a>
</form>

应用程序模块.ts：

  imports: [
    BrowserModule,
    AppRoutingModule,
    MatIconModule,
    BrowserAnimationsModule,
    MatFormFieldModule, …

我正在尝试更改悬停时元素的背景颜色。通常情况下，我会使用

className='bg-white hover:bg-black'

这会立即改变颜色，但我想添加 150 毫秒从颜色 A 到颜色 B 的过渡时间。

阅读文档后，我尝试了类似的方法

className='transition-colors ease-linear duration-300 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'

这没有任何作用。我混合并匹配了不同的状态等，但找不到解决方案。有人知道这个问题的快速解决方法吗？

我试过：

className='transition-colors ease-linear duration-300 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'

className='transition-[background-color] duration-300 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'

当我遇到这个问题时，我花了大约 20 分钟在这里的一篇文章中找到答案：https ://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/

我在 Stackoverflow 上浏览了很多页关于现有类似问题的过于复杂的答案

将解决方案贴在这里，方便大家快速找到答案

按照问题中提供的示例设置输入类型=“文件”按钮的样式，我尝试了一堆不太令人满意的解决方案

我尝试将输入包装在标签元素中并将显示设置为无

<label className="text-sm bg-stone-200 hover:bg-stone-300" htmlFor="fileUpload">
    <input type="file" className="hidden" id="fileUpload"/>
    Upload File
</label>

这是有效的，但是你会丢失文件名预览 - 解决方案涉及<span>在标签和隐藏输入之间放置一个并在 onChange 事件中更改 span 元素。我认为对于这样一个简单的任务来说代码太多了

我还尝试使用元素属性设置大小，<input type="file" size={60} />这显然对其他人有效，但当我尝试时没有效果

我知道在CSS中，你可以设置min-heightand max-width，但是当我尝试时，min-h-10它max-h-10在Tailwind CSS中没有做任何事情。

这就是我所拥有的：

<div class="flex-col justify-center">
    <div class="h-10 w-10 border bg-blue-300 block">
        h
    </div>
</div>

<dialog>我正在尝试在 NextJS 应用程序的 React 组件后面添加背景。我正在使用 Tailwind v3.3.2，所有其他样式都正确应用，但 的样式backdrop:bg-gray-500没有在浏览器中应用任何样式。

我编写了一个 React 组件，它呈现以下内容：

      <dialog className="backdrop:bg-gray-50" open={true}>
        This is a dialog
      </dialog>

我希望这会在元素后面添加灰色背景，但没有任何内容应用于该元素。

我浏览了 Tailwind 文档，这看起来像我尝试过的：https ://tailwindcss.com/docs/hover-focus-and-other-states#dialog-backdrops