tailwindcss-shadow-fill

🎨 TailwindCSS utilities to override background fill color using shadow.

Usage no npm install needed!

<script type="module">
  import tailwindcssShadowFill from 'https://cdn.skypack.dev/tailwindcss-shadow-fill';
</script>

README

🎨 tailwindcss-shadow-fill

npm version GitHub license

Add TailwindCSS utilities to override background fill color using box-shadow that is compatible with core TailwindCSS plugins, is especially useful to style autocompleted form fields with tailwindcss-autofill because background-color won't work.

Install

yarn add tailwindcss-shadow-fill

Or if you use npm:

npm i --save tailwindcss-shadow-fill

Usage

Add to plugins in your tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    require("tailwindcss-shadow-fill"),
    // Other plugins.
  ],
  variants: {
    extend: {
      shadowFill: ["dark"], // Enable variants.
    },
  },
};

Style your components shadow-fill-{color}, e.g. shadow-fill-gray-100, shadow-fill-gray-200, shadow-fill-red-500, etc.

<input className="shadow-fill-white dark:shadow-fill-black" />

Requirements

  • Node.js 12+

  • TailwindCSS 2


Made by @phuctm97.