fix: add !important only to modifiers

fixes a specificity issue where you couldn't override an existing class, like when passing `text-base` to a component that already has `text-sm`

src/generators/tailwindcss.js

@@ -8,6 +8,22 @@ const {requireUncached} = require('../utils/helpers')
 const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
+const addImportantPlugin = () => {
+  return {
+    postcssPlugin: 'add-important',
+    Rule(rule) {
+      const shouldAddImportant = get(rule, 'raws.tailwind.layer') === 'variants'
+      || get(rule, 'parent.type') === 'atrule'
+
+      if (shouldAddImportant) {
+        rule.walkDecls(decl => {
+          decl.important = true
+        })
+      }
+    }
+  }
+}
+
 module.exports = {
   compile: async ({css = '', html = '', config = {}}) => {
     // Compute the Tailwind config to use
@@ -43,7 +59,6 @@ module.exports = {
       './src/components/**/*.html'
 
     const tailwindConfig = merge({
-      important: true,
       content: {
         files: [
           layoutsPath,
@@ -105,6 +120,7 @@ module.exports = {
     const toProcess = [
       postcssNested(),
       tailwindcss(tailwindConfig),
+      get(tailwindConfig, 'important') === false ? () => {} : addImportantPlugin(),
       get(config, 'shorthandCSS', get(config, 'shorthandInlineCSS')) === true ?
         mergeLonghand() :
         () => {},

test/stubs/tailwind/add-important.html

@@ -0,0 +1,6 @@
+sm:block
+hover:sm:flex
+hover:opacity-50
+[&_p]:mt-4
+[@media(any-hover:hover){&:hover}]:uppercase
+[border:0]

test/test-tailwindcss.js

@@ -114,12 +114,12 @@ test('uses custom postcss plugins from the maizzle config', async t => {
 
   const css = await Tailwind.compile({
     css: '.test {transform: scale(0.5)}',
-    html: '<div class="test inline">Test</div>',
+    html: '<div class="test">Test</div>',
     config
   })
 
   t.not(css, undefined)
-  t.is(css.trim(), '.inline {display: inline !important} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
+  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })
 
 test('respects `shorthandCSS` in maizzle config', async t => {
@@ -184,3 +184,42 @@ test('works with custom `components.root`', async t => {
 
   t.true(css.includes('.flex'))
 })
+
+test('adds `!important` to selectors that will not be inlined', async t => {
+  const css = await Tailwind.compile({
+    config: {
+      build: {
+        tailwind: {
+          config: {
+            content: ['./test/stubs/tailwind/*.html']
+          }
+        }
+      }
+    }
+  })
+
+  t.true(css.includes('display: block !important'))
+  t.true(css.includes('display: flex !important'))
+  t.true(css.includes('opacity: 0.5 !important'))
+  t.true(css.includes('margin-top: 1rem !important'))
+  t.true(css.includes('text-transform: uppercase !important'))
+
+  t.false(css.includes('border: 0 !important'))
+})
+
+test('respects `important: false` from tailwind config', async t => {
+  const css = await Tailwind.compile({
+    config: {
+      build: {
+        tailwind: {
+          config: {
+            important: false,
+            content: ['./test/stubs/tailwind/*.html']
+          }
+        }
+      }
+    }
+  })
+
+  t.false(css.includes('display: block !important'))
+})