Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this Tailwind CSS Introduction, Basics & Guided Tutorial, you will learn what Tailwind CSS is, what you need to use Tailwind CSS, how to setup Tailwind CSS and create an example Tailwind CSS project.

Become a fullstack web dev with Zero To Mastery Courses:
The Complete Web Developer: https://bit.ly/WebDevMaster
The Complete Web Designer: https://bit.ly/CompWebDesign
Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmapJrtoSr

Subscribe ➜ https://bit.ly/3nGHmNn

Course Updates ➜ https://courses.davegray.codes/

❓ Questions Please post them to my Discord ➜   / discord  

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  

All Resources for this Tailwind CSS Course: https://github.com/gitdagray/tailwind...

Playlist for this Tailwind CSS Course: https://bit.ly/3BKYrzg

Tailwind CSS Introduction, Basics & Guided Tutorial

(00:00) Intro
(00:05) Welcome
(00:14) What is Tailwind CSS?
(01:27) Course Prerequisites
(01:49) Web Dev Tools & Settings
(04:50) Tailwind CSS Config file
(07:13) input.css file
(09:00) Compile the style.css file
(11:13) Compiling with watch
(12:46) Starting Live Server
(13:31) Tailwind CSS Intellisense
(14:50) Using Tailwind docs to find class names
(16:51) Creating a bullseye with Tailwind
(18:01) Adding a custom class to input.css
(19:47) Handling class clutter in your HTML

Suggested Prerequisites for this Tailwind CSS course:
HTML for Beginners full course:    • HTML Full Course for Beginners | Comp...  
CSS for Beginners full course:    • CSS Full Course for Beginners | Compl...  

Tutorial References:
Tailwind CSS: https://tailwindcss.com/

⚙ Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Node.js: https://nodejs.org/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Live Server VS Code Extension: https://marketplace.visualstudio.com/...
Tailwind CSS Intellisense VS Code Extension: https://marketplace.visualstudio.com/...
Inline Fold VS Code Extension: https://marketplace.visualstudio.com/...

Was this tutorial on Tailwind CSS helpful? If so, please share. Let me know your thoughts in the comments.

#tailwind #css #introduction