Back to Browse

Tailwind CSS Introduction, Basics & Guided Tutorial

121.1K views
Sep 16, 2022
22:04

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 full-stack 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/WebDevRoadmap-JrtoSr 🚩 Subscribe ➜ https://bit.ly/3nGHmNn πŸ“¬ Course Updates ➜ https://courses.davegray.codes/ ❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh β˜• Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray πŸ‘‡ Follow Me On Social Media: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ πŸ”— All Resources for this Tailwind CSS Course: https://github.com/gitdagray/tailwind-css-course πŸ”— 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 Pre-requisites for this Tailwind CSS course: πŸ”—HTML for Beginners full course: https://youtu.be/mJgBOIoGihA πŸ”—CSS for Beginners full course: https://youtu.be/n4R2E7O-Ngo πŸ“š 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/items?itemName=ritwickdey.LiveServer πŸ”— Tailwind CSS Intellisense VS Code Extension: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss πŸ”— Inline Fold VS Code Extension: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold Was this tutorial on Tailwind CSS helpful? If so, please share. Let me know your thoughts in the comments. #tailwind #css #introduction

Download

1 formats

Video Formats

360pmp432.3 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Tailwind CSS Introduction, Basics & Guided Tutorial | NatokHD