我在我的Laravel應用程序中使用了Tailwind CSS，我想移除輸入框中的焦點邊框。根據文檔，focus:outline-none應該實現這一點，盡管它對我不起作用，邊框仍然出現在focus上。

看起來我瞄準了錯誤的東西，好像我真的對焦了:黑色輪廓，在對焦時我可以看到黑色輪廓和標準的藍色輪廓。

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();
}

現在有同樣的問題，拉勒維爾8，慣性，微風& amp當我在一個元素上設置outline-none時，它被忽略。其他一切似乎都工作正常。

解決這個問題的唯一方法是在元素本身上添加CSS:border-transparent focus:border-transparent focus:ring-0。

這個幫我修好了。

也許你可以嘗試在你的課堂上增加重點:大綱-不直接。

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

正確的方法:border-none focus:ring-0如果一個邊框不存在的話，你就不需要麻煩的把它變成透明的。

正確的處理方法是在順風3焦點:環透明

只需使用focus:ring-0 focus:ring-offset-0 both。

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

有一個簡單的方法可以解決這個問題:使用大綱

outline:none

使用這個:

focus:border-current focus:ring-0

這是我使用TailwindCSS & ltinput/>；

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

我將MudBlazor與TailwindCSS結合使用，發現我的輸入文本/選擇框在聚焦時都有一個奇怪的方形邊框。

我找到了負責順風的CSS，并在頁面末尾再次聲明了CSS & lt；head & gt而且還包括！重要的是對被覆蓋的屬性，以確保我已經禁用它。

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
    outline: 0px !important;
    outline-offset: 0px !important;
    box-shadow: none !important;
}

我在Laravel、Tailwind和Material UI上也遇到了同樣的問題。這個片段解決了這個問題。它不是環、輪廓或邊界；那是《追風》里的盒影。

要解決沖突，請將下面的代碼片段添加到app.css中:

input:focus, input:hover{ 
    box-shadow:none !important;
}

我已經把它設置在全球SCSS文件中，對我來說，輪廓是固定的。

[type='text'] {
  --tw-ring-color: transparent !important;
}

您可以嘗試使用:

control: (base, state) => ({
 ...base,
 "*": {
        boxShadow: "none !important",
       },
}),

或者你可以訪問回購中的問題:https://github.com/JedWatson/react-select/issues/2728

在我的例子中，我在ReactJS中解決了這個問題，當我為編輯復選框顏色添加插件tailwindcss/fomrs時，我意識到許多組件因為這個插件而改變了。