Course : Tailwind CSS, mastery and best practicesCreate and customize modern web interfaces with Tailwind CSS
Practical course - 2d
- 14h00 - Ref. TCS
|
Download in PDF format
Share this course by email
 | Understand the principles of Tailwind CSS and set up a project |
| Master basic utility classes and create your first responsive interface |
| Customize Tailwind and build a library of reusable components |
| Integrate Tailwind into a maintainable, optimized business project |
Intended audience
Front-end developers, web integrators, web designers.
Prerequisites
Basic knowledge of HTML and CSS. Experience with a JavaScript framework (React, Vue or Angular) is a plus.
Practical details
Hands-on work
Suite of practical exercises for the incremental development of a true enterprise application integration solution.
Teaching methods
Theoretical presentations accompanied by examples of implementation, then use of the knowledge acquired to carry out a specific project.
Course schedule
1 Fundamentals and implementation
- Introduction and utility-first philosophy.
- Comparison with classic CSS and frameworks.
- Installation via CDN and modern tools (Vite, Bun).
- Role and use of tailwind.config.js.
- Organization of project structure.
- Discover automatically generated classes.
Hands-on work
Create a Tailwind project and apply the first classes.
2 Utility classes and responsiveness
- Typography and text colors.
- Spacing with margin, padding and gap.
- Layout with flexbox and grid.
- Colors, borders and backgrounds.
- Breakpoints and responsive design.
- Variants: hover, focus, dark mode.
Hands-on work
Create a complete responsive page.
3 Customization and reusable components
- Adapt the color palette to a graphic charter.
- Define custom fonts, sizes and breakpoints.
- Use official plug-ins (forms, typography, aspect-ratio).
- Discover third-party plug-ins (daisyUI, tailwind-variants).
- Use Tailwind 4.x directives (@theme, @layer, @plugin, @apply).
- Create reusable components.
Hands-on work
Build a library of custom components.
4 Professional project and optimization
- Create a complete administration dashboard.
- Stylize tables and forms.
- Apply integrated accessibility rules.
- Optimize CSS size with integrated purging.
- Integrate Tailwind with modern tools (Vite, Bun) and frameworks (React, Vue, Angular).
- Control performance and accessibility with Lighthouse.
Hands-on work
Finalize and optimize the complete dashboard.
PARTICIPANTS
Front-end developers, web integrators, web designers.
PREREQUISITES
Basic knowledge of HTML and CSS. Experience with a JavaScript framework (React, Vue or Angular) is a plus.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Front-end developers, web integrators, web designers.
PREREQUISITES
Basic knowledge of HTML and CSS. Experience with a JavaScript framework (React, Vue or Angular) is a plus.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TEACHING AIDS AND TECHNICAL RESOURCES
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Dates and locations
Select your location or opt for the remote class then choose your date.
Remote class
Dernières places
Date garantie en présentiel ou à distance
Session garantie