User defined custom css functions and theme() default value

src/lib/evaluateTailwindFunctions.js

@@ -1,14 +1,18 @@
 import _ from 'lodash'
 import functions from 'postcss-functions'
 
-export default function(config) {
+export default function(config, postcssFunctions = []) {
   return functions({
     functions: {
       theme: (path, ...defaultValue) => {
         return _.thru(_.get(config.theme, _.trim(path, `'"`), defaultValue), value => {
+          if (value.hasOwnProperty('default')) {
+            return value.default
+          }
           return Array.isArray(value) ? value.join(', ') : value
         })
       },
+      ...postcssFunctions,
     },
   })
 }

src/plugins/backgroundColor.js

@@ -2,9 +2,9 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
+      _.map(flattenColorPalette(config('theme.backgroundColor')), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {

src/plugins/backgroundPosition.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('backgroundPosition'), (value, modifier) => {
+      _.map(config('theme.backgroundPosition'), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {

src/plugins/backgroundSize.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('backgroundSize'), (value, modifier) => {
+      _.map(config('theme.backgroundSize'), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {

src/plugins/borderColor.js

@@ -2,8 +2,8 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const colors = flattenColorPalette(theme('borderColor'))
+  return function({ addUtilities, e, config, variants }) {
+    const colors = flattenColorPalette(config('theme.borderColor'))
 
     const utilities = _.fromPairs(
       _.map(_.omit(colors, 'default'), (value, modifier) => {

src/plugins/borderRadius.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (value, modifier) => ({
         [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
@@ -33,7 +33,7 @@ export default function() {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(theme('borderRadius'), (value, modifier) => {
+      return _.flatMap(config('theme.borderRadius'), (value, modifier) => {
         return generator(value, modifier === 'default' ? '' : `-${modifier}`)
       })
     })

src/plugins/borderWidth.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (value, modifier) => ({
         [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
@@ -15,7 +15,7 @@ export default function() {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(theme('borderWidth'), (value, modifier) => {
+      return _.flatMap(config('theme.borderWidth'), (value, modifier) => {
         return generator(value, modifier === 'default' ? '' : `-${modifier}`)
       })
     })

src/plugins/boxShadow.js

@@ -2,9 +2,9 @@ import _ from 'lodash'
 import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('boxShadow'), (value, modifier) => {
+      _.map(config('theme.boxShadow'), (value, modifier) => {
         const className =
           modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}`
         return [

src/plugins/container.js

@@ -23,8 +23,8 @@ function extractMinWidths(breakpoints) {
 }
 
 module.exports = function() {
-  return function({ addComponents, theme }) {
-    const minWidths = extractMinWidths(theme('container.screens', theme('screens')))
+  return function({ addComponents, config }) {
+    const minWidths = extractMinWidths(config('theme.container.screens', config('theme.screens')))
 
     const atRules = _(minWidths)
       .sortBy(minWidth => parseInt(minWidth))
@@ -44,11 +44,13 @@ module.exports = function() {
       {
         '.container': Object.assign(
           { width: '100%' },
-          theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
-          _.has(theme('container', {}), 'padding')
+          config('theme.container.center', false)
+            ? { marginRight: 'auto', marginLeft: 'auto' }
+            : {},
+          _.has(config('theme.container', {}), 'padding')
             ? {
-                paddingRight: theme('container.padding'),
-                paddingLeft: theme('container.padding'),
+                paddingRight: config('theme.container.padding'),
+                paddingLeft: config('theme.container.padding'),
               }
             : {}
         ),

src/plugins/cursor.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('cursor'), (value, modifier) => {
+      _.map(config('theme.cursor'), (value, modifier) => {
         return [
           `.${e(`cursor-${modifier}`)}`,
           {

src/plugins/fill.js

@@ -2,9 +2,9 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(flattenColorPalette(theme('fill')), (value, modifier) => {
+      _.map(flattenColorPalette(config('theme.fill')), (value, modifier) => {
         return [
           `.${e(`fill-${modifier}`)}`,
           {

src/plugins/flex.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('flex'), (value, modifier) => {
+      _.map(config('theme.flex'), (value, modifier) => {
         return [
           `.${e(`flex-${modifier}`)}`,
           {

src/plugins/flexGrow.js

@@ -1,10 +1,10 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     addUtilities(
       _.fromPairs(
-        _.map(theme('flexGrow'), (value, modifier) => {
+        _.map(config('theme.flexGrow'), (value, modifier) => {
           const className = modifier === 'default' ? 'flex-grow' : `flex-grow-${modifier}`
           return [
             `.${e(className)}`,

src/plugins/flexShrink.js

@@ -1,10 +1,10 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     addUtilities(
       _.fromPairs(
-        _.map(theme('flexShrink'), (value, modifier) => {
+        _.map(config('theme.flexShrink'), (value, modifier) => {
           const className = modifier === 'default' ? 'flex-shrink' : `flex-shrink-${modifier}`
           return [
             `.${e(className)}`,

src/plugins/fontFamily.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('fontFamily'), (value, modifier) => {
+      _.map(config('theme.fontFamily'), (value, modifier) => {
         return [
           `.${e(`font-${modifier}`)}`,
           {

src/plugins/fontSize.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('fontSize'), (value, modifier) => {
+      _.map(config('theme.fontSize'), (value, modifier) => {
         return [
           `.${e(`text-${modifier}`)}`,
           {

src/plugins/fontWeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('fontWeight'), (value, modifier) => {
+      _.map(config('theme.fontWeight'), (value, modifier) => {
         return [
           `.${e(`font-${modifier}`)}`,
           {

src/plugins/height.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('height'), (value, modifier) => {
+      _.map(config('theme.height'), (value, modifier) => {
         return [
           `.${e(`h-${modifier}`)}`,
           {

src/plugins/inset.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(prefixNegativeModifiers('inset', modifier))}`]: {
@@ -31,7 +31,7 @@ export default function() {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(theme('inset'), generator)
+      return _.flatMap(config('theme.inset'), generator)
     })
 
     addUtilities(utilities, variants('inset'))

src/plugins/letterSpacing.js

@@ -2,9 +2,9 @@ import _ from 'lodash'
 import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, theme, variants, e }) {
+  return function({ addUtilities, config, variants, e }) {
     const utilities = _.fromPairs(
-      _.map(theme('letterSpacing'), (value, modifier) => {
+      _.map(config('theme.letterSpacing'), (value, modifier) => {
         return [
           `.${e(prefixNegativeModifiers('tracking', modifier))}`,
           {

src/plugins/lineHeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('lineHeight'), (value, modifier) => {
+      _.map(config('theme.lineHeight'), (value, modifier) => {
         return [
           `.${e(`leading-${modifier}`)}`,
           {

src/plugins/listStyleType.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('listStyleType'), (value, modifier) => {
+      _.map(config('theme.listStyleType'), (value, modifier) => {
         return [
           `.${e(`list-${modifier}`)}`,
           {

src/plugins/margin.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` },
@@ -26,7 +26,7 @@ export default function() {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(theme('margin'), generator)
+      return _.flatMap(config('theme.margin'), generator)
     })
 
     addUtilities(utilities, variants('margin'))

src/plugins/maxHeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('maxHeight'), (value, modifier) => {
+      _.map(config('theme.maxHeight'), (value, modifier) => {
         return [
           `.${e(`max-h-${modifier}`)}`,
           {

src/plugins/maxWidth.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('maxWidth'), (value, modifier) => {
+      _.map(config('theme.maxWidth'), (value, modifier) => {
         return [
           `.${e(`max-w-${modifier}`)}`,
           {

src/plugins/minHeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('minHeight'), (value, modifier) => {
+      _.map(config('theme.minHeight'), (value, modifier) => {
         return [
           `.${e(`min-h-${modifier}`)}`,
           {

src/plugins/minWidth.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('minWidth'), (value, modifier) => {
+      _.map(config('theme.minWidth'), (value, modifier) => {
         return [
           `.${e(`min-w-${modifier}`)}`,
           {

src/plugins/objectPosition.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('objectPosition'), (value, modifier) => {
+      _.map(config('theme.objectPosition'), (value, modifier) => {
         return [
           `.${e(`object-${modifier}`)}`,
           {

src/plugins/opacity.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('opacity'), (value, modifier) => {
+      _.map(config('theme.opacity'), (value, modifier) => {
         return [
           `.${e(`opacity-${modifier}`)}`,
           {