如何在 tailwind css 中添加带有线性渐变的自定义投影？

Question

我正在寻找一种在 tailwind 中添加带有线性渐变的自定义投影的方法 CSS。在查看文档时，我发现了这个

<div class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]">

over here

但我想用 linear gradient 代替简单的颜色。

我试过了

<div class="drop-shadow-[0_0px_5px_linear-gradient( to right, #ffffff , #fffacc)]">

我也试过像下面这样改变taiwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      dropShadow: {
        'xl' : '0px 0px 5px linear-gradient( to right, #ffffff , #fffacc)'
      } 
    },
  },
  plugins: [],
}

但是两种方法都不行。

我错过了什么？

Answer 1

在 CSS 中使用渐变作为投影颜色是不可能的。

检查此 Tailwind Play 以获得实现此目的的解决方案

<!--
  before:bg-gradient-to-*
  Gradient's direction

  before:from-*
  Gradient's start color

  before:via-* (optional)
  Gradient's via color

  before:to-* (default: transparent)
  Gradient's end color

  To use custom gradient stops:
  Don't use before:from-*, before:to-*, and before:via-*.
  Change the Tailwind gradient stops variable.
  For example: [--tw-gradient-stops:red,blue,deeppink_80%]

  before:left-*
  Shadow's horizontal offset

  before:top-*
  Shadow's vertical offset

  before:blur-*
  Shadow's blur
-->

<div class="
  w-56
  h-56
  bg-white
  relative
  before:absolute
  before:w-full
  before:h-full
  before:-z-10
  before:bg-gradient-to-r
  before:from-[#ffffff]
  before:to-[#fffacc]
  before:left-0
  before:top-0
  before:blur-[5px]
"></div>

如何在 tailwind css 中添加带有线性渐变的自定义投影？

How to add custom drop-shadow with linear-gradient in tailwind css?

html

css

tailwind-css

linear-gradients