Patricio Vargas

Level up your Angular CSS with Tailwind CSS

Tired of fighting with CSS? Learn how Tailwind's utility classes let you build custom, responsive designs directly in your Angular templates.

Level up your Angular CSS with Tailwind CSS
#1about 3 minutes

Understanding the fundamentals of Tailwind CSS

Tailwind CSS is a utility-first framework that uses predefined classes directly in your HTML to speed up development.

#2about 2 minutes

Comparing Tailwind with frameworks like Bootstrap

Unlike component libraries such as Bootstrap, Tailwind provides low-level utility classes for creating custom design systems without specificity conflicts.

#3about 2 minutes

How Tailwind solves common CSS challenges

Tailwind addresses issues like verbosity and separation of concerns by providing concise utilities that live alongside your HTML.

#4about 7 minutes

Live coding a product card with utility classes

A practical demonstration shows how to style an image and center content using Tailwind's Flexbox and sizing utilities directly in the HTML.

#5about 5 minutes

Customizing your design system with tailwind.config.js

The tailwind.config.js file allows you to define custom theme values like brand colors, which can then be used throughout the application.

#6about 2 minutes

Arranging components with the Tailwind grid system

Learn how to implement a responsive grid layout by applying grid, column, and gap utility classes to a container element.

#7about 5 minutes

Creating reusable components with the @apply directive

The @apply directive helps keep HTML clean by composing multiple utility classes into a single, reusable CSS class within a stylesheet.

#8about 3 minutes

Q&A on integration, purging, and refactoring

Key questions are answered regarding combining Tailwind with other libraries, how purging keeps production bundles small, and strategies for refactoring a design system.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Matching moments

Why tools like Tailwind abstract away the platform
31:16 MIN

Why tools like Tailwind abstract away the platform

Keith Cirkle of GitHub on React Fatigue

Integrating with the web ecosystem and tooling
24:31 MIN

Integrating with the web ecosystem and tooling

Lynx: Native for More

Exploring new functionality for the CSS attr() function
06:24 MIN

Exploring new functionality for the CSS attr() function

The weekly developer show: Boosting Python with CUDA, CSS Updates & Navigating New Tech Stacks

Returning to foundational web technologies like RSS and HTML
36:09 MIN

Returning to foundational web technologies like RSS and HTML

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

How to set up Tailwind CSS in an Angular project
07:30 MIN

How to set up Tailwind CSS in an Angular project

Level up your Angular CSS with Tailwind CSS

Understanding the purpose of Tailwind CSS
01:16 MIN

Understanding the purpose of Tailwind CSS

Level up your Angular CSS with Tailwind CSS

Styling the application with Tailwind CSS and UI
05:50 MIN

Styling the application with Tailwind CSS and UI

Build Your Own Subscription-based Course Platform

Debating the merits of Tailwind CSS versus the cascade
58:16 MIN

Debating the merits of Tailwind CSS versus the cascade

WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more

Featured Partners

Related Videos

See all videos
Level up your Angular CSS with Tailwind CSS47:46

Level up your Angular CSS with Tailwind CSS

Patricio Vargas

Angular Magical directives29:11

Angular Magical directives

Valentine Awe

The Illusion of a Performant Web Application28:56

The Illusion of a Performant Web Application

Cathrin Möller

Angular tips/tricks you can use from tomorrow on50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Angular Features You Should be Using36:22

Angular Features You Should be Using

Sani Yusuf

State of Angular41:34

State of Angular

Jessica Janiuk

Angular <> Angular CDK - Awesomeness Combined35:49

Angular <> Angular CDK - Awesomeness Combined

Muhammad Ahsan Ayaz

Angular Unleashed: Mastering Modern Web Development with Angular58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

From learning to earning

Jobs that call for the skills explored in this talk.