title: How to add custom drop-shadow with linear-gradient in tailwind css?
body: <p>I am finding a way to add custom drop-shadow with linear-gradient in tailwind CSS. On looking the docs I found this</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]&quot;&gt;
  </code></pre>
  <p><a href="https://tailwindcss.com/docs/drop-shadow" rel="nofollow noreferrer">over here</a></p>
  <p>But I want to use a <code>linear gradient</code> in place of a simple color.</p>
  <p>I tried this</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;drop-shadow-[0_0px_5px_linear-gradient( to right, #ffffff , #fffacc)]&quot;&gt;
  </code></pre>
  <p>I also tried to change <code>taiwind.config.js</code> like below</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    content: [
      &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    theme: {
      extend: {
        dropShadow: {
          'xl' : '0px 0px 5px linear-gradient( to right, #ffffff , #fffacc)'
        } 
      },
    },
    plugins: [],
  }
  </code></pre>
  <p><strong>But both methods are not working.</strong></p>
  <p>What am I  missing?</p>