focus:outline-none not working Tailwind CSS with Laravel

I am using Tailwind CSS for my Laravel application, and want to remove the focus border on the input boxes. According to the documentation, focus:outline-none should achieve this, although it is not working for me and the border still appears on focus.

It looks like I am targeting the wrong thing, as if I do focus:outline-black, I can see a black outline as well as the standard blue one on focus.

focus:border-none also does not fix the problem.

Any ideas?

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

Having same issue right now, Laravel 8, Inertia, Breeze & Tailwind: when I set outline-none on a element, it is ignored. Everything else seems to work properly.

The only thing which solved it was to add css: border-transparent focus:border-transparent focus:ring-0 on the element itself.