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

i guess you have extra stylings, check the element to see from where the style comes, you have at least some left margin on buttons, try to remove normalize.css from blade layout perhaps — Lk77, Mar 04 '22 at 15:38
can you share the source code (rendered HTML) of both screenshots ? — medilies, Mar 04 '22 at 15:42
I'm not loading any additional `normalize.css`. Just the main app stylesheet. From what I've read normalization is supposed to be handled by tailwind base component. Rendered HTML is exactly the same as the example one, so that's not gonna help. Unfortunately I can't find an easy way of sharing the list of applied styles from element inspection debug. — Nicolas, Mar 04 '22 at 16:11
there is no errors in the results, it applied the style that you wrote https://codepen.io/medilies/pen/yLPZRRV?editors=1000 // tag people in comments directly under your question so they get the notification I came back here by chance — medilies, Mar 04 '22 at 16:25

score 0 · Accepted Answer · answered Mar 04 '22 at 16:26

0

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

answered Mar 04 '22 at 16:26

Nicolas

1,256
1
10
22

Tailwindcss file input display issue

1 Answers1