Patricio Vargas
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
31:16 MIN
Why tools like Tailwind abstract away the platform
Keith Cirkle of GitHub on React Fatigue
24:31 MIN
Integrating with the web ecosystem and tooling
Lynx: Native for More
07:30 MIN
How to set up Tailwind CSS in an Angular project
Level up your Angular CSS with Tailwind CSS
01:16 MIN
Understanding the purpose of Tailwind CSS
Level up your Angular CSS with Tailwind CSS
05:50 MIN
Styling the application with Tailwind CSS and UI
Build Your Own Subscription-based Course Platform
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
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
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
47:46Level up your Angular CSS with Tailwind CSS
Patricio Vargas
29:01From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners
Marius Obert
22:46What’s New and What’s Next in Web UI
Cleyra Uzcategui
29:11Angular Magical directives
Valentine Awe
28:56The Illusion of a Performant Web Application
Cathrin Möller
41:54Extending HTML with Web Components
Rowdy Rabouw
50:28Angular tips/tricks you can use from tomorrow on
Benedikt Starzengruber
36:22Angular Features You Should be Using
Sani Yusuf
From learning to earning
Jobs that call for the skills explored in this talk.
