diff --git a/__tests__/fixtures/tailwind-input-import.css b/__tests__/fixtures/tailwind-input-import.css
new file mode 100644
index 000000000..344489980
--- /dev/null
+++ b/__tests__/fixtures/tailwind-input-import.css
@@ -0,0 +1,12 @@
+@import "tailwindcss/base";
+
+@import 'tailwindcss/components';
+
+@import "tailwindcss/utilities";
+
+@responsive {
+  .example {
+    @apply .font-bold;
+    color: theme('colors.red.500');
+  }
+}
diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index 36344edfb..b27f1aae3 100644
--- a/__tests__/sanity.test.js
+++ b/__tests__/sanity.test.js
@@ -36,6 +36,22 @@ it('generates the right CSS when "important" is enabled', () => {
     })
 })
 
+it('generates the right CSS when using @import instead of @tailwind', () => {
+  const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input-import.css`)
+  const input = fs.readFileSync(inputPath, 'utf8')
+
+  return postcss([tailwind()])
+    .process(input, { from: inputPath })
+    .then(result => {
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output.css`),
+        'utf8'
+      )
+
+      expect(result.css).toBe(expected)
+    })
+})
+
 it('does not add any CSS if no Tailwind features are used', () => {
   return postcss([tailwind()])
     .process('.foo { color: blue; }', { from: undefined })
diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js
index 6ceb38aa1..d82a28692 100644
--- a/src/lib/substituteTailwindAtRules.js
+++ b/src/lib/substituteTailwindAtRules.js
@@ -12,6 +12,34 @@ export default function(
   { base: pluginBase, components: pluginComponents, utilities: pluginUtilities }
 ) {
   return function(css) {
+    css.walkAtRules('import', atRule => {
+      if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+        atRule.name = 'tailwind'
+        atRule.params = 'base'
+      }
+
+      if (
+        atRule.params === '"tailwindcss/components"' ||
+        atRule.params === "'tailwindcss/components'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'components'
+      }
+
+      if (
+        atRule.params === '"tailwindcss/utilities"' ||
+        atRule.params === "'tailwindcss/utilities'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'utilities'
+      }
+
+      if (atRule.params === '"tailwindcss/screens"' || atRule.params === "'tailwindcss/screens'") {
+        atRule.name = 'tailwind'
+        atRule.params = 'screens'
+      }
+    })
+
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'preflight') {
         // prettier-ignore