Web Development · WDC-107

Angular with Tailwind CSS

Angular with Tailwind CSS is a foundation course in building single-page applications with Angular, from standalone components, signals, data binding and routing to forms with validation, pipes and connecting to a backend, with responsive layouts built in Tailwind CSS. It suits developers, IT managers and anyone with basic JavaScript, and you leave able to deploy your own landing page.

Updated 8 Oct 2026

From 8,550 THB / person 9,500 −10% excl. VAT 7% · group rates available

Corporate training quote See open rounds

PDFDownload the course outline

Duration18 hours · 3 days
FormatOnsite / live online
Next round10–12 Nov 26
CertificateIncluded

Course overview

Angular is the framework many organisations choose for medium to large web applications, thanks to its clear structure and complete built-in tooling. Angular has changed a great deal in recent years, with standalone components replacing NgModules, signals, built-in control flow and Signal Forms, while Tailwind CSS 4 now configures through CSS instead of a JavaScript file. Much older sample code no longer works or is no longer the right place to start.

This course lays the foundations for building single-page applications with Angular 22 and Tailwind CSS 4 the way they are used today. Learners create a project with the Angular CLI, add Tailwind CSS with ng add and design utility-first, responsive interfaces. They then learn standalone components, signals, data binding, control flow, component communication, services and routing, followed by Signal Forms, calling a backend with HttpClient and httpResource, and pipes. Everything comes together in a workshop that builds a landing page and a dashboard, tests them with Vitest and deploys them online. (3 days, 6 hours per day, 18 hours in total, Beginner level.)

What you’ll gain

Understand how Angular has evolved and how earlier practice differs from current Angular
Create and structure an Angular 22 project with standalone components
Design interfaces and responsive layouts with Tailwind CSS 4
Manage state with signals and use data binding with built-in control flow
Build forms with validation using Signal Forms
Connect to a backend with HttpClient and httpResource
Use and create pipes, and set up routing with lazy loading
Test, build and deploy an Angular web app online

Who this course is for

Developers who want to start building web applications with Angular and Tailwind CSS
Developers coming from AngularJS or older Angular versions who want to adopt current practice
Front-end developers who want to design interfaces faster with Tailwind CSS
IT managers and tech leads who evaluate or set Angular practices for their team
Anyone with basic JavaScript and programming experience

Prerequisites

Basic JavaScript such as variables, functions, arrays, objects and classes
A basic understanding of how web services and REST APIs work
Some programming experience, for example in PHP, C# or Java
A laptop that can run Node.js and VS Code, with permission to install software

Curriculum

Course Details

This course is the 2026 edition, updated from Angular 19 to Angular 22 and the current Tailwind CSS 4. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs that build up to a landing page and a dashboard. Beginner level. It uses standalone components, signals, input(), output() and model(), Signal Forms, httpResource and Vitest in line with current practice, in place of NgModules, template-driven forms and Karma, and a local mock REST API in place of Firebase. Unlike a general Angular foundation course, every lab designs its screens with Tailwind CSS. All tools are open source or have a free tier. Learners take home a lab guide and sample code for every lab.

Day 1 Angular CLI, Tailwind CSS and Components

Section 1: Lab: Getting Started with Angular 22

An overview of Angular, how it differs from AngularJS and the key changes in recent versions
Install Node.js and the Angular CLI, then create a project with ng new
Project structure: main.ts, app.config.ts and standalone components
Zoneless change detection and OnPush, now the defaults in current Angular
Lab: run the project with ng serve and install Angular DevTools

Section 2: TypeScript for Angular

Types, interfaces and union types used often in Angular
Classes, access modifiers and basic generics
ES modules, import and export in a project
async/await, promises and an overview of RxJS observables
Lab: model product data with interfaces

Section 3: Lab: Adding Tailwind CSS 4 to Angular

The utility-first idea and how it differs from component-based CSS frameworks
Install with ng add tailwindcss and @import "tailwindcss" in styles.css
Utilities for spacing, typography, colour, flexbox and grid
Define brand colours, fonts and design tokens with @theme
Lab: lay out the home page with utility classes

Section 4: Responsive Design and Customisation

Mobile-first breakpoints and container queries
hover, focus and dark mode states with variants
Create your own utilities with @utility and add plugins with @plugin
Choosing between utility classes in templates and component styles
Lab: a navbar, cards and a footer that work on every screen size

Section 5: Lab: Standalone Components

Create components with ng generate and the parts of @Component
Component templates, styles and selectors
Import the components, directives and pipes a component uses
Organise folders by feature
Lab: split the landing page into reusable components

Day 2 Signals, Data Binding, Services and Routing

Section 6: Signals and Reactivity

signal(), set() and update() to hold state
computed() for derived values, and linkedSignal()
effect() and the cautions that come with it
How signals work with zoneless change detection
Lab: a shopping cart that totals itself automatically

Section 7: Lab: Data Binding and Control Flow

Interpolation, property binding, event binding and two-way binding
Built-in control flow: @if, @for with track, and @switch
Declare template variables with @let
Load non-essential parts later with @defer
Lab: a product list you can search and filter

Section 8: Component Communication

Receive values with input() and input.required()
Emit events with output() and bind two ways with model()
Content projection with ng-content
Attribute, class and style binding
Lab: a modal and a product card that take inputs and emit events

Section 9: Services and Dependency Injection

Move logic out of components into services
inject(), providedIn: 'root' and the new @Service() decorator in Angular 22
Keep state shared across pages in a service with signals
Lab: a CartService shared across the whole app

Section 10: Lab: Routing

Configure routes with provideRouter and render them with RouterOutlet
Navigate with routerLink, routerLinkActive and Router.navigate()
Route parameters, query parameters and receiving them through component inputs
Lazy loading with loadComponent and loadChildren
Functional route guards for pages that require login

Day 3 Forms, Backend and Workshop

Section 11: Lab: Forms with Signal Forms

Create the form model with signal() and form()
Bind inputs with the FormField directive
Built-in validators such as required, email and minLength
Show error messages based on the touched and invalid states
An overview of Reactive Forms, still common in existing projects

Section 12: Lab: Connecting to a Backend

Set up provideHttpClient() and a local mock REST API
GET, POST, PUT and DELETE with HttpClient and typed responses
Reactive data fetching with httpResource, with loading and error states
Interceptors to attach tokens and handle errors in one place
Lab: a product admin page that creates, edits and deletes through the API

Section 13: Pipes

Built-in pipes: date, currency, number, uppercase and json
Pass parameters to pipes and chain several pipes
Create a standalone custom pipe
The async pipe with observables, and when to use a signal instead
Lab: pipes that show prices and order status in Thai

Section 14: Workshop: Landing Page and Dashboard

Plan the structure of the landing page and the dashboard
Design the interface with Tailwind CSS, including dark mode
Add a contact form with Signal Forms and load data from the API
Check responsiveness and keyboard accessibility

Section 15: Workshop: Test, Build and Deploy

Basic component and service tests with Vitest
Use an AI assistant to write and explain code, and check the result before using it
Build for production and check the bundle size
Deploy to free static hosting such as Netlify, Vercel or Render
Workshop: deploy the landing page and the dashboard live

Schedule & training options

For individuals — public rounds

10–12November

Classroom10–12 Nov 26

20 seats left

12–14January

Classroom12–14 Jan 27

20 seats left

16–18March

Classroom16–18 Mar 27

20 seats left

25–27May

Classroom25–27 May 27

20 seats left

13–15July

Classroom13–15 Jul 27

20 seats left

7–9September

Classroom7–9 Sep 27

20 seats left

2–4November

Classroom2–4 Nov 27

20 seats left

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

How do you install Tailwind CSS 4 in an Angular project?

The simplest way is to run ng add tailwindcss in the project folder. The Angular CLI installs the required packages, configures the build and adds @import "tailwindcss" to styles.css for you. You can then use utility classes in templates straight away, and define brand colours or fonts in @theme, with no tailwind.config.js file as in older versions.

What is built-in control flow in Angular, and how does it replace ngIf and ngFor?

Built-in control flow is template syntax built into Angular: @if with @else for conditional display, @for for looping over lists and @switch for multiple cases. It needs no directive imports and reads more clearly than the older *ngIf and *ngFor. @for requires a track expression so Angular updates only the items that change, and @empty shows content when the list is empty.

What are signals in Angular, and how do they differ from ordinary variables?

A signal is a value whose changes Angular can track. You create it with signal(), read it by calling it as a function and change it with set() or update(). When the value changes, Angular updates only the parts of the screen that use it, and computed() recalculates values that depend on other signals automatically. Signals underpin current Angular, including input(), model(), Signal Forms and httpResource.

Who is the Angular with Tailwind CSS course for, and what should I know beforehand?

It suits developers, front-end developers, IT managers and anyone who wants to start building web applications with Angular and Tailwind CSS, including those who used older Angular versions and want to adopt current practice. You should understand basic JavaScript and how web services work, and have done some programming, for example in PHP, C# or Java.

What will I be able to do after the Angular with Tailwind CSS course?

You will be able to create Angular projects with standalone components, manage state with signals, use data binding, control flow and routing, build forms with validation using Signal Forms, use and create pipes, call a backend with HttpClient and httpResource, design responsive pages with Tailwind CSS 4, test with Vitest and deploy a landing page online. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the Angular with Tailwind CSS course be run in-house for our team?

Yes. It can be run in-house for your team, with examples adapted to your work, such as building screens and forms similar to your internal systems. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.

Articles are published in Thai.