Ask an Expert: Get started with Tailwind CSS

Scrimba ยท Beginner ยท๐Ÿš€ Entrepreneurship & Startups ยท4y ago
๐ŸŽ“ View our courses: https://scrimba.com/links/all-courses This week, we are joined by tech educator Shruti Balasa, who's here to get us started with Tailwind CSS! ๐ŸŒฌ Contents ๐ŸŒฌ 0:00 - Introduction 2:50 - Why use Tailwind? 6:36 - I want to create an event website, can I create it entirely using Tailwind? 7:42 - How does Tailwind compare to Bootstrap or Material UI? 9:22 - Shrutiโ€™s Tailwind demo 32:07 Michael links to an awesome talk about Utility first vs. Utility Last 32:29 - Do you need to know much CSS to use Tailwind? 35:19 - How would you recreate a design given to you with Tailwind since there are predetermined utility classes? 41:29 - Is there a danger of making sites that look formulaic without the full freedom of CSS? 42:50 - How do you handle site maintenance with Tailwind? 47:02 - Are all CSS properties included in Tailwind? 48:20 - Browser support 50:42 - How can you use Tailwind on a project locally? 52:53 - Shruti talks about her new book 56:37 - Whatโ€™s the most amazing thing about Tailwind for you? ๐Ÿ’ปCheck out Scrimbaโ€™s interactive learning platform: Scrimba: https://scrimba.com/ ๐ŸฆSay hi on Twitter: Scrimba: https://twitter.com/scrimba Leanne: https://twitter.com/RybaLeanne Shruti: https://twitter.com/shrutibalasa
Watch on YouTube โ†— (saves to browser)
Sign in to unlock AI tutor explanation ยท โšก30

Playlist

Uploads from Scrimba ยท Scrimba ยท 0 of 60

โ† Previous Next โ†’
1 CSS Grid Course: Learn the Basics in 3 Minutes
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
2 CSS Grid Course: Positioning Items
CSS Grid Course: Positioning Items
Scrimba
3 CSS Grid Course: Why Learn It And How It Compares To Bootstrap
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
4 CSS Grid Course: auto-fit & minmax
CSS Grid Course: auto-fit & minmax
Scrimba
5 CSS Grid Course: Implicit Rows
CSS Grid Course: Implicit Rows
Scrimba
6 CSS Grid Course: Fraction Units And Repeat
CSS Grid Course: Fraction Units And Repeat
Scrimba
7 CSS Grid Course: Justify Items and Align Items
CSS Grid Course: Justify Items and Align Items
Scrimba
8 CSS Grid Course: An Awesome Image Grid
CSS Grid Course: An Awesome Image Grid
Scrimba
9 CSS Grid Course: Named Lines
CSS Grid Course: Named Lines
Scrimba
10 CSS Grid Course: auto-fit vs auto-fill
CSS Grid Course: auto-fit vs auto-fill
Scrimba
11 CSS Grid Course: Justify Content and Align Content
CSS Grid Course: Justify Content and Align Content
Scrimba
12 CSS Grid Course: Template areas
CSS Grid Course: Template areas
Scrimba
13 27. Setting up the structure - Responsive CSS Tutorial
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
14 25. Making the navigation responsive - Responsive CSS Tutorial
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
15 36. Playing with the title's position and negative margins - Responsive CSS Tutorial
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
16 31. Starting the CSS for our page - Responsive CSS Tutorial
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
17 26. Taking a look at the rest of the project - Responsive CSS Tutorial
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
18 15. Spacing out the columns - Responsive CSS Tutorial
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
19 33. Starting to think mobile first - Responsive CSS Tutorial
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
20 22. Making our navigation look good - Responsive CSS Tutorial
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
21 37. Changing image size with object-fit - Responsive CSS Tutorial
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
22 44. Module Wrap up - Responsive CSS Tutorial
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
23 16. Controlling the vertical position of flex items - Responsive CSS Tutorial
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
24 39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
25 42. Setting up the About Me page - Responsive CSS Tutorial
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
26 35. Changing the visual order with flexbox - Responsive CSS Tutorial
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
27 23. Adding the underline - Responsive CSS Tutorial
23. Adding the underline - Responsive CSS Tutorial
Scrimba
28 21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
29 20. Creating a navigation - Responsive CSS Tutorial
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
30 40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
31 43. Fixing up some loose ends - Responsive CSS Tutorial
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32 32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
33 24. A more complicated navigation - Responsive CSS Tutorial
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
34 28. Feature article structure - Responsive CSS Tutorial
28. Feature article structure - Responsive CSS Tutorial
Scrimba
35 34. Styling the featured article - Responsive CSS Tutorial
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
36 18. Making layout responsive with flex direction - Responsive CSS Tutorial
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
37 19. flex direction explained - Responsive CSS Tutorial
19. flex direction explained - Responsive CSS Tutorial
Scrimba
38 41. Creating the recent posts page - Responsive CSS Tutorial
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
39 17. Media Query basics - Responsive CSS Tutorial
17. Media Query basics - Responsive CSS Tutorial
Scrimba
40 30. Home Page. HTML for the aside - Responsive CSS Tutorial
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
41 38. Styling recent articles for large screens - Responsive CSS Tutorial
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
42 29. The home page.  HTML for the recent articles - Responsive CSS Tutorial
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
43 10. ems and rems   an example - Responsive CSS Tutorial
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
44 1. Starting to think responsively - Responsive CSS Tutorial
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
45 4. Controlling the width of images - Responsive CSS Tutorial
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
46 5. min width and max width - Responsive CSS Tutorial
5. min width and max width - Responsive CSS Tutorial
Scrimba
47 3  CSS Units.  Percentage - Responsive CSS Tutorial
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
48 11. Flexbox  refresher and setting up some HTML - Responsive CSS Tutorial
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
49 12. Basic Styles and setting up the columns - Responsive CSS Tutorial
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
50 8. The Solution Rems - Responsive CSS Tutorial
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
51 14. Setting the columns widths - Responsive CSS Tutorial
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
52 2  CSS Units - Responsive CSS Tutorial
2 CSS Units - Responsive CSS Tutorial
Scrimba
53 7. The problem with ems - Responsive CSS Tutorial
7. The problem with ems - Responsive CSS Tutorial
Scrimba
54 6. CSS Units. The em unit - Responsive CSS Tutorial
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
55 13. Adding the background color - Responsive CSS Tutorial
13. Adding the background color - Responsive CSS Tutorial
Scrimba
56 9. Picking which unit to use - Responsive CSS Tutorial
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
57 Tutorial to Learn Alpine JS - Full Course for Beginners
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
58 Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
59 Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
60 Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba

Related AI Lessons

โšก
Deinen ersten Online-Kurs in 7 Tagen erstellen: Schritt fรผr Schritt
Create your first online course in 7 days with a step-by-step guide, covering topic selection, planning, and production
Dev.to AI
โšก
๐Ÿ‘จ๐Ÿฟโ€๐Ÿš€TechCabal Daily โ€“ It takes ten to Yango
Stay updated on Africa's tech landscape with news on Yango's expansion, Vodacom-Safaricom deal, and Toyota's first EV launch in South Africa
TechCabal
โšก
One Platform For Every Asset Class: Real Estate and Infrastructure
Learn how to allocate assets on a single platform, including real estate, using SPV formation for property syndications
Medium ยท Startup
โšก
One Platform For Every Asset Class: Venture Capital Made Simple
Learn how to simplify venture capital investments with a one-platform approach for every asset class
Medium ยท Startup

Chapters (15)

Introduction
2:50 Why use Tailwind?
6:36 I want to create an event website, can I create it entirely using Tailwind?
7:42 How does Tailwind compare to Bootstrap or Material UI?
9:22 Shrutiโ€™s Tailwind demo
32:07 Michael links to an awesome talk about Utility first vs. Utility Last
32:29 Do you need to know much CSS to use Tailwind?
35:19 How would you recreate a design given to you with Tailwind since there are pre
41:29 Is there a danger of making sites that look formulaic without the full freedom
42:50 How do you handle site maintenance with Tailwind?
47:02 Are all CSS properties included in Tailwind?
48:20 Browser support
50:42 How can you use Tailwind on a project locally?
52:53 Shruti talks about her new book
56:37 Whatโ€™s the most amazing thing about Tailwind for you?
Up next
The Leadership Lessons Hidden Inside High-Performance Marketing Systems
Digital Web Solutions
Watch โ†’