Added Prefix Selector support via important config

src/lib/substituteClassApplyAtRules.js

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
+import increaseSpecificity from '../util/increaseSpecificity'
 
 function buildClassTable(css) {
   const classTable = {}
@@ -85,6 +86,8 @@ export default function(config, generatedUtilities) {
                 () => findClass(classToApply, classLookup, onError),
                 () => findClass(classToApply, shadowLookup, onError),
                 () => findClass(prefixSelector(config.prefix, classToApply), shadowLookup, onError),
+                // prettier-ignore
+                () => findClass(increaseSpecificity(config.important, classToApply), shadowLookup, onError),
                 () => {
                   // prettier-ignore
                   throw onError(`\`@apply\` cannot be used with \`${classToApply}\` because \`${classToApply}\` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${classToApply}\` exists, make sure that any \`@import\` statements are being properly processed *before* Tailwind CSS sees your CSS, as \`@apply\` can only be used for classes in the same CSS tree.`)

src/util/increaseSpecificity.js

@@ -0,0 +1,3 @@
+export default function(importantVal, selector) {
+  return `${importantVal} ${selector}`
+}

src/util/processPlugins.js

@@ -6,6 +6,7 @@ import generateVariantFunction from '../util/generateVariantFunction'
 import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
 import wrapWithVariants from '../util/wrapWithVariants'
+import increaseSpecificity from '../util/increaseSpecificity'
 
 function parseStyles(styles) {
   if (!Array.isArray(styles)) {
@@ -55,7 +56,11 @@ export default function(plugins, config) {
           }
 
           if (options.respectImportant && _.get(config, 'important')) {
-            rule.walkDecls(decl => (decl.important = true))
+            if (config.important === true) {
+              rule.walkDecls(decl => (decl.important = true))
+            } else if (typeof config.important === 'string') {
+              rule.selector = increaseSpecificity(config.important, rule.selector)
+            }
           }
         })