Disable core container, add own component

resources/css/app.css

@@ -32,6 +32,10 @@ blockquote {
 
 @tailwind components;
 
+.container {
+  @apply w-full max-w-5xl px-4 mx-auto
+}
+
 p.lead {
   @screen md {
     @apply text-lg

source/_layouts/default.html.twig

@@ -3,7 +3,7 @@
 {% block body %}
     {% include 'layout/navbar' %}
 
-    <div class="container mt-24 px-4 mx-auto flex flex-col flex-1">
+    <div class="container mt-24 flex flex-col flex-1">
         <main id="main-content" class="flex-1 wrap {{ page.layout == 'front' ? 'is-wide' : '' }}">
             {% block page_title_wrapper %}
                 <h1 class="leading-tight mb-4">

source/_partials/layout/navbar.html.twig

@@ -1,5 +1,5 @@
 <div class="bg-blue-500 border-b-3 border-blue-700 mb-6 w-full fixed top-0 z-20">
-    <div class="w-full max-w-5xl px-4 mx-auto">
+    <div class="container">
         <div class="block py-6 v-cloak-block">
             <div class="text-sm">
                 <a href="/" class="font-semibold text-white" tabindex="-1">

tailwind.config.js

@@ -21,6 +21,9 @@ module.exports = {
       }
     }
   },
+  corePlugins: {
+    container: false
+  },
   plugins: [
     require('tailwindcss-spaced-items')({ values: spacing }),
     require('tailwindcss-visuallyhidden')(),