While pre-built components helped with development of web layouts for a very long time. Pre-built components add more work by having to be configured EVERYTIME you make a new project. You can technically reuse some of the configurations you have used in the past but that will not work for every project you will have throughout your career as a web developer. Tailwind did a pretty great job on removing this pain when starting a new project from scratch.
HTML code looked jumbled
As if other ways of writing CSS is not jumbled. Consider BEM:
<imgclass="photo--highlighted photo__img">
Seems better than Tailwind right? Actually no, and that is not the point of using Tailwind. It is always up to you how you name your classes and Tailwind does not care about that. Tailwind is created to aid in making prototyping of custom layouts faster without the pain of overriding css framework opinionated defaults.
When you are done prototyping, you should always merge tailwind classes into components using @apply. This will reduce the file size of your HTML when you deploy to production and will make maintainability of your CSS easier.
An inquisitive Software Engineering student, skilled in leadership, seeking to leverage solid development skills with focus on collaboration, communication and passion.
True, having to always configure pre-built components is definitely more work but isn't building them all from scratch even greater work? Tailwind just makes it faster building it from scratch.
Thank you for the @apply info, although I'm hearing that it is an anti-pattern to Tailwind itself.
Pre-built components has never been a goal of Tailwind. If you need a working layout and component prototype real quick without bothering with css, Tailwind is not the right solution.
The issue with @apply only occurs if you have opted too early on using it.
Somebody already provided citation about this but here is the gist:
Avoiding premature abstraction
If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you.
@apply is there to help you merge classes when the design is ready for production.
Relevant thread about the so called anti-pattern where Adam gives an insight on how to properly use @apply. The infamous article about Tailwind is just a bunch of early impressions about what tailwind does and not what Tailwind sets out to solve. In my honest opinion CSS modules are far more the worst offender in the whole history of CSS, instead of making a css file as the single source for CSS definitions, somebody decides to spread them in multiple files instead.
An inquisitive Software Engineering student, skilled in leadership, seeking to leverage solid development skills with focus on collaboration, communication and passion.
Thank you @lnfel , I'll check out the GitHub discussion thread on apply . From what I can see, component based might be the way to go with when using Tailwind.
instead of making a css file as the single source for CSS definitions, somebody decides to spread them in multiple files instead.
I'm not really familiar with modular CSS but from what I've read up on it, isn't that more or less what Tailwind is doing?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
While pre-built components helped with development of web layouts for a very long time. Pre-built components add more work by having to be configured EVERYTIME you make a new project. You can technically reuse some of the configurations you have used in the past but that will not work for every project you will have throughout your career as a web developer. Tailwind did a pretty great job on removing this pain when starting a new project from scratch.
As if other ways of writing CSS is not jumbled. Consider BEM:
Seems better than Tailwind right? Actually no, and that is not the point of using Tailwind. It is always up to you how you name your classes and Tailwind does not care about that. Tailwind is created to aid in making prototyping of custom layouts faster without the pain of overriding css framework opinionated defaults.
When you are done prototyping, you should always merge tailwind classes into components using
@apply. This will reduce the file size of your HTML when you deploy to production and will make maintainability of your CSS easier.True, having to always configure pre-built components is definitely more work but isn't building them all from scratch even greater work? Tailwind just makes it faster building it from scratch.
Thank you for the
@applyinfo, although I'm hearing that it is an anti-pattern to Tailwind itself.Pre-built components has never been a goal of Tailwind. If you need a working layout and component prototype real quick without bothering with css, Tailwind is not the right solution.
The issue with
@applyonly occurs if you have opted too early on using it.Somebody already provided citation about this but here is the gist:
@applyis there to help you merge classes when the design is ready for production.Relevant thread about the so called anti-pattern where
Adamgives an insight on how to properly use@apply. The infamous article about Tailwind is just a bunch of early impressions about what tailwind does and not what Tailwind sets out to solve. In my honest opinionCSS modulesare far more the worst offender in the whole history of CSS, instead of making a css file as the single source for CSS definitions, somebody decides to spread them in multiple files instead.Thank you @lnfel , I'll check out the GitHub discussion thread on
apply. From what I can see, component based might be the way to go with when using Tailwind.I'm not really familiar with modular CSS but from what I've read up on it, isn't that more or less what Tailwind is doing?