Blog

Removing max-width in Tailwind Prose

TailwindCSS

Tailwind Prose is an extension for Tailwind CSS that provides beautifully styled typography.

By default, Prose sets a maximum width, which can be disabled using max-w-none. If you want to always disable the maximum width, it is recommended to set it as the default in the configuration file.

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

The relevant part is within lines 15-21. Here, the default maximum width is removed.