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

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

也许您可以尝试在 class 中直接添加 focus:outline-none。

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

Answer 2

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

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

Answer 3

!outline-none

这帮我修好了。

Answer 4

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

Answer 5

这是我使用 TailwindCSS 时的配置 <input />

border                 // border-width: 1px;
border-slate-700       // DEFAULT border-color
hover:border-slate-500 // HOVER border-color
focus:border-blue-500  // WHEN WRITE border-color
focus:outline-none     // NONE OUTLINE WHEN WRITE

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

focus:outline-none not working Tailwind CSS with Laravel

css

laravel

tailwind-css