TailwindCSS #1 Установка окружения (Setup Environment)
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2022
- #YauhenK #webdev #TailwindCSS #Tailwind #CSS
В данном видеокурсе мы с вами рассмотрим TailwindCSS. TailwindCSS - это CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения. Вместо традиционного использования одного класса, содержащего набор свойств (компонент), он предоставляет класс, которому соответсвует одно свойство. Tailwind использует набор интуитивно понятных классов, префиксов и суффиксов, которые очень просты для чтения и понимания. По результату курса мы создадим статичную страницу новостного сайта с множеством элементов по типу брэдкрамбы, бейджики, списки тем, пагинации и т.д. Сама же страница будет разработана с использованием подхода mobile first и будет поддерживать тёмную тему.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/ta...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ TH-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
![Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind]](http://i.ytimg.com/vi/sAa71agGwcg/mqdefault.jpg)
1 Лучше инициализировать командой npm init -y чтоб лишних вопросов не задавал
2 Откуда взялся yarn не объяснено. Думаю он и не нужен в такого рода уроках. Лучше npm i tailwindcss postcss -D
3 Для сборки npm run build
Можно
Самый лучший канал по фронтенду на ютюбе! Спасибо Вам большое, Вы супер преподаватель
Спасибо большое
Спасибо, тебе добрый человек
Спасибо за отзыв
Крута, жду продолжения)
👍
Spasibo bolshoe'
Пожалуйста
Лайк!
Спасибо
Здравсвуйте!
А как настроить в vsCode так чтобы директивы
@tailwind base;
@tailwind components;
@tailwind utilities;
не подчеркивались?Установить какой-то плагин?
Вернее почему он их подчеркивает?
Если я не ошибаюсь, дополнительно нужен плагин IntelliSense. Он добавит поддержку такого синтаксиса
Скажите, я правильно понял стили через PostCSS извлекаются только нужные нам из большого файла Tailwind.css в итоге наш файл получается маленьким?
Всё верно
@@YauhenKavalchuk Спасибо! 👍
Что за тема в терминале?
Добрый день! Подскажи, пжл, эти плагины можно поставить на brackets? Спасибо)
Если честно, не отвечу
Привет. Делаю все строго по инструкции. 1) npm init 2)npm install -D tailwindcss postcss autoprefixer и на третем шаге после ввода команды "npx tailwindcss init" выдает ошибку: sh: tailwindcss: command not found. Node js и npm обновлены. Подскажи, пожалуйста, в чем может быть проблема?
Весь интернет перерыл, не нашел решение.
Попробуйте: npm install -D tailwindcss.
А вообще, я ж в видео вроде даже показывал эту страничку: tailwindcss.com/docs/installation
Привет, коллега! Подскажите, пожалуйста, для чего нельзя использовать "Tailwind CSS"?
Его МОЖНО использовать для стилизации. Во всех остальных случаях он не нужен
@@YauhenKavalchuk спасибо!)
Спасибо, очень познавательно !
Только с 7:39 не удалось выполнить команду yarn и до конца видео
"Имя "yarn" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку."
Тема yarn не раскрыта ((
Yarn - это аналог npm. Команду можно заменить на npm
npm run build
Почему тайливд срабатывает только при вводе npm run build
привет из будущего, нашел ответ? Я так понимаю что TW компилирует файлы .css и .js в папку /public, которые в свою очередь уже можно подключать к страницам? Сам только разбираюсь с этой темой.
а почему вы где-то используете пакмэнеджера yarn а где-то npx?
Так получается
Здравствуйте, а в пайчарме аналогично нужно подключать?
Понятия не имею что такое «пайчарме», но в большинстве своём настройки библиотек одинаковы не зависимо от среды исполнения
@@YauhenKavalchuk Pycharm, это как в Js Webstorm, среда разработки
И можно использовать в python?
Если честно, понятия не имею
Помогите пожалуйста с 7.40 минуты не получается активировать yarn build
Что делать если всё время пишет при вводе команды yarn build - error command "build" not found?
Под видео есть ссылка на репозиторий - сверьте код. Если всё как в видео, то проверьте папку из которой вы запускаете эту команду - вы должны быть в корне проекта
У кого не работает yarn или не установлен используйте для сборки и запуска проекта npm run build
👍
Вы забыли про yarnб он не в каждом челе установлен по default )
👍
Помогите пожалуйста совсем не получается ввести команду yarn add -D tailwindcss postcss, выбивает ошибку
А у вас установлен yarn?
Да
А ввёл команду через npm по вашему совету в комментарии прошлом
Значит yarn не установлен
@@YauhenKavalchuk да извините у меня били не все плагины установлены, но теперь всё работает. Вот теперь нету не каких изменений в браузере. Я работаю на Виндовсе 11 может что то с ним не так ?
Странно.. с одной стороны ты не показываешь как пользоваться git для работы над проекто, с другой - разжевываешь что такое эммет, ты уж опредились для какого уровня урок.
Вся информация о том как работать с проектом находится в GitHub репозитории
Ебать, брат, ты нашел до чего доебаться
А существует объяснение, почему после перезапуска vs code tailwind перестает добавлять нужные стили и приходиться создавать новый проект? При вводе последней команды повторно выскакивает ошибка
Неа, понятия не имею почему у вас так странно работает(
сделал все четко по инструкции, не работает...
Странно… в репозитории есть ссылка на установку, перепроверьте может что-то обновилось. Либо выкачайте репозиторий
Спасибо за уроки, только одно прям режет слух, это произношение, не хочу показаться невеждой, с уважением отношусь к людям которые делятся опытом, но правильно говорить "тэйлуинд"
Ok
> tailwind@1.0.0 build
> tailwindcss build -i src/main.css -o public/style.css
Rebuilding...
warn - No utility classes were detected in your source files. If this is unexpected,
double-check the `content` option in your Tailwind CSS configuration.
Что делать? index.html указан в content, что ему еще надо? Также не работают стили, которые я прописываю в class в теге
Не видя весь код трудно что-то подсказать. Если всё делали по урокам, то сверьте с кодом из репозитория (ссылка в описании)