{"id":19485984,"url":"https://github.com/yauhenkavalchuk/tailwindcss","last_synced_at":"2025-04-25T18:31:45.884Z","repository":{"id":107120273,"uuid":"448521640","full_name":"YauhenKavalchuk/tailwindcss","owner":"YauhenKavalchuk","description":"Код учебного курса “TailwindCSS” на YouTube-канале webDev (https://tinyurl.com/26x26yb5)","archived":false,"fork":false,"pushed_at":"2024-01-02T21:58:15.000Z","size":2294,"stargazers_count":37,"open_issues_count":0,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T01:04:39.556Z","etag":null,"topics":["css","css3","html","html-css","tailwind","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"http://youtube.com/c/YauhenKavalchuk/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YauhenKavalchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-16T10:28:29.000Z","updated_at":"2025-02-09T16:09:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"a33a122f-1aba-4d05-8343-02b8189881c7","html_url":"https://github.com/YauhenKavalchuk/tailwindcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Ftailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Ftailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Ftailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Ftailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YauhenKavalchuk","download_url":"https://codeload.github.com/YauhenKavalchuk/tailwindcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250872152,"owners_count":21500771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","html-css","tailwind","tailwind-css","tailwindcss"],"created_at":"2024-11-10T20:32:24.028Z","updated_at":"2025-04-25T18:31:45.857Z","avatar_url":"https://github.com/YauhenKavalchuk.png","language":"HTML","funding_links":["https://www.patreon.com/YauhenKavalchuk"],"categories":[],"sub_categories":[],"readme":"# TailwindCSS\n\n### Описание курса:\nВ данном видеокурсе мы с вами рассмотрим TailwindCSS.\nTailwindCSS - это CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения. Вместо традиционного использования одного класса, содержащего набор свойств (компонент), он предоставляет класс, которому соответсвует одно свойство. Tailwind использует набор интуитивно понятных классов, префиксов и суффиксов, которые очень просты для чтения и понимания. По результату курса мы создадим статичную страницу новостного сайта с множеством элементов по типу брэдкрамбы, бейджики, списки тем, пагинации и т.д. Сама же страница будет разработана с использованием подхода mobile first и будет поддерживать тёмную тему.\n\n### Поддержать развитие канала:\n[\u003cimg alt=\"webDev | YouTube Sponsor\" src=\"https://img.shields.io/badge/Become a sponsor-F70000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=fff\" /\u003e][sponsor]\n[\u003cimg alt=\"webDev | Patreon\" src=\"https://img.shields.io/badge/Become a patron-EF6451.svg?\u0026style=for-the-badge\u0026logo=patreon\u0026logoColor=fff\" /\u003e][patron]\n\n---\n\n### Используемые инструменты:\n- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)\n- [Node Package Manager](https://www.npmjs.com)\n- [Lorem ipsum (текст-\"рыба\")](https://www.lipsum.com/)\n- [Heroicons (иконки)](https://heroicons.com/)\n- [Randomuser (фото)](https://randomuser.me/photos)\n\n### Полезные ссылки:\n- [TailwindCSS (документация)](https://tailwindcss.com/)\n\n### Полезные видео:\n- [Плагины для VS Code](https://youtu.be/g8LmiLTXkqo)\n- [HTML (видеокурс)](https://www.youtube.com/watch?v=NUtloXE1L9U\u0026list=PLNkWIWHIRwMFtHHg0amAgocYP-kZypbY7\u0026index=1)\n- [CSS (видеокурс)](https://www.youtube.com/watch?v=8pQKDVRc0T8\u0026list=PLNkWIWHIRwMHUawuIEpPI_tOG7Mfhs_sA\u0026index=1)\n- [CSS Flexbox (видеокурс)](https://www.youtube.com/watch?v=O-ytfplFQ3c\u0026list=PLNkWIWHIRwMG0EUBS8rvTRVNL9IcxcawW\u0026index=1\u0026t=3s)\n- [CSS Grid (видеокурс)](https://www.youtube.com/watch?v=LHW_M9mf4Is\u0026list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21\u0026index=1\u0026t=2s)\n\n---\n\n### Быстрый старт\n- Клонируйте репозиторий: `https://github.com/YauhenKavalchuk/tailwindcss.git`\n- Перейдите в папку с проектом: `cd tailwindcss`\n- Перейдите в нужную ветку соответствующую уроку:\n  - `git checkout lesson_01`\n  - `git checkout lesson_02`\n  - `git checkout lesson_10` и т.д.\n- Установите зависимости: `yarn install`\n- Запустите сборку СCS файл: `yarn build`\n- Откройте `index.html` в браузере\n\n---\n\n### Список уроков:\n- [#0 Введение (Introduction)](https://youtu.be/3bbfisTVMcE)\n- [#1 Установка окружения (Setup Environment)](https://youtu.be/z36GC0fA4OM)\n- [#2 Шрифты и цвета (Fonts \u0026 Colors)](https://youtu.be/U5Jg69DloXQ)\n- [#3 Отступы и граница (Padding, Margin \u0026 Borders)](https://youtu.be/kddzWvIK4pY)\n- [#4 Hover и Декорирование (Hover \u0026 Decoration)](https://youtu.be/UoNGb6Xn46M)\n- [#5 Кнопки (Buttons)](https://youtu.be/G1IH3rNpdB4)\n- [#6 Применение Flexbox (Using Flexbox)](https://youtu.be/mmBIbOfRtOw)\n- [#7 Директивы (Directives)](https://youtu.be/GJyXpidSlCU)\n- [#8 Иконки (Icons)](https://youtu.be/pXawvKcd4zg)\n- [#9 Сеточный макет (Grid Layout)](https://youtu.be/NgFumXMTdx8)\n- [#10 Градиенты (Gradients)](https://youtu.be/uCdfvPLtAJs)\n- [#11 Отзывчивый макет (Responsive Layout)](https://youtu.be/C1uDlLylTyc)\n- [#12 Картинки (Images)](https://youtu.be/eQkfcnhPLT8)\n- [#13 Плавные переходы (Transitions)](https://youtu.be/w0DOvTtZ3_c)\n- [#14 Тёмная тема (Dark Theme)](https://youtu.be/_hy4L-__NOQ)\n- [#15 Пользовательские настройки (Customization)](https://youtu.be/vtWafRDajD0)\n\n---\n\n### Связаться со мной:\n[\u003cimg alt=\"webDev | YouTube\" src=\"https://img.shields.io/badge/youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][youtube]\n[\u003cimg alt=\"webDev | Instagram\" src=\"https://img.shields.io/badge/instagram-E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][instagram]\n[\u003cimg alt=\"webDev | LinkedIn\" src=\"https://img.shields.io/badge/linkedin-0077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" /\u003e][linkedin]\n[\u003cimg alt=\"webDev | Twitter\" src=\"https://img.shields.io/badge/twitter-1DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][twitter]\n[\u003cimg alt=\"webDev | VK\" src=\"https://img.shields.io/badge/vk-4680C2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][vk]\n\n[youtube]: https://youtube.com/YauhenKavalchuk\n[instagram]: https://instagram.com/YauhenKavalchuk\n[linkedin]: https://linkedin.com/in/YauhenKavalchuk\n[vk]: https://vk.com/YauhenKavalchuk\n[twitter]: https://twitter.com/YauhenKavalchuk\n[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join\n[patron]: https://www.patreon.com/YauhenKavalchuk\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Ftailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyauhenkavalchuk%2Ftailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Ftailwindcss/lists"}