Change file extension to .pcss

assets/css/custom-components.css

@@ -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';

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';

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';

assets/js/app.js

@@ -1,5 +1,5 @@
 import 'alpinejs'
-import '../css/tailwind.css'
+import '../css/tailwind.pcss'
 
 window.hljs = require('highlightjs')
 

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()) {