diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css
index 3f6b21548..f057acefb 100644
--- a/__tests__/fixtures/tailwind.css
+++ b/__tests__/fixtures/tailwind.css
@@ -3714,6 +3714,11 @@ button,
   padding: 0;
 }
 
+.example {
+  font-weight: 700;
+  color: #e3342f;
+}
+
 @media (min-width: 576px) {
   .sm\:input-reset {
     appearance: none;
@@ -6842,6 +6847,11 @@ button,
     margin: 0;
     padding: 0;
   }
+
+  .sm\:example {
+    font-weight: 700;
+    color: #e3342f;
+  }
 }
 
 @media (min-width: 768px) {
@@ -9972,6 +9982,11 @@ button,
     margin: 0;
     padding: 0;
   }
+
+  .md\:example {
+    font-weight: 700;
+    color: #e3342f;
+  }
 }
 
 @media (min-width: 992px) {
@@ -13102,6 +13117,11 @@ button,
     margin: 0;
     padding: 0;
   }
+
+  .lg\:example {
+    font-weight: 700;
+    color: #e3342f;
+  }
 }
 
 @media (min-width: 1200px) {
@@ -16232,4 +16252,9 @@ button,
     margin: 0;
     padding: 0;
   }
+
+  .xl\:example {
+    font-weight: 700;
+    color: #e3342f;
+  }
 }
diff --git a/css/tailwind.css b/css/tailwind.css
index c78103bc0..6d8093496 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -1,3 +1,10 @@
 @tailwind reset;
 
 @tailwind utilities;
+
+@responsive {
+    .example {
+        @apply .font-bold;
+        color: config('colors.red');
+    }
+}
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
index 711e4c6e8..c89e246ee 100644
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/src/lib/evaluateTailwindFunctions.js
@@ -4,7 +4,7 @@ import functions from 'postcss-functions'
 export default function(options) {
   return functions({
     functions: {
-      tailwind: function (path) {
+      config: function (path) {
         return _.get(options, _.trim(path, `'"`))
       }
     }