Overview
Tailwind CSS is a utility-first CSS framework for building custom user interfaces rapidly. It provides a vast catalog of CSS classes and tools, allowing users to style websites and applications easily.
This instructor-led, live training (online or onsite) is aimed at developers who want to learn and use Tailwind CSS to build and style user interfaces.
By the end of this training, participants will be able to:
- Learn how to set up a dev environment with Tailwind CLI.
- Create components and edit layouts with Tailwind CSS.
- Use Tailwind utility classes to style elements.
- Master the Tailwind CSS basics.
- Create modern websites using Tailwind CSS.
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
Requirements
- Basic knowledge of HTML and CSS
Audience
- Developers
Course Outline
Introduction
- Overview of Tailwind CSS
Getting Started
- Installing Tailwind CSS
- Installing Node
- Installing VS code
- Setting up the environment
Tailwind CSS Basics
- Attaching Tailwind CSS with HTML
- Creating containers with utility classes
- Adding width and height properties
- Understanding how flexbox works
- Wrapping and resizing flex items
- Creating grid and row layout
- Adjusting the flow of elements in a grid layout
- Adding gap between and justifying items
- Justifying individual items
- Adding padding and margins to elements
- Styling text using Tailwind utility classes
- Adding and styling borders
- Adding shadows to elements
- Using breakpoints to add responsive behavior
- Using Pseudo selectors
- Layer and apply directives
- Using components for code reuse
Setting Up a Better Dev Environment
- Creating an environment with Tailwind CLI
- Directives and Functions
Summary and Next Steps