Laravel项目中Tailwind CSS的focus:outline-none不生效问题求解

问题根因 #

你项目中安装了@tailwindcss/forms插件，该插件默认会为所有表单元素预置一套美化样式，你看到的聚焦蓝色边框既不是默认的outline也不是普通border，是插件添加的focus:ring阴影样式，所以仅修改outline和border属性无法生效。
另外你自定义样式中@apply的写法也有错误，@apply需要后跟Tailwind提供的工具类，而非原生CSS属性，你写的focus:outline:none不是合法的Tailwind工具类名，正确的移除outline的工具类是focus:outline-none。

解决方法 #

方法1：仅修改当前输入框类的样式 #

调整你的.text-input样式代码如下：

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

如果同时需要固定聚焦时的边框颜色，再加对应边框类即可，比如focus:border-gray-300和非聚焦状态保持一致。

方法2：全局关闭forms插件的默认美化样式 #

如果你不需要@tailwindcss/forms插件提供的默认表单美化效果，可以修改tailwind.config.js中的插件配置：

plugins: [
    require('@tailwindcss/forms')({ strategy: 'base' }), 
    require('@tailwindcss/typography')
],

该配置下插件只会添加基础的浏览器样式重置代码，不会给所有表单元素自动加预置的美化样式，后续所有表单样式都需要你自己手动定义。

生效步骤 #

修改完成后重新编译前端资源即可生效：

npm run dev
# 开发阶段如果需要实时监听文件变化，执行npm run watch

内容的提问来源于stack exchange，提问作者Thomas Read