Skip to content

rodgco/tailwindcss-invalid-variant-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Invalid Variant Plugin

The invalid CSS selector is usefull for highlighting input errors that requires user attention. With this plugin you can use the invalid variant selector with Tailwind as you normally do with the "hover" & "focus" selectors.

Requirements

This plugin requires Tailwind CSS 1.2 or later.

Installation

npm install tailwindcss-invalid-variant-plugin

or

yarn add tailwindcss-invalid-variant-plugin

Usage

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "invalid"],
    borderColor: ["responsive", "hover", "focus", "invalid"],
  },
  plugins: [require("tailwindcss-invalid-variant-plugin")],
};

Don't forget to include it in the variants you want to use. I'd recommend to take a look at the ones that already serve "hover" & "focus" variants.

Now you should be able to use it in your code, as any other pseudo-class.

<input
  type="email"
  class="invalid:border-red-500 invalid:bg-red-100 invalid:border-t-2 p-1 bg-indigo-100 border-indigo-500 border-b-2 focus:outline-none"
/>

CONTRIBUTING

  • ⇄ Pull requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.

About

Tailwind CSS that adds the invalid pseudo-class variant

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published