Каждый раз когда гуглю тоже пишу сперва "МГУ" )))) Илья, все круто ждем с нетерпением каждое видео, очень прошу, на будущее, расскажите про еще о компонентах, v-model для них, реализацию lifeSearch компонента( гугловская строка поиска в реальном времени),vuex.
Когда через cli генерировал файл tailwind.config.js произошла ошибка. После чего пришлось инициализировать файл как показано в доках tailwind, а при повторной генерации через vue он снова затирал конфиг и выдавал ошибку, но если я пропускал этап генерации, то он успешно добавлял файл стилей и подключал в проект...
Хм, не знал, что tailwind такой умный) Всегда негативно относился к ui фреймворкам из-за их огромных файлов, а тут оказывается оставляются только используемые стили)
Я думаю это имеет смысл, если бандл css'a собирается под каждую страницу отдельно. А так вы сейчас ничего не использовали, но потом когда проект будет большой использование в одном месте приведет к добавлению этого стиля на всем проекте получается
При ошибке (Error: ENOENT: no such file or directory, open '......\tailwind.config.js') следует переместить свой проект в каталог без пробелов в любом месте абсолютного пути. Мне это помогло решить данную ошибку.
@@JavaScriptNinja Вот, Вам кейс: у меня есть динамическая, переиспользуемая таблица, в которой, на разных страницах, на разных экранах, необходимо скрывать разные колонки. Для этого, я каждой колонке добавляю динамический класс "column--{index}". В нужный момент делаю display:none, нужному классу.
Не совсем ясно почему устанавливаем именно vue-cli-tailwind-plagin . Ведь по сути tailwind-plagin должен быть отдельной сущностью не связанной с vue, так как взаимодействует только с css. тогда при чем тут vue? Благодарю за ответы)
Если кто-то столкнулся с проблемой Vue 3 / Tailwind 3 / PostCSS 8 (а у вас и так стоит PostCSS 8), то эта проблема в старом vue-cli 4. Перед установкой сделайте в проекте обновитесь "vue upgrade", так вы получите vue-cli 5 (а также всякие @vue/cli-plugin-babel 5). После этого можно ставить Tailwind
У меня после применения Tailwind появился серого цвета бекграунд на функциональной части приложения. И бекграунд кнопки "удалить" тоже стал серого цвета. Исходники склонировал с гитлаба, ничего не менял. Кто-то с этим сталкивался? Сижу на линуксе, браузер хром, с последними обновлениями.
@@IDigle1 аббревиатура пишется либо с заглавной CLI либо через точки C.L.I. Тогда будет как вы и предлагали, Илья читает как написано, а написано с прописной cli
О, а вот так установился: npm install "@tailwindcss/forms" Кто нибудь знает, почему так? Если у вас как и у меня powershell на win7, то решением будут либо кавычки, либо прописать команду в cmd
на 8 минуте штаны не превратились в элегантные шорты! :'( Failed to compile joxi.ru/1A57QKRfzwXGYm joxi.ru/GrqndjVcRbPGVm хотя до этого всё подключилось, в чем может быть дело?
на этапе где говорится о 20 Мб, мой app.js = 232 КБ. И я не запускал build. Как мне получить те же 20? Это не удобно, ведь нет возможности править верстку в браузере, т.к не подтянуты все стили
Это просто ужас какой-то. Любое изменение и сохранение assets/tailwind.css длится слишком долго. В этом файле ни в коем случае не стоит писать стили. Я капнул чуть глубже что бы понять почему app.js увеличился с 2.2Mb до 10.6Mb. В итоге подключаемый tailwind.css весит 3.6Mb + sourcemap который генерируется автоматически webpack-ом добавляет ещё 6Mb.
@@JavaScriptNinja Ну это странно - зачем тогда подключать tailwind-forms если по вашим словам самого talwind хватает. Я могу сказать что никакого tailwind-a не хватит на фантазию дизайнеров и клиентов =)
@@wswebus922 tailwind-forms содержит дополнительные стили (focus-ring) которые специфичны для форм. Мы спокойно живем на atomic CSS (не tailwind, руками пишем) с минимумом кастомного CSS
@@JavaScriptNinja И я про это же. Когда люди подключают какие-то библиотеки которые на хайпе и даже не заглядывают что происходит с их проектом после подключения - становится грустно. На самом деле подключать 3.7Мб css из которого будет использовать 20% это избыточно, как по мне. Жаль что из коробки нельзя выбрать какие утилитарные модули подключать, а какие нет
@@wswebus922 вы можете это сделать а конфиге тейлвинда Когда подключаете его через vue-cli попросите его сгенерировать полный конфиг и удалите ненужное вам
@@JavaScriptNinja Лично для меня: трудно было воспринимать именно практическую информацию по использованию tailwind. Я, например, так и не понял, откуда tailwind взял стили, если они были только в 1-ом месте и были удалены из app.css. 7:16. Понимаю, что это было сделано для иллюстрации основной мысли, об использовании vue-cli, но вот для новичков, это все-таки информационный шум
@@zp00v0518 Я удивлён что вы считаете это шумом - это как раз повод разобраться что за зверь тейлвинд, но я прислушиваюсь - запишу для вас отдельное видео :)
@@petersburgpietroburg Он не говорил это про реакт, насколько я помню, он сказал что в будущем, возможно они сделают платный курс по реакт. А еще реакт он любит больше чем вью )))
Замечательный урок.Рада что нашла этот курс.Хоть кто-то понятно поясняет.Спасибо вам и вашей команде за труд и бесплатный контент.
потрясающая подача, идея о том, чтобы смотреть, что изменил vue-cli очень понравилась. спасибо!
Ты про git diff ?)
Спасибо тебе, добрый человек!)
Спасибо за Ваш труд
Каждый раз когда гуглю тоже пишу сперва "МГУ" )))) Илья, все круто ждем с нетерпением каждое видео, очень прошу, на будущее, расскажите про еще о компонентах, v-model для них, реализацию lifeSearch компонента( гугловская строка поиска в реальном времени),vuex.
Отдельное спасибо, за это видео. Только с ним смог разобраться с подключением.
Спасибо за урок, Илья!
Отличное видео спасибо 🙏
спасибо огромное супер видос=))
При ошибке (файл tailwind.config.js не найден, unexpected token и т.п.) попробуйте обновить ноду.
Спасибо за видео!
Спасибо большое!
Когда через cli генерировал файл tailwind.config.js произошла ошибка. После чего пришлось инициализировать файл как показано в доках tailwind, а при повторной генерации через vue он снова затирал конфиг и выдавал ошибку, но если я пропускал этап генерации, то он успешно добавлял файл стилей и подключал в проект...
Хм, не знал, что tailwind такой умный) Всегда негативно относился к ui фреймворкам из-за их огромных файлов, а тут оказывается оставляются только используемые стили)
Я думаю это имеет смысл, если бандл css'a собирается под каждую страницу отдельно. А так вы сейчас ничего не использовали, но потом когда проект будет большой использование в одном месте приведет к добавлению этого стиля на всем проекте получается
@@smith-dev Вы можете это сделать и постранично
@@smith-dev Это понятно) Вопросов к используемым стилям в проекте у меня нет) А вот к неиспользуемым были
Так то это делает PostCss а не сам tailwind
Нихрена не понял, но очень интересно.
При ошибке (Error: ENOENT: no such file or directory, open '......\tailwind.config.js') следует переместить свой проект в каталог без пробелов в любом месте абсолютного пути.
Мне это помогло решить данную ошибку.
Спасибо, помогло)
Спасибо! помогло!
Прошло столько времени, а коммент до сих пор актуален, благодарю!
@@MrAntoninik пробелы в путях не используются. так же как и кирилица
А что будет со стилями, классы для которых добавляются динамически (через js) ?
purge css safelist
@@zeusvasilovich Ясно. Посмотрел я на настройки этого safelist - тот еще костыль.
@@zp00v0518 В мире вью мы не добавляем классы динамически - я ни на одном проекте это не использую
@@JavaScriptNinja Вот, Вам кейс: у меня есть динамическая, переиспользуемая таблица, в которой, на разных страницах, на разных экранах, необходимо скрывать разные колонки. Для этого, я каждой колонке добавляю динамический класс "column--{index}". В нужный момент делаю display:none, нужному классу.
@@zp00v0518 Скорее всего,все можно реализовать так,чтоб показать или скрывать с помощью v-if.Хотя и в tailwind можно добавлять собственные классы
Не совсем ясно почему устанавливаем именно vue-cli-tailwind-plagin . Ведь по сути tailwind-plagin должен быть отдельной сущностью не связанной с vue, так как взаимодействует только с css. тогда при чем тут vue? Благодарю за ответы)
Он автогенерирует конфигурацию и подключает сам себя во вью проект. Все это можно сделать и руками
Если кто-то столкнулся с проблемой Vue 3 / Tailwind 3 / PostCSS 8 (а у вас и так стоит PostCSS 8), то эта проблема в старом vue-cli 4. Перед установкой сделайте в проекте обновитесь "vue upgrade", так вы получите vue-cli 5 (а также всякие @vue/cli-plugin-babel 5). После этого можно ставить Tailwind
У меня после применения Tailwind появился серого цвета бекграунд на функциональной части приложения. И бекграунд кнопки "удалить" тоже стал серого цвета. Исходники склонировал с гитлаба, ничего не менял.
Кто-то с этим сталкивался? Сижу на линуксе, браузер хром, с последними обновлениями.
Это не баг ) Вернее баг, но не ваш, а верстальщика, который изначально делал cryptonomicon-html :)
Спасибо конечно за инфу. Но почему "вью кли", "вьюкс"? Все вроде говорят "вью сиэлай", "вьюикс". Интересно просто.
Тоже интересует
потому что гладиолус
Не понятно почему tailwind плагин postcss и autoprefixer пишает в runtime зависимость, а не dev. Просветите пожалуйста.
Из видео не понял куда делись стили. В комментариях нашёл ответ, но всё же было бы лучше узнать из видео ✌️
Ок, узнаете прям из следующего
а что непонятного?)
удалили хард стили, подключили плагин tailwind
через аля import только от @tailwind подключили стили с библиотеки, вроде норм)
Вы внимательно смотрели видео? Там же всё наглядно по шагам было сделано!
У Вас на этом этапе сборка из dist не запускается))
Подскажите, что за терминал у вас
В видео видно Windows PowerShell
Подскажите пожалуйста, а где пятое видео по Докеру? Вроде 90 дней давно прошли со времени 4-го видоса по Докеру.
Я его ещё не сделал
Смотрю 2 года спустя, Вебпак такой вебпак... 😂
после npm install @tailwindcss/forms почему-то не добавился tailwind.config.js
И не должен был. Его генерирует vue-cli plugin
пишет "ENOENT: no such file or directory" в моей папки ....criptomicon\tailwind.config.js подскажите как исправить?
Я думаю стоит упомянуть почему здесь пусто и нет нашей верстки: 8:30
@@mytechnosnail вот Вы как пример непонимания.
Это ещё рано знать) не думаю что SSR вообще понадобится для этого сайта
верстку съела злобная уточка
здравствуйте, вы намеренно не удалили api_key?)
ниже в доках был ещё один вариант подключения tailwind
// app.js
import "tailwindcss/tailwind.css"
///Как я понял, это сделано намерено
dota 2 в ресентли закладке))
Почему кли, а не СиЭлАй?
Правила чтения английского языка :-)
@@osmaavik Это ведь аббревиатура, соответственно читаться должна как СиЭлАй)
@@IDigle1 аббревиатура пишется либо с заглавной CLI либо через точки C.L.I. Тогда будет как вы и предлагали, Илья читает как написано, а написано с прописной cli
@@osmaavik Command Line Interface же. Ну ладно)
2:08 так не postCSS же компилирует SCSS, а node-sass к примеру 🤔
А где у меня тут scss?
alias vue='npx @vue/cli'
не благодарите
npm install @tailwindcss/forms:
Нераспознанный токен в исходном тексте.
строка:1 знак:13
+ npm install
О, а вот так установился:
npm install "@tailwindcss/forms"
Кто нибудь знает, почему так? Если у вас как и у меня powershell на win7, то решением будут либо кавычки, либо прописать команду в cmd
@@JuiKoloshi установи git bash
на 8 минуте штаны не превратились в элегантные шорты! :'(
Failed to compile joxi.ru/1A57QKRfzwXGYm
joxi.ru/GrqndjVcRbPGVm
хотя до этого всё подключилось, в чем может быть дело?
Первый же поиск по сообщению об ошибке даст вам решение! :)
тоже самое, не пойму как решить
@@Atelier155 у вас старая версия ноды
@@JavaScriptNinja спасибо, что ответили. Действительно, перешел на убунту, и забыл обновить ноду
Нифига не запускалось, верстка кривая ужас! В самом начале пришлось удалить svg + ничего не откликается, пока есть класс inset 0, а также розовый bg
а почему используется vue-cli, а не vite? есть ли в них какаято существенная разница?
Да, это совершенно разные вещи. vite - это сборщик, vue-cli - целый набор инструментов
Используется vue-cli как наиболее стандартное решение
на этапе где говорится о 20 Мб, мой app.js = 232 КБ. И я не запускал build. Как мне получить те же 20? Это не удобно, ведь нет возможности править верстку в браузере, т.к не подтянуты все стили
проблема оказалась в tailwind. Версия 3 в dev режиме, уже собирает только используемые стили. Решение - использовать cdn или safelist с паттернами
Чего они там на 20мб напихали ))
Это просто ужас какой-то. Любое изменение и сохранение assets/tailwind.css длится слишком долго. В этом файле ни в коем случае не стоит писать стили. Я капнул чуть глубже что бы понять почему app.js увеличился с 2.2Mb до 10.6Mb. В итоге подключаемый tailwind.css весит 3.6Mb + sourcemap который генерируется автоматически webpack-ом добавляет ещё 6Mb.
А в нем и не надо ничего добавлять. Это специально отдельный файл
Более того, появление любого цсс при использовании тейлвинда - уже повод задуматься
@@JavaScriptNinja Ну это странно - зачем тогда подключать tailwind-forms если по вашим словам самого talwind хватает. Я могу сказать что никакого tailwind-a не хватит на фантазию дизайнеров и клиентов =)
@@wswebus922 tailwind-forms содержит дополнительные стили (focus-ring) которые специфичны для форм. Мы спокойно живем на atomic CSS (не tailwind, руками пишем) с минимумом кастомного CSS
@@JavaScriptNinja И я про это же. Когда люди подключают какие-то библиотеки которые на хайпе и даже не заглядывают что происходит с их проектом после подключения - становится грустно. На самом деле подключать 3.7Мб css из которого будет использовать 20% это избыточно, как по мне. Жаль что из коробки нельзя выбрать какие утилитарные модули подключать, а какие нет
@@wswebus922 вы можете это сделать а конфиге тейлвинда
Когда подключаете его через vue-cli попросите его сгенерировать полный конфиг и удалите ненужное вам
Вью кли???? vue-cli точно так произносится?
Нет, си-эл-ай
@@ПанЧиЛо Вот я так думаю...
есть еще цсс , пхп , ява. и еще по ходу много )))))
Слишком сложно, для новичков.
Расскажете с чем именно возникли трудности?
@@JavaScriptNinja Лично для меня: трудно было воспринимать именно практическую информацию по использованию tailwind. Я, например, так и не понял, откуда tailwind взял стили, если они были только в 1-ом месте и были удалены из app.css. 7:16. Понимаю, что это было сделано для иллюстрации основной мысли, об использовании vue-cli, но вот для новичков, это все-таки информационный шум
@@JavaScriptNinja
Добавляем Х через npm, а vue-cli получается отслеживает изменения в трее и вносит правки, которые считает нужными?
@@zp00v0518 Я удивлён что вы считаете это шумом - это как раз повод разобраться что за зверь тейлвинд, но я прислушиваюсь - запишу для вас отдельное видео :)
@@Tora20112 Нет, мы же добавляли плагин через `npx @vue/cli add` - и вот тогда оно и внесло "правки которые считает нужным"
Плюс если хочешь курс по реакт)
Илья говорил, что реакта не будет, потому что он не учит тому, чем не занимается сам в продакшене.
@@petersburgpietroburg Он не говорил это про реакт, насколько я помню, он сказал что в будущем, возможно они сделают платный курс по реакт. А еще реакт он любит больше чем вью )))
там камасутра )))))
а есть подобный курс по реакту?
Дизлайк за Tailwind. Это плохая штука.
Ваше право так считать :) Я считаю её прекрасной штукой, решающей конкретные боли и задачи :)