Tailwindcss 文件输入显示问题

Question

我是运行一个新的 Laravel 项目，安装了 Jetstream。我从 tailwincss 示例页面复制了一个示例文件输入代码片段，但它显示不正确。

Tailwind 页面上的示例如下所示：

这是它在我的页面上的样子：

两个屏幕截图都是在 Brave 浏览器中截取的。我尝试重新运行 npm run dev 但这并没有改变任何东西。

我不太擅长前端，所以也许我在这里遗漏了一些明显的东西，但我花了一些时间寻找类似问题的答案，但找不到任何答案。

这是元素的html：

<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>

这是我的 app.css 的样子：

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

和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

糟糕，我忘了安装和导入 tw-elements。

Tailwindcss 文件输入显示问题

Tailwindcss file input display issue

laravel

tailwind-css

jetstream