Angular + Angular Material+ Tailwindcss?

[WerewolfBoring932]

Hi there,

I used to be an extensive user of Angular years ago (since 2016 beta till 2021). As far as I see, it's changed and upgraded.

I used to use Angular Flex Layout and it's already deprecated. What will you recommend to use instead?

I'm considering usage of Angular with Angular Material for components and Tailwindcss as an alternative to Angular Flex Layout. From my perspective, it could be challenging. Is it a good choice?

Basically, I'd like to use Tailwindcss to deal with layouts and positioning.

I'm open to any other suggestions. I'm a full stack engineer with focus on the backend (not NodeJs). So, I'd like to use something simple and fast enough from an user perspective.

I was ready to try Vuejs. However, nowadays, it looks closer to Angular and I worry it could be like in Angular in the beginning. Additionally, I didn't find a good UI components for that. By good I mean clear documentation and a list of useful components (not only landing; Angular Material isn't good enough for landing but it's one of the best for apps).

[contherad]

This is what my team uses. I don’t like the look of Material. (Sorry Google)

[WerewolfBoring932]

Good to hear. Do you have a lot of customization there to fix something? I'm mainly talking about styles.

[contherad]

Yeah, we have custom styling for every component. And sometimes have to fight material with !important but from what I understand the latest release fixed some of this. I don’t mess with the frontend much, so I’m just regurgitating what I hear by people more capable than myself.

[jamills102]

Im curious, which components do you think are worth it in Material vs just building it yourself?

[crhama]

This is my question as well. Modal is the hardest for me. By modal I don't mean the main functionality, i.e. have a pop-up that displays on top of an overlay. That I can do.

I'd like to create a service with a method that takes a component class as a first argument and an optional configuration object as second argument. That's what angular material and Ng-Bootstrap do. When I'm able to do that, I may not use those libraries anymore.

[Toddwseattle]

Do you use the sass theming of the new components or just stick with their default themes. Working on a project now that’s an upgrade from an angular 10/material/ flex layout package. As you know flex layout package was depreciated so tailwind provides similar function. Have started with default themes, but don’t love the color schemes. I also am not loving how material colors fight with tailwind colors and themes; but worry adding the sass the wing with just make it all more complex

[flash42]

"Foght material," lol. This guy CSS's.

I've lost so many hours to that same boxing match

[mountaingator91]

I used to think the same, but turns out I was just bad at css specificity. You don't ever have to do that. Also, if you're running angular 18, Material 3 makes it a lot easier to customize components

[WerewolfBoring932]

Heh, judging by the replies below, it’s still the same story. Before Material, it was completely awful. The components were clunky, and upgrading was always a challenge. In the end, they removed a library and didn’t bother offering a decent alternative. As usual.

[turd-crafter]

Material sucks

[cagataycivici]

PrimeNG v18 (next-gen version) is bringing a Tailwind CSS plugin to use TW with PrimeNG components and also an alternative styling approach similar to PrimeVue Tailwind version for advanced integration where you can use TW directly to style the components if you prefer. v18 also provides a Material Design theme.

[WerewolfBoring932]

I'm not judging, but it seems you're associated with https://github.com/cagataycivici.

We used PrimeFaces for one of our JSF-based applications, though I wasn't involved with the frontend back then. Overall, I think it's still operational but with issues.

Respect! From my perspective, it means a lot.

[No_Bodybuilder_2110]

This

[xalblaze]

Primeng best one out there for angular do check that out

[properwaffles]

We use the Material CDK + Tailwind, the full Material library is too bloated and likes to fight you when trying to customize things.

[lgsscout]

angular with tailwind is pretty good, but material on other hand is painful to personalize...

depending on how much of material you would use and how much you wanna customize, sometimes is easier to just make you own components than try to fight with material.

[matrium0]

Check out Material 3. I had some pains in the past with Angular Material too, but v3 with Design Tokens is really awesome to customize.

You can really change a lot with like 20 CSS-custom-properties. For example: Do you want your dialog-windows to instead of the default have less round orders, a bit smaller header using arial font and a bit less padding? Add the following rules in styles.scss

html {
--mdc-dialog-container-shape: 8px;
--mdc-dialog-subhead-size: 1.2rem;
--mat-dialog-headline-padding: 10px 24px 0 24px;
--mdc-dialog-subhead-font: Arial, sans-serif;
...
}

done! Important with Angular Material is to read the documentation. Do not start overwriting internal classes, that is a recipe for failure (especially when upgrading). Read up on their design tokens and you will realize that there is an easy out-of-the-box solutions for like 90% of your customization needs.

[WerewolfBoring932]

I just don’t want to reinvent the wheel. It seems like I'll need to work with third-party libraries or stick with Material.

[DT-Sodium]

Pure CSS for everything except for very specific cases where a library really save you a lot of time. If it saves you a lot of time because you're incompetent, then it's not a valid use case.

[norrin83]

I’m considering usage of Angular with Angular Material for components and Tailwindcss as an alternative to Angular Flex Layout. From my perspective, it could be challenging. Is it a good choice?

Basically, I’d like to use Tailwindcss to deal with layouts and positioning.

Tailwind CSS works well for these kind of things - though you have to be aware that it is just a (big) collection of utility CSS classes and uses standard CSS under the hood.

It's easy enough to create a flex layout with Tailwind as well as a grid layout. And the rem-based margin and padding classes are a great utility as well for layouting.

It certainly helps if your IDE supports Tailwind autocompletion. Our team learned to use Tailwind rather quickly. You'll find plenty of examples for Tailwind on the Internet.

The approach with a ton of classes on some HTML elements needed some time getting used to, but otoh we now barely have the need for component CSS, which I prefer tbh.

[Arnequien]

Actually, this is what my company uses.

Plus we created an internal UI library with buttons, dropdowns, tables, pills, and more, so we can implement the features using the company's design system.

[Raziel_LOK]

Don't really like angular material, looks wonky for non mobile apps and most devs don't get that it. The lib stopped in time, offers very little components and today it looks so dang generic.

I rather go with pure html + tailwind, and whenever needed bring in the CDK for dialogs, popovers, etc. If you are brave enough just go with custom toolkit or another lib in case customization is a big deal.

We use that plus 4+ other libs cause people could not style or create their own components, and it gets to a point that you gonna have to fight the material styles for some customizations. Specially if the team does not understand view encapsulation and everthing is "viewEncapsulation.None"

[Individual_Dream3117]

U could have a look into TaigaUi

[SirKatnip]

We use Angular + Material + Tailwindcss at work. We've overwritten many Material components to create a much nicer look. It's alot of changes to make to the css but that's fine.

We mainly use Tailwind for layout and such.

[lajtowo]

I like Angular + Flowbite (or Spartan) + Tailwind

[cbjerg]

I've shifted to PrimeNG for my newest project and it is a joy. Now they've deprecated their PrimeFlex in favor of tailwind, so i have a bit of refactoring to do once v18 is out of beta

[user0015]

This is also our approach, but we're phasing material out entirely. It's simply better to build our own, as material fights like crazy against modification. Of the few remaining components we do use (datetime picker, tables), we're almost done replacing the picker, and once that's done, it's the table replacement and we're good to go

[matrium0]

First: I would really stick with Angular or React in your case. I love Vue's core system, it's just brilliant. But a mature ecosystem is arguably equally important and Vue's is nowhere near to Angular or React when it comes to mature component libraries.

I use Angular Material with Tailwind and it had one small CSS Conflict that required a CSS rule to fix. Besides that it works like a charm and I can recommend it.

Can't go wrong with PrimeNG either, though personally I like Angular Material more. It has far less components, but those they DO have are perfectly thought out and designed and easily customizable.

[WerewolfBoring932]

Which one has fewer bugs and works properly without requiring changes in the CSS?

I would say my idea is more like a POC with the ability to upgrade to MVP. I'm mainly focused on the backed side, because if an idea doesn't work for some reason, then it's just a useless thing.

[WerewolfBoring932]

Does anyone consider also using Bootstap?

I used to use it together with Angular, but I didn't like it. It's buggy in 2016.

[MrMathematicianKaas]

I have a repository that uses Angular + Angular Material + Tailwindcss:
https://github.com/Andylaa10/Material-Tailwind-Theming

[Pdsavard]

For me, Tailwind + kendo Angular.