Фокус: Схема не работает, не работая CSS с Laravel с Laravel ⇐ CSS

[Anonymous]

Я использую Tailwind CSS для моего приложения Laravel и хочу удалить границу фокусировки на коробках ввода. Согласно документации, фокусировка: схема: unone должен достичь этого, хотя она не работает для меня, и граница все еще появляется на фокусе.focus:border-none также не решает проблему.
Есть идеи?

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

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


Подробнее здесь: https://stackoverflow.com/questions/699 ... th-laravel