laravel jetstream login and register layout is spoiled

Question

enter image description hereI want to create login and registration with the help of jetstream in laravel. i followed all steps perfectly but my jetstream login and registration layout is spoiled. i installed jetstream 1)composer require laravel/jetstream 2)php artisan jetstream:install livewire 3)npm install 4)npm run dev

Answer 1

try to run watch command. It might be a problem with dev command.

npm run watch

Check your tailwind.config.js file which must be similar like below. Important part is purge which if missing all tailwindcss classes will purged and it will be shown as your screenshot.

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

module.exports = {
    purge: {
        content: [
            './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
            './vendor/laravel/jetstream/**/*.blade.php',
            './storage/framework/views/*.php',
            './resources/views/**/*.blade.php',
        ],
        options: {
           safelist: {
                standard: [
                    /^[\w:]*col-start-/,
                    /^[\w:]*col-span-/
                ]
            }
        }
    },

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

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