Tailwindcss文件输入显示问题

Question

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

这就是顺风页面上的示例：

​

​

在我的页面上是这样的：

​

​

这两个屏幕截图都是在勇敢的浏览器中拍摄的。我试着重新运行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。