Skip to content

Conversation

@ajaygandecha
Copy link
Member

@ajaygandecha ajaygandecha commented Nov 1, 2025

This PR installs Tailwind v4 and ports all main features and widgets to use Tailwind styling. All pages retain the same styling as before, with some enhancements to certain pages. The switch to Tailwind should significantly improve DX for future development, reduces the clutter and allows the removal of numerous .css files, removes many style classes that were defined but never used, and also reduce the CSS bundle size shipped to the client side.

Other Notes:

  • The <mat-pane> component will soon be marked as deprecated, as the nesting added ends up causing unfortunate effects on styling (often remedied only with ::ng-deep, which is also now deprecated and bad practice). The pane effect can be created with <mat-card appearance="outlined" class="border-transparent!">. We may be able to make pane a directive in the future added to cards like so: <mat-card pane>.
  • Some components in shared and the signage feature have not been ported to Tailwind yet.
  • This PR attempts to add a tailwind linter.
  • Future work can be done to port over some of the manual styles added in styles.scss to be custom Tailwind styles.

This PR resolves #819

@ajaygandecha ajaygandecha self-assigned this Nov 1, 2025
@ajaygandecha ajaygandecha added the refactor Used for refactoring current features. label Nov 1, 2025
@ajaygandecha
Copy link
Member Author

Note to self: Explore the use of canonical classes in Tailwind for M3 variables (like bg-(--mat-primary))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Used for refactoring current features.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor Site to Adopt Tailwind and M3 Variables for Styling

2 participants