max-width bei Tailwind Prose entfernen

Tailwind Prose, offiziell als Tailwind Typography bekannt, ist ein Add-on für Tailwind CSS, das sich auf die Erstellung ansprechender typografischer Designs konzentriert. Es bietet dir die Möglichkeit, ohne zusätzliche Mühe elegante Typografien auf deinen Webseiten umzusetzen. Im Standardmodus bringt die Prose-Erweiterung eine maximale Breite mit sich, die limitierend wirken kann. Falls du diese Einschränkung entfernen möchtest, kannst du dies mit der Klasse max-w-none tun. Noch effizienter ist es jedoch, diese Einstellung in der Tailwind-Konfigurationsdatei dauerhaft zu ändern.

Um die maximale Breite global zu deaktivieren, kannst du den folgenden Konfigurationscode verwenden:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            typography: {
                DEFAULT: {
                    css: {
                        maxWidth: 'none'
                    }
                }
            }
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};

In diesem Code ist der entscheidende Abschnitt in den Zeilen 15 bis 21 enthalten. Dort wird die Einstellung vorgenommen, die standardmäßige maximale Breite bei der Verwendung von Prose zu entfernen. Dies gewährleistet, dass deine typografischen Elemente die volle zur Verfügung stehende Breite nutzen können, ohne beschränkt zu sein. Dies ist besonders nützlich, wenn du flexibel gestaltete Layouts mit viel Weißraum oder großflächiger Typografie bevorzugst. Stelle sicher, dass du bei solchen Änderungen auch andere Aspekte des Designs im Auge behältst, um ein harmonisches Gesamtbild zu bewahren.