This is outside of the scope of this article. However, I would note that Tailwind's create (Adam Wathan) has specifically said that what you are advising is an anti-pattern and that @apply was only added to trick people into using Tailwind that did not like their HTML being littered with dozens of classes. His words, not mine. Source
If your company was using a css framework before, tailwind is solving that. pb-3 in bootstrap... what does the 3 mean? It means whatever your default size is. But what if you want something bigger? pb-4? But that's too big.
I thing it should not be that much treated as the only way. If you need couple of composes classes - world will not break. You definitely don’t need to make own class for each element in the tree - it’s for sure is not as it supposed to be done. But just few classes for very long class names - it’s fine I think.
I love Tailwind and SASS, but they have trade-offs. Tailwind offers scalability and maintainability, reducing the complexity of naming conventions.
If your project doesn't scale, then Tailwind may have more cons than pros, as it truly shines when maintaining large codebases with specific needs like SSR or performance.
I understand that it can be cumbersome and verbose to write styles like this, but using them at the right moment can be a lifesaver.
I think it's really important to know and experiment about everything that you can to know what these cons/pros are and understand what it's the right tool for the job.
@pablets Would you mind to explain what kinds of problems exactly does Tailwind solve?
The "scalability and maintainability, reducing the complexity of naming conventions" doesn't explain the issue and what kind of solution was invented by Tailwind to resolve it.
Is this bg-white dark:bg-darkNight dark:border-matteGray border-b border-grayLighter w-full flex justify-between px-2 py-3 items-center xl:hidden fixed top-0 z-20 called a "reducing the complexity of naming conventions"? If so, how so?
Can you give an example of scalability challenges and how Tailwind resolves them?
I'd appreciate it.
Some comments have been hidden by the post's author - find out more
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.
This is outside of the scope of this article. However, I would note that Tailwind's create (Adam Wathan) has specifically said that what you are advising is an anti-pattern and that
@applywas only added to trick people into using Tailwind that did not like their HTML being littered with dozens of classes. His words, not mine. Source@thejaredwilcurt
That's for sure. However, I'd really love to hear what kind of problems Tailwind resolves that existed before.
If your company was using a css framework before, tailwind is solving that.
pb-3in bootstrap... what does the 3 mean? It means whatever your default size is. But what if you want something bigger?pb-4? But that's too big.Tailwind solves a lot of that.
I thing it should not be that much treated as the only way. If you need couple of composes classes - world will not break. You definitely don’t need to make own class for each element in the tree - it’s for sure is not as it supposed to be done. But just few classes for very long class names - it’s fine I think.
Because this Tailwind is more understandable?
h-screen xl:min-w-282pxl xl:w-260pxl hidden xl:block overflow-y-hidden dark:bg-darkNight dark:border-matteGray font-ubuntuI love Tailwind and SASS, but they have trade-offs. Tailwind offers scalability and maintainability, reducing the complexity of naming conventions.
If your project doesn't scale, then Tailwind may have more cons than pros, as it truly shines when maintaining large codebases with specific needs like SSR or performance.
I understand that it can be cumbersome and verbose to write styles like this, but using them at the right moment can be a lifesaver.
I think it's really important to know and experiment about everything that you can to know what these cons/pros are and understand what it's the right tool for the job.
@pablets Would you mind to explain what kinds of problems exactly does Tailwind solve?
The "scalability and maintainability, reducing the complexity of naming conventions" doesn't explain the issue and what kind of solution was invented by Tailwind to resolve it.
Is this
bg-white dark:bg-darkNight dark:border-matteGray border-b border-grayLighter w-full flex justify-between px-2 py-3 items-center xl:hidden fixed top-0 z-20called a "reducing the complexity of naming conventions"? If so, how so?Can you give an example of scalability challenges and how Tailwind resolves them?
I'd appreciate it.