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

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

Exploring the key advantages of Tailwind CSS
03:54 MIN

Exploring the key advantages of Tailwind CSS

Level up your Angular CSS with Tailwind CSS

Rapidly styling a user interface with Tailwind CSS
08:24 MIN

Rapidly styling a user interface with Tailwind CSS

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

Integrating with the web ecosystem and tooling
24:31 MIN

Integrating with the web ecosystem and tooling

Lynx: Native for 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

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners29:01

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

Marius Obert

What’s New and What’s Next in Web UI22:46

What’s New and What’s Next in Web UI

Cleyra Uzcategui

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

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

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

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
BR
Benjamin Ruschin
Creating a 3D Card Fan with CSS Transforms
So many of us developers use CSS every day, but the chances are we only use a very small portion of its features, and overlook many of its most fun ones. You only need cruise Codepen to find some mind-bendingly impressive CSS-based projects using 3D ...
Creating a 3D Card Fan with CSS Transforms
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript

From learning to earning

Jobs that call for the skills explored in this talk.