Log In
0% completed
All Lessons
Free Lessons (4)
Overview
Introduction to the Course
Getting Started with Tailwind CSS
CSS Frameworks
Design System
Tailwind Basics
Building a Blog Starter Template
Creating the Main Content Area
Creating the Side Content Area
Creating the Newsletter Form Section
Conclusion: Getting Started with Tailwind CSS
Quiz: Getting Started with Tailwind CSS
Challenge: Creating a Header with Tailwind CSS
Solution: Creating a Header with Tailwind CSS
Going Beyond the Basics
Advanced Tailwind
Creating Tailwind Components
Building Tailwind Components with Vue
Creating a Responsive Layout
Configuring Tailwind’s Styles
Conclusion: Going Beyond the Basics
Quiz: Going Beyond the Basics
Challenge: Creating a Sticky Note Component with Vue
Solution: Creating a Sticky Note Component with Vue
Building Complex Designs with Tailwind
Building Complex and Flexible Layouts with Tailwind’s Grid Utilities
Creating Grid Layouts
Creating a Complete Article Design
Adding Image Effects
Conclusion: Building Complex Designs with Tailwind
Quiz: Building Complex Designs with Tailwind
Challenge: Building a Cells Grid in Tailwind
Solution: Building a Cells Grid in Tailwind
Customizing Tailwind and Optimizing Your Workflow
Customizing Tailwind
Customizing Tailwind’s Theme Colors
Customizing Tailwind’s Spacing Utilities
A Practical Customization Example
Adding Base Classes
Creating Configuration Presets
Conclusion: Customizing Tailwind and Optimizing Your Workflow
Quiz: Tailwind Customization and Optimization
Challenge: Creating a Color Preset
Solution: Creating a Color Preset
Working with Tailwind Plugins
Using the Official Tailwind Plugins
Adding the prose Class
Customizing Plugins
Building Custom Tailwind Plugins
Creating the Arrows Plugin
Conclusion: Working with Tailwind Plugins
Quiz: Tailwind Plugins
Challenge: Making Modifications to an Article
Solution: Making Modifications to an Article
Conclusion
Wrap Up
Understanding the Basics of Tailwind CSS
/
...
/
Solution: Creating a Color Preset
Solution: Creating a Color Preset
Review the solution to creating a color preset in this lesson.
We'll cover the following...
Solution
Code explanation
Solution
...