Home / Companies / Nx / Blog / Post Details
Content Deep Dive

Set up Tailwind CSS with Angular in an Nx workspace

Blog post from Nx

Post Details
Company
Nx
Date Published
Author
Leosvel Pérez Espinosa
Word Count
8,906
Language
English
Hacker News Points
-
Summary

Tailwind CSS is a utility-first framework that offers customization and has gained popularity for styling applications. This blog post explores integrating Tailwind CSS with Angular within an Nx monorepo, emphasizing the creation of two simple applications using shared UI components stored in libraries. The process involves setting up an Nx workspace, configuring Tailwind CSS, and leveraging Nx's library support to extract components into shared libraries, including a non-buildable library for headers and a buildable library for cards. It also discusses creating a publishable library for buttons and addresses how Tailwind CSS works with Angular libraries, including setting up themes using CSS variables for different applications. The post concludes with the benefits of sharing a Tailwind CSS configuration using a preset, allowing multiple applications to have different themes while maintaining shared components and styles across projects.