diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js
index e89594ff..b2b0b9a6 100644
--- a/src/generators/tailwindcss.js
+++ b/src/generators/tailwindcss.js
@@ -34,25 +34,31 @@ module.exports = {
     const layoutsRoot = get(config, 'build.layouts.root')
     const componentsRoot = get(config, 'build.components.root')
 
+    const layoutsPath = typeof layoutsRoot === 'string' && layoutsRoot ?
+      `${layoutsRoot}/**/*.html`.replace(/\/\//g, '/') :
+      './src/layouts/**/*.html'
+
+    const componentsPath = typeof componentsRoot === 'string' && componentsRoot ?
+      `${componentsRoot}/**/*.html`.replace(/\/\//g, '/') :
+      './src/components/**/*.html'
+
     const tailwindConfig = merge({
       important: true,
       content: {
         files: [
-          typeof layoutsRoot === 'string' && layoutsRoot ?
-            `${layoutsRoot}/**/*.html`.replace(/\/\//g, '/') :
-            './src/layouts/**/*.html',
-          typeof componentsRoot === 'string' && componentsRoot ?
-            `${componentsRoot}/**/*.html`.replace(/\/\//g, '/') :
-            './src/components/**/*.html',
+          layoutsPath,
+          componentsPath,
           {raw: html, extension: 'html'}
         ]
       }
     }, userConfig(config))
 
-    // Add back the `{raw: html}` option if user provided own config
+    // If `content` is an array, add it to `content.files`
     if (Array.isArray(tailwindConfig.content)) {
       tailwindConfig.content = {
         files: [
+          layoutsPath,
+          componentsPath,
           ...tailwindConfig.content,
           {raw: html, extension: 'html'}
         ]
diff --git a/test/expected/components/backwards-compatibility.html b/test/expected/components/backwards-compatibility.html
index 3e35f60a..34299e70 100644
--- a/test/expected/components/backwards-compatibility.html
+++ b/test/expected/components/backwards-compatibility.html
@@ -1,6 +1,6 @@
-<p>Variable from attribute: Example</p>
+<p class="flex">Variable from attribute: Example</p>
 <p>Variable from locals attribute: bar</p>
 <p class="hidden">Variable from page: maizzle-ci</p>
-<p>Variable from attribute: Nested component</p>
+<p class="flex">Variable from attribute: Nested component</p>
 <p>Variable from locals attribute: bar (nested)</p>
 <p>Variable from page (nested): maizzle-ci</p>
diff --git a/test/stubs/components/component.html b/test/stubs/components/component.html
index b750e1d0..35ef8748 100644
--- a/test/stubs/components/component.html
+++ b/test/stubs/components/component.html
@@ -5,7 +5,7 @@
   }
 </script>
 
-<p>Variable from attribute: [[ text ]]</p>
+<p class="flex">Variable from attribute: [[ text ]]</p>
 
 <p>Variable from locals attribute: [[ foo ]]</p>
 
diff --git a/test/test-tailwindcss.js b/test/test-tailwindcss.js
index ae810301..9280359c 100644
--- a/test/test-tailwindcss.js
+++ b/test/test-tailwindcss.js
@@ -146,3 +146,41 @@ test('respects `shorthandCSS` in maizzle config', async t => {
     '.padded{padding:1.5rem1rem}'
   )
 })
+
+test('works with custom `layouts.root`', async t => {
+  const css = await Tailwind.compile({
+    config: {
+      build: {
+        layouts: {
+          root: './test/stubs/layouts'
+        },
+        tailwind: {
+          config: {
+            content: ['./test/stubs/tailwind/*.html']
+          }
+        }
+      }
+    }
+  })
+
+  t.true(css.includes('.bg-red-500'))
+})
+
+test('works with custom `components.root`', async t => {
+  const css = await Tailwind.compile({
+    config: {
+      build: {
+        components: {
+          root: './test/stubs/components'
+        },
+        tailwind: {
+          config: {
+            content: ['./test/stubs/tailwind/*.html']
+          }
+        }
+      }
+    }
+  })
+
+  t.true(css.includes('.flex'))
+})