Add this plugin to your project:

# Install via npm
npm install --save-dev tailwindcss-important

# Install via yarn
yarn add tailwindcss-important --dev

Adding variants through plugins is currently an experimental feature in tailwind and requires version 0.6.2 or higher.

The important plugin exposes an important variant for you to use by prepending ! to your class names: !text-white !bg-black

require('tailwindcss-important')()

textColors: ['responsive', 'hover', 'important'],

If you're using purgecss, you'll want to update your TailwindExtractor to include !.

content.match(/[A-Za-z0-9-_:!\/]+/g) || [];