.outline-none to remove browser specific outlining of focused elements.
It is highly recommended to apply your own focus styling for accessibility when using this utility.
<input type="text" placeholder="Focus me (no outline)" class="outline-none ..." /> <input type="text" placeholder="Focus me (custom)" class="outline-none focus:shadow-outline focus:bg-blue-100 ..." />
Responsive and pseudo-class variants
By default, only focus variants are generated for outline utilities.
You can control which variants are generated for the outline utilities by modifying the
outline property in the
variants section of your
For example, this config will also generate responsive and hover variants:
If you don't plan to use the outline utilities in your project, you can disable them entirely by setting the
outline property to
false in the
corePlugins section of your config file: