Add support for "tailwind" function to look up config values

src/generators/backgroundColors.js

@@ -1,10 +1,9 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import normalizeColorList from '../util/normalizeColorList'
 import hoverable from '../util/hoverable'
 
-export default function ({ colors, backgrounds }) {
-  return hoverable(_.map(normalizeColorList(backgrounds.colors, colors), (color, className) => {
+export default function ({ backgrounds }) {
+  return hoverable(_.map(backgrounds.colors, (color, className) => {
     return defineClass(`bg-${className}`, {
       'background-color': color,
     })

src/generators/borderColors.js

@@ -1,12 +1,9 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import normalizeColorList from '../util/normalizeColorList'
 import hoverable from '../util/hoverable'
 
 export default function ({ colors, borders }) {
-  const borderColors = normalizeColorList(borders.colors, colors)
-
-  return hoverable(_.map(borderColors, (color, className) => {
+  return hoverable(_.map(borders.colors, (color, className) => {
     return defineClass(`border-${className}`, {
       'border-color': color,
     })

src/generators/textColors.js

@@ -1,10 +1,9 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import normalizeColorList from '../util/normalizeColorList'
 import hoverable from '../util/hoverable'
 
 export default function ({ colors, text }) {
-  return hoverable(_.map(normalizeColorList(text.colors, colors), (color, modifier) => {
+  return hoverable(_.map(text.colors, (color, modifier) => {
     return defineClass(`text-${modifier}`, {
       'color': color,
     })

src/index.js

@@ -6,8 +6,9 @@ import stylefmt from 'stylefmt'
 import defaultConfig from './defaultConfig'
 import mergeConfig from './util/mergeConfig'
 
-import generateUtilities from './lib/generateUtilities'
 import substituteResetAtRule from './lib/substituteResetAtRule'
+import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
+import generateUtilities from './lib/generateUtilities'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
 import substituteBreakpointAtRules from './lib/substituteBreakpointAtRules'
@@ -18,6 +19,7 @@ const plugin = postcss.plugin('tailwind', (options = {}) => {
 
   return postcss([
     substituteResetAtRule(config),
+    evaluateTailwindFunctions(config),
     generateUtilities(config),
     substituteHoverableAtRules(config),
     substituteResponsiveAtRules(config),

src/lib/evaluateTailwindFunctions.js

@@ -0,0 +1,12 @@
+import _ from 'lodash'
+import functions from 'postcss-functions'
+
+export default function(options) {
+  return functions({
+    functions: {
+      tailwind: function (path) {
+        return _.get(options, _.trim(path, `'"`))
+      }
+    }
+  })
+}

src/util/mergeConfig.js

@@ -1,4 +1,6 @@
 import _ from 'lodash'
+import normalizeColorList from './normalizeColorList'
+import findColor from './findColor'
 
 const configTemplate = {
   breakpoints: null,
@@ -63,7 +65,19 @@ function appendConfig(base, appends) {
   })
 }
 
+function normalizeConfigColors(config, colorPalette) {
+  const cloned = _.cloneDeep(config)
+
+  cloned.text.colors = normalizeColorList(cloned.text.colors, colorPalette)
+  cloned.borders.defaults.color = findColor(colorPalette, cloned.borders.defaults.color)
+  cloned.borders.colors = normalizeColorList(cloned.borders.colors, colorPalette)
+  cloned.backgrounds.colors = normalizeColorList(cloned.backgrounds.colors, colorPalette)
+
+  return cloned
+}
+
 export default function mergeConfig(base, other) {
   const replaced = replaceDefaults(configTemplate, base, other)
-  return appendConfig(replaced, _.get(other, 'extend', {}))
+  const config = appendConfig(replaced, _.get(other, 'extend', {}))
+  return normalizeConfigColors(config, config.colors)
 }