Tailwind CSS Crash Course
In this crash course, you'll learn what Tailwind CSS is, how it differs from other frontend frameworks, and you'll then build a one page project. You'll learn how to install Tailwind CSS using NPM, how to customise Tailwind, and you'll build elements such as pricing tables and feature summaries. We'll also discuss whether you should be creating CSS components or just using CSS utilities in your HTML.
At the end of the project, we'll compile our code, add the project to a Github repository, and then finally, we'll launch the project on Vercel.
Preview what you'll be building:
https://youtube-tailwindcss.vercel.app/
Github repository for this course (you need this if you want to code along):
https://github.com/PixelRocket-Shop/y...
My website
https://www.pixelrocket.store
Timestamps
0:00 Intro
0:40 What is Tailwind CSS
5:00 Setup build process
16:30 Install Tailwind CSS via NPM
20:00 Setup CSS imports
21:54 Install PostCSS plugin
25:58 Customise colours
31:38 Customise font
33:03 Add base styles
34:30 Build navbar
37:25 Build hero
52:06 Build button component
59:37 Customise headings
1:09:56 Build logo cloud
1:16:20 Handle responsive menu
1:28:18 Build features
1:33:38 Build pricing table
1:50:52 Build footer
1:53:50 Compile production site
1:55:49 Add Github repository
1:59:50 Launch website on Vercel
Смотрите видео Tailwind CSS Crash Course онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Pixel Rocket 20 Март 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 6,058 раз и оно понравилось 227 людям.