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.

Matching moments

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The challenge of keeping up with modern CSS
07:46 MIN

The challenge of keeping up with modern CSS

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Highlighting active sections with CSS scroll-driven animations
06:17 MIN

Highlighting active sections with CSS scroll-driven animations

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS 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

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

Angular Magical directives29:11

Angular Magical directives

Valentine Awe

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

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

Cleyra Uzcategui

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
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
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

From learning to earning

Jobs that call for the skills explored in this talk.