Tailwindcss file input display issue

Question

I'm running a fresh Laravel project with Jetstream installed. I copied an example file input code snippet from tailwincss examples page and it is not displaying correctly.

This is what the example on tailwind page looks like:

And this is what it looks like on my page:

Both screenshots were taken in Brave browser. I tried re-running npm run dev but that didn't change anything.

I'm not great with frontend so perhaps I'm missing something obvious here, but I spent some time looking for answers on similar issues and couldn't to find any.

Here's the html of the element:

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
                    <form>
                        <div class="flex justify-center">
                            <div class="mb-3 w-96">
                              <label for="formFile" class="form-label inline-block mb-2 text-gray-700">Default file input example</label>
                              <input class="form-control
                              block
                              w-full
                              px-3
                              py-1.5
                              text-base
                              font-normal
                              text-gray-700
                              bg-white bg-clip-padding
                              border border-solid border-gray-300
                              rounded
                              transition
                              ease-in-out
                              m-0
                              focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFile">
                            </div>
                          </div>
                    </form>
                  </div>
            </div>
        </div>
    </div>

This is what my app.css looks like:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And tailwind.config.js:

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

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

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

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

Answer 1

My bad, I forgot to install and import tw-elements.