Focus:outline-none не работает Tailwind CSS с LaravelCSS

Разбираемся в CSS
Ответить
Гость
 Focus:outline-none не работает Tailwind CSS с Laravel

Сообщение Гость »


Я использую Tailwind CSS для своего приложения Laravel и хочу удалить рамку фокуса в полях ввода. Согласно документации,

Код: Выделить всё

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?

Код: Выделить всё


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


Источник: https://stackoverflow.com/questions/699 ... th-laravel
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»