diff --git a/wp-content/themes/twentynineteen-tailwindcss/assets/css/base.css b/wp-content/themes/twentynineteen-tailwindcss/assets/css/base.css
new file mode 100644
index 0000000..fb25885
--- /dev/null
+++ b/wp-content/themes/twentynineteen-tailwindcss/assets/css/base.css
@@ -0,0 +1,13 @@
+a {
+  @apply text-gray-600 no-underline
+}
+
+a:hover,
+a:focus {
+  @apply text-blue-800;
+}
+
+h2:before {
+  content: '';
+  @apply w-10 block border-t-2 border-gray-600 mb-4;
+}
diff --git a/wp-content/themes/twentynineteen-tailwindcss/assets/css/components/screen-reader-text.css b/wp-content/themes/twentynineteen-tailwindcss/assets/css/components/screen-reader-text.css
new file mode 100644
index 0000000..6291f3c
--- /dev/null
+++ b/wp-content/themes/twentynineteen-tailwindcss/assets/css/components/screen-reader-text.css
@@ -0,0 +1,3 @@
+.screen-reader-text {
+  @apply absolute opacity-0 pointer-events-none;
+}
diff --git a/wp-content/themes/twentynineteen-tailwindcss/assets/css/main.css b/wp-content/themes/twentynineteen-tailwindcss/assets/css/main.css
index fe13202..0db2c7e 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/assets/css/main.css
+++ b/wp-content/themes/twentynineteen-tailwindcss/assets/css/main.css
@@ -3,28 +3,16 @@ Theme Name: Twenty Nineteen - Tailwind CSS
 Template: twentynineteen
 */
 
-@tailwind base;
+/* Tailwind base styles */
+@import 'tailwindcss/base';
 
-a {
-  @apply text-gray-600 no-underline
-}
+/* Custom base styles */
+@import 'base.css';
 
-a:hover,
-a:focus {
-  @apply text-blue-800;
-}
-
-@tailwind components;
-
-h2:before {
-  content: '';
-  @apply w-10 block border-t-2 border-gray-600 mb-4;
-}
-
-.screen-reader-text {
-  @apply absolute opacity-0 pointer-events-none;
-}
+/* Tailwind components */
+@import 'tailwindcss/components';
 
+/* Custom components */
 @import 'components/avatars.css';
 @import 'components/comment-form.css';
 @import 'components/comment-list.css';
@@ -34,6 +22,8 @@ h2:before {
 @import 'components/main-menu.css';
 @import 'components/page-title.css';
 @import 'components/post.css';
+@import 'components/screen-reader-text.css';
 @import 'components/widgets.css';
 
-@tailwind utilities;
+/* Tailwind utilities */
+@import 'tailwindcss/utilities';
diff --git a/wp-content/themes/twentynineteen-tailwindcss/package.json b/wp-content/themes/twentynineteen-tailwindcss/package.json
index 27157b9..f080590 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/package.json
+++ b/wp-content/themes/twentynineteen-tailwindcss/package.json
@@ -13,6 +13,7 @@
     "browser-sync-webpack-plugin": "2.0.1",
     "cross-env": "^5.2.0",
     "laravel-mix": "^4.0.14",
+    "postcss-import": "^12.0.1",
     "postcss-nested": "^4.1.2",
     "tailwindcss": "^1.0.0-beta.3"
   }
diff --git a/wp-content/themes/twentynineteen-tailwindcss/webpack.mix.js b/wp-content/themes/twentynineteen-tailwindcss/webpack.mix.js
index 00758f7..f2cf80c 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/webpack.mix.js
+++ b/wp-content/themes/twentynineteen-tailwindcss/webpack.mix.js
@@ -2,6 +2,7 @@ let mix = require('laravel-mix')
 
 mix.disableNotifications()
   .postCss('assets/css/main.css', 'style.css', [
+    require('postcss-import')(),
     require('tailwindcss')(),
     require('postcss-nested')(),
   ])