Skip to content

🎨 TailwindCSS utility to override background fill color using shadow.

License

Notifications You must be signed in to change notification settings

phuctm97/tailwindcss-shadow-fill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎨 tailwindcss-shadow-fill

npm version GitHub license

TailwindCSS utility to override background fill color using box-shadow, is especially useful to style autocompleted form fields with tailwindcss-autofill because background-color won't work.

Requirements

  • Node.js 12+

  • TailwindCSS 2+

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.
  ],
};

Style your components using 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" />

Contributing

Requirements

  • Node 12+

  • Yarn 1.22+

Setup

  1. Install requirements

  2. Clone the repository

  3. Run yarn to install dependencies

Develop

  • Commit adhering to Angular commit convention, use yarn commit or Code conventional commits to commit interactively

  • Submit a PR and make sure required status checks pass

  • When a PR is merged or code is pushed to master, Github automatically builds and publishes a new release if there're relevant changes

Author