DEV Community

Discussion on: Adding Tailwind CSS to an Angular project

Collapse
 
tayyabullah101 profile image
Tayyab Ullah Khan

For someone who doesnot want to write css, tailwind css be a good thing. But for large scale projects this can be a disaster to manage.
I started using this for a project of mine but discarded it halfway as the utility based classes were becoming unmanageable.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Currently trying to implement in a large-scale project and we are really trying to wrap our head around management.
And being uniform

Collapse
 
tayyabullah101 profile image
Tayyab Ullah Khan

Not the easiest thing to do believe me. One class of multiple components VS lots of classes for each component, on top of that you have to manage mobile reponsiveness as well. I would suggest using bootstrap instead if you are not opting for custom CSS, makes CSS management a whole lot easier.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Hmm let's see we have one guy who is fully into tailwind already so hoping he can steer us into the right direction.

Thread Thread
 
alexanderjanke profile image
Alex Janke

Not an angular person but using Tailwind for quite some time now.
On the tailwind website the common information is that you shall use components as a single source of truth, meaning it doesn't matter if you need 20 utility classes. Your 1 component can be easily managed and changed.
If you want to create a button, you'd create a button component that holds all the styling.
This can be read in way better words than I can explain here. I personally completely avoid @apply. I'd rather create a component.

For global uniformity you can change a lot in the tailwind-config. So if you always want your baseline shadow to be a specific value, go ahead and change it to that. All of your devs can then just use shadow and be happy with the results. This process can be applied to anything within Tailwind.
Since Tailwind is the way it is, it may require some configuration on your end if your team is getting big and you start to notice some inconsistencies.

What really helps is to structure the order in which you use your css classes.
For example, instead of saying:

class="absolute bg-blue-400 top-0 p-2 hover:bg-blue-600 left-0"
Enter fullscreen mode Exit fullscreen mode

you could group the relevant info together

class="absolute top-0 left-0 p-2 bg-blue-400 hover:bg-blue-600"
Enter fullscreen mode Exit fullscreen mode

This is obviously optional. It personally helps me to find classes faster because they always have their place.

Also, on the more practical side:
If you're using VsCode, this is an absolute life-saver

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Ohh nice! yes, recently added this plugin as well!
To do the order of the classes