diff --git a/packages/postcss-colormin/src/__tests__/index.js b/packages/postcss-colormin/src/__tests__/index.js
index 52b65c621..e1c8b326b 100644
--- a/packages/postcss-colormin/src/__tests__/index.js
+++ b/packages/postcss-colormin/src/__tests__/index.js
@@ -318,3 +318,8 @@ test(
   'should not attempt to convert variables',
   passthroughCSS(':root{--some-color: 200 255 0}')
 );
+
+test(
+  'should respect CSS variables',
+  passthroughCSS('div{background-color:rgba(51,153,255,var(--tw-bg-opacity))}')
+);
diff --git a/packages/postcss-colormin/src/colours.js b/packages/postcss-colormin/src/colours.js
index 2b6f0609d..9cd1c458b 100644
--- a/packages/postcss-colormin/src/colours.js
+++ b/packages/postcss-colormin/src/colours.js
@@ -5,6 +5,9 @@ import toShorthand from './lib/toShorthand';
 extend([namesPlugin]);
 
 export default (colour, isLegacy = false) => {
+  if (colour.includes('var(')) {
+    return colour;
+  }
   /* check that it is a valid CSS value
      https://www.w3.org/TR/css-color-4/#rgb-functions */
   if (getFormat(colour) === 'rgb') {