Reputation: 983

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

Upvotes: 64

Answers (25)

SkyRar

Reputation: 1277

Add this to your global style.css file

@layer base {
  *:focus {
    @apply focus:!border-transparent focus:!ring-0 focus:!ring-offset-0;
  }
}

Upvotes: 0

Devang Chauhan

Reputation: 1

You can also try this

style="outline: none; box-shadow: none"

Upvotes: -2

dzakyabdurhmn

Reputation: 21

Try using the focus-visible: outline-none instead of the focus property.

Example code:

<input type="text" placeholder="anything" class="focus-visible:outline-none text-blue-500" />

Working example in pure CSS:

.custom-input {
  outline: none;
  border: none;
}

.custom-input:focus-visible {
  outline: none;
}

<input type="text" placeholder="anythings" class="custom-input" />

Upvotes: 2

Arash Asghari

Reputation: 1

focus:outline-none focus:ring-1 focus:ring-blue-500

Upvotes: -2

stackbox

Reputation: 162

at least in 2024 the real reason is "forms" included in the tailwind config, if you remove it from the plugins section, outlines are back to normal and elements are not bloated in size ignoring e.g. box sizing and other odd things.

Upvotes: 2

user3777

Reputation: 39

focus:ring-0, this will fix your problem.

Upvotes: 2

Nikhil Patil

Reputation: 316

this works for me.

focus-visible:ring-0

Upvotes: 0

Vedant Rasote

Reputation: 11

This worked for me - focus:!ring-offset-0

I am using next js with shadcn ui. the ! is a important modifier.

Upvotes: 1

Mohammad Rana

Reputation: 47

Just use focus:ring-0. I hope it's solved your issue.

Upvotes: 0

mateusfg7

Reputation: 31

I was having a similar problem, when I clicked on the <input /> tag it flashed a white border, this solved my problem:

outline outline-transparent

I'm on [email protected], [email protected] and [email protected].

Upvotes: 3

Hemza Talha

Reputation: 97

just add class="focus:!outline-none" . it worked just fine for me.

Upvotes: 0

user1514915

Reputation: 107

This works for me with tailwind ^3.2.4

<input
  type="text"
  class="focus-visible:outline-none"
/>

Upvotes: -2

Montotox

Reputation: 211

You can try with:

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

Or you can visit the issue in the repo: https://github.com/JedWatson/react-select/issues/2728

In my case I resolved in ReactJS, the problem started when I added the plugin tailwindcss/fomrs for edit checkbox color and I realized that many components changed because this plugin.

Upvotes: 0

UtopiaEH

Reputation: 79

I had set it in the global SCSS file, and in my case, the outline was fixed.

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

Upvotes: 0

Kia Boluki

Reputation: 325

I had the same problem with Laravel, Tailwind, and Material UI. This snippet solved the problem. It wasn't the ring, outline, or border; it was the box-shadow from TailwindCSS.

To solve the conflict, add the snippet below to the app.css:

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

Upvotes: 0

emir

Reputation: 73

There is a simple way to solve this problem: use outline

outline:none

Upvotes: 6

skwFE

Reputation: 341

just use focus:ring-0 focus:ring-offset-0 both.

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

Upvotes: 19

TheLegendaryCopyCoder

Reputation: 1832

I am using MudBlazor together with TailwindCSS and found that my input text/select boxes all had an odd square border when focused.

I located the Tailwind CSS responsible and declared the CSS again at the end of the page <head> and also included !important on the overwritten attributes to ensure I have disabled it.

[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;
}

Upvotes: 2

Shamim Reza

Reputation: 71

working with this:

focus:border-current focus:ring-0

Upvotes: 4

milanzigmond

Reputation: 119

the correct way to handle this is in Tailwind 3 focus:ring-transparent

Upvotes: 11

Martinez

Reputation: 448

this is my configuration when working with TailwindCSS <input />

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

Upvotes: 1

user18158120

Reputation:

The proper way: border-none focus:ring-0 You don't need to bother making a border transparent if it doesn't exist. 🐸

Upvotes: 28

rmolinamir

Reputation: 1480

!outline-none

This fixed it for me.

Upvotes: 62

Kamil B.

Reputation: 1573

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.

Upvotes: 126

Adhi Ardiansyah

Reputation: 906

Maybe you can try add focus:outline-none direct in your class.

Demo : https://jsfiddle.net/p73xfy1h/

Upvotes: 32

focus:outline-none not working Tailwind CSS with Laravel

Answers (25)

Related Questions