Tailwind CSS v3.2 Crash Course - Build a responsive conference landing page

Get started with Tailwind CSS and get yourself familiar about everything in this framework. We’re going to build a cool conference landing page using Tailwind CSS and learn things along the way. We’ll also learn how to make it responsive.

If you liked this video, you'll love my eBook too. Check out "Complete Guide to CSS Flexbox & Grid" in both Vanilla CSS & Tailwind CSS versions:

Chapters:

00:00:00 Introduction
00:01:20 What is Tailwind CSS
00:03:30 Build a component in Playground
00:16:36 Install Tailwind CSS
00:29:56 Customizing Tailwind CSS
00:35:48 Using arbitrary values
00:42:14 Responsive layouts in Tailwind
00:50:02 Theme and Screen functions
00:53:33 Prepare for production and deploy

Subscribe and stay tuned for tips, tutorials and more.

#tailwindcss #css #responsive_web_design #responsivelandingpages

[PhillipHarrington-mhjg]

The math around pixel & rems alone was super helpful 🤯

[UnyimeUdoh-nylp]

Believe me this course is better than most popular tailwind courses out there. I have tried others as a beginner

[vikrammahto]

So far best crash course on Tailwind CSS for me.

[sidarjunful]

best concise course on css with easy to understand language

[angwechima]

thanks so much this is the best tailwind video i have ever watched

[MrKourafex]

I'm so glad i found you!! I bought your books as well very useful and well though

[WebDeveloper-xsuf]

I made a single page in html and tailwind cli. In visual sc I see the liver server version works ok. When i upload to server via Filezilla, the styling falls apart. What actual files do I upload to the htdocs folder on the server or public.html folder? I can't seem to find a video on yt about uploading the files to a server. Thanks.

[Qynnie]

Really like your teaching style! I'm making a blog for the first time in a decade, and want to use Eleventy, and from there heard about tailwindcss, and this video in particular was a great intro. Going to continue with the rest of the course. Thank you for your efforts!

[lovelyfox-kzko]

Excellet tutorial! Thanks for your explanation, and especially for the details, such as "antialiased". 推薦這個教學影片!

[lokithor]

Thank you Madam! Fantastic presentation!

[PhillipHarrington-mhjg]

Protip: install node/npm w/ nvm, node version manager. When working with multiple projects there are sometimes older versions which are not compatible w/ the latest/greatest npm, so being able to have multiple versions of npm installed and easily switching is a great help. Might make a good video if you haven't touched on that already

[talkathiriify]

Very smooth and clear explanation.
Thank you very much.

[DharmeshPrajapatiM]

Very useful tutorial. Great teaching style

[dummymail]

How do you use hex color coming from api as color for any element in talwind css? I tried using arbitrary value technique but doesn't seem working. Please help

[LifeStudio]

How do you get to a specific design while creating a personal project?

[spiritualforce]

Thanks mam finally I have completed the video!

[whitefieldmba]

HI, the last lines of code is giving me error.
@media screen(lg) {
body {
background: linear-gradient(to right, white 0%, white 60%, theme('colors.violet.500') 60%, theme('colors.violet.500') 100%);
}
}

[mohammadthousif]

Can make a video on the future of web development for those who are aspiring to become one ??

[PcHabitat]

Nice can’t wait to start this tutorial

[nimostic]

hey mam i follow your step but "prod" minify didn't work it says error can you tell why it shows error .