It was simply because this way it's easier to read the code so I can do the coditional rendering properly and so I can make changes faster. It's just the approach I like to take when I work on styling components, in my view it's simpler and more intuitive to separate the contexts. 😊
I like this approach as well. So, when we use JIT mode, it still purges unused styles, and we have the same output as we were directly using utility classes in JSX right?
The answer is No, By default, Tailwind only removes unused classes that it generates itself, or has been explicitly wrapped in a @layer directive. It will not remove unused styles from third-party CSS.
Is there any reason why you moved the styles to separate CSS file with @apply instead of writing them directly in JSX?
because you can use one
@applystyle in multiple time in project :)It was simply because this way it's easier to read the code so I can do the coditional rendering properly and so I can make changes faster. It's just the approach I like to take when I work on styling components, in my view it's simpler and more intuitive to separate the contexts. 😊
I like this approach as well. So, when we use JIT mode, it still purges unused styles, and we have the same output as we were directly using utility classes in JSX right?
The answer is No, By default, Tailwind only removes unused classes that it generates itself, or has been explicitly wrapped in a
@layerdirective. It will not remove unused styles from third-party CSS.It's correct 💪
I highly recommend not placing any styles inside JSX, instead, write a styles constant in the same file, and outside the components return function.
That way react performs way better, since inline styles are reprocessed with every state change.
Outside-return and imported styles do not suffer from this performance impact.
sorry, what I meant is not inline styles, but Tailwind classes.