diff --git a/assets/css/components/button.css b/assets/css/components/button.pcss
similarity index 100%
rename from assets/css/components/button.css
rename to assets/css/components/button.pcss
diff --git a/assets/css/components/container.css b/assets/css/components/container.pcss
similarity index 100%
rename from assets/css/components/container.css
rename to assets/css/components/container.pcss
diff --git a/assets/css/components/lead.css b/assets/css/components/lead.pcss
similarity index 100%
rename from assets/css/components/lead.css
rename to assets/css/components/lead.pcss
diff --git a/assets/css/components/markup.css b/assets/css/components/markup.pcss
similarity index 100%
rename from assets/css/components/markup.css
rename to assets/css/components/markup.pcss
diff --git a/assets/css/components/note.css b/assets/css/components/note.pcss
similarity index 100%
rename from assets/css/components/note.css
rename to assets/css/components/note.pcss
diff --git a/assets/css/components/table.css b/assets/css/components/table.pcss
similarity index 100%
rename from assets/css/components/table.css
rename to assets/css/components/table.pcss
diff --git a/assets/css/components/video.css b/assets/css/components/video.pcss
similarity index 100%
rename from assets/css/components/video.css
rename to assets/css/components/video.pcss
diff --git a/assets/css/components/widget.css b/assets/css/components/widget.pcss
similarity index 100%
rename from assets/css/components/widget.css
rename to assets/css/components/widget.pcss
diff --git a/assets/css/components/wrap.css b/assets/css/components/wrap.pcss
similarity index 100%
rename from assets/css/components/wrap.css
rename to assets/css/components/wrap.pcss
diff --git a/assets/css/custom-base.css b/assets/css/custom-base.pcss
similarity index 100%
rename from assets/css/custom-base.css
rename to assets/css/custom-base.pcss
diff --git a/assets/css/custom-components.css b/assets/css/custom-components.css
deleted file mode 100644
index afa29056..00000000
--- a/assets/css/custom-components.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import './components/button.css';
-@import './components/container.css';
-@import './components/lead.css';
-@import './components/markup.css';
-@import './components/note.css';
-@import './components/table.css';
-@import './components/video.css';
-@import './components/widget.css';
-@import './components/wrap.css';
diff --git a/assets/css/custom-components.pcss b/assets/css/custom-components.pcss
new file mode 100644
index 00000000..f37bc5e4
--- /dev/null
+++ b/assets/css/custom-components.pcss
@@ -0,0 +1,9 @@
+@import './components/button.pcss';
+@import './components/container.pcss';
+@import './components/lead.pcss';
+@import './components/markup.pcss';
+@import './components/note.pcss';
+@import './components/table.pcss';
+@import './components/video.pcss';
+@import './components/widget.pcss';
+@import './components/wrap.pcss';
diff --git a/assets/css/custom-utilities.css b/assets/css/custom-utilities.pcss
similarity index 100%
rename from assets/css/custom-utilities.css
rename to assets/css/custom-utilities.pcss
diff --git a/assets/css/libraries/hljs.css b/assets/css/libraries/hljs.pcss
similarity index 100%
rename from assets/css/libraries/hljs.css
rename to assets/css/libraries/hljs.pcss
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.pcss
similarity index 51%
rename from assets/css/tailwind.css
rename to assets/css/tailwind.pcss
index 54340ff3..c4adf246 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.pcss
@@ -1,11 +1,11 @@
 @import 'tailwindcss/base';
-@import './custom-base.css';
+@import './custom-base.pcss';
 
 @import 'tailwindcss/components';
-@import './custom-components.css';
+@import './custom-components.pcss';
 
 @import 'highlightjs/styles/github-gist';
-@import './libraries/hljs.css';
+@import './libraries/hljs.pcss';
 
 @import 'tailwindcss/utilities';
-@import './custom-utilities.css';
+@import './custom-utilities.pcss';
diff --git a/assets/js/app.js b/assets/js/app.js
index 4de18bad..8ea23478 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,5 +1,5 @@
 import 'alpinejs'
-import '../css/tailwind.css'
+import '../css/tailwind.pcss'
 
 window.hljs = require('highlightjs')
 
diff --git a/webpack.config.js b/webpack.config.js
index 938546f4..fa0975b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,6 +9,9 @@ Encore
     .setPublicPath('/build')
     .addEntry('app', './assets/js/app.js')
     .enablePostCssLoader()
+    .configureLoaderRule('css', loaderRule => {
+        loaderRule.test = /\.(css|postcss|pcss)$/
+    })
     .enableSourceMaps(!Encore.isProduction())
 
 if (Encore.isProduction()) {