极客观点
项目管理
HarmonyOS
我正在为我的 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();
}
原文由 Thomas Read 发布，翻译遵循 CC BY-SA 4.0 许可协议
现在有同样的问题，Laravel 8, Inertia, Breeze & Tailwind：当我在一个元素上设置
outline-none时，它被忽略了。其他一切似乎都正常工作。解决它的唯一方法是在元素本身上添加 css:
border-transparent focus:border-transparent focus:ring-0。