focus:outline-none 不能使用 Laravel 的 Tailwind CSS答案

【问题标题】：focus:outline-none not working Tailwind CSS with Laravelfocus:outline-none 不能使用 Laravel 的 Tailwind CSS
【发布时间】：2021-12-27 01:21:19
【问题描述】：

我正在为我的 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();
}

【问题讨论】：

你在添加大纲后编译你的资产了吗？可能清除已启用并导致问题。
是的，我做到了，npm run watch 一直在运行
嗯，我认为这是另一回事.. 你能用你的 tailwind.config.js 和你的 webpack.mix.js 的内容更新你的问题吗（如果你使用 webpack）？
@Dennis 抱歉回复慢，我已经更新了这些问题

标签： css laravel tailwind-css

【解决方案1】：

也许您可以尝试在课堂上直接添加focus:outline-none。

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

【讨论】：

不幸的是没有运气

【解决方案2】：

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

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

【讨论】：

谢谢 - 我的输入底部边缘有一个边框，所以没有使用border-transparent，但focus:ring-0 似乎无论如何都可以正常工作。但是，它正在改变我的底部边框的颜色，但我只是通过将焦点边框颜色设置为与非焦点颜色相同来解决这个问题......如果这有意义的话！

【解决方案3】：

!outline-none

这为我解决了问题。

【讨论】：

【解决方案4】：

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

【讨论】：