focus:outline-none 无法在 Laravel 中使用 Tailwind CSS

Question

我在 Laravel 应用程序中使用 Tailwind CSS，并且想要删除输入框上的焦点边框。根据文档，focus:outline-none应该实现这一点，尽管它对我不起作用并且边框仍然出现在焦点上。

看起来我瞄准了错误的目标，就好像我瞄准了错误的目标一样focus:outline-black，我可以看到黑色轮廓以及焦点上的标准蓝色轮廓。

focus:border-none也不能解决问题。

有任何想法吗？

<input class="text-input" placeholder="Your Name" />

.text-input {
    @apply focus:outline:none;
}

tailwind.config.js

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

module.exports = {
    mode: 'jit',
    purge: [
        './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],
            },            
        },
        colors: {                      
            black: colors.black,
            white: colors.white,
            gray: colors.trueGray,
            indigo: colors.indigo,
            red: colors.rose,
            yellow: colors.amber,
            blue: colors.blue,
        },
    },

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

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

Answer 1

现在有同样的问题，Laravel 8、Inertia、Breeze 和 Tailwind：当我设置outline-none一个元素时，它会被忽略。其他一切似乎都工作正常。

border-transparent focus:border-transparent focus:ring-0解决这个问题的唯一方法是在元素本身上添加 css: 。

Answer 2

!outline-none

这为我解决了这个问题。

Answer 3

也许你可以尝试focus:outline-none直接在你的班级中添加。

演示： https: //jsfiddle.net/p73xfy1h/

Answer 4

正确的方法：border-none focus:ring-0如果边框不存在，则无需费心使其透明。

Answer 5

只需同时使用 focus:ring-0 focus:ring-offset-0 即可。

focus:ring-0 focus:ring-offset-0

Answer 6

处理这个问题的正确方法是在 Tailwind 3 中focus:ring-transparent

Answer 7

有一个简单的方法可以解决这个问题：使用outline

outline:none