Blog

max-width bei Tailwind Prose entfernen

TailwindCSS

Tailwind Prose bzw. Typography ist eine Erweiterung für Tailwind CSS, um schön gestaltete Typografie bereitzustellen.

Im Standard wird bei Prose eine maximale Breite gesetzt, die mit max-w-none deaktiviert werden kann. Möchte man die maximale Breite immer deaktivieren, dann empfiehlt es sich, dies per Config-Datei als Standard zu setzen.

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')
    ],
};

Relevant ist dabei der Part innerhalb der Zeilen 15-21. Darüber wird die standardmäßig gesetzte maximale Breite entfernt.