We (Codingcoach.io contributors) decided to migrate from Scss to Tailwind because we are a distributed team and Tailwind helps us maintain styling...
For further actions, you may consider blocking this person and/or reporting abuse
Here a test using vue-cli 3 and enabling the extract css (instead to inline it). A 412kb css were loaded just using one apply on a button. This is the first fail because i'm applying a bunch of classes in my component, i don't need the full bundle. The component class is inside the bundle.
Even with a lazy loaded component it include the 400kb css "core" bundle beside the component css (where the above class and @apply is used). The bundle contains all the class combinations, media queries, selector hacks, and so on, even if don't need them in my component. So another fail:
Disabling the extract css feature, it keeps working, inlining the component style and a "normalize/core style". no .css bundle were loaded. This is a "meh" because it's better than the extracted css:
Awesome stuff here, very informative.
This is not misleading e fully replicable. I don’t need the old and ugly bundle.css when i work with such technologies. I will try to @applying utilities and other things inside my components css. Btw, for sure you can optimize the css but in this use case it’s not relevant. The point isn’t the bundle size, is the fact that there shouldn’t be any bundle.css if i’m lazy loding components. Plus, the context here is this article, that show a configuration that should not be used inside vue, where you have single file components and you shuld put components css inside that file.
Why this arrogance? How can you tell that i don’t know what i’m talking about? I tell you again the bundle size and css optimisation is not the key point here. If you don’t get it, don’t reply.
Ps: purgeCSS is useless for my workflow because i don’t have unused css (i just need cssnano with more controls). Check my site, it may help you getting the point here.
Using a css framework within a component based architecture is a bit anti-pattern, you know
Tailwind allows you create component classes using
@applyread moreMmm no since you have to import the css globally. It’s incompatible with chunks and lazy loading as i saw. Or not?
Edit: i saw that they provide a full npm package so it can work, but i’m not fully convinced
As far as my knowledge goes it's incompatible with lazy loading.
Btw there are more things i don’t like. For example the
@applyat-rule that is provided by a postcss-plugin, based on the old and abandoned @apply spec. I will do some test with vue, chunking and lazy loading componentsThe @apply spec might have been abandoned but I think @apply is quite useful in Tailwind. I'd like to know what your thoughts are when you are done with the test.
Hey Nero!
Thanks for the great post. I found it helpful for getting started with Tailwindcss and Vue.
I have a question about using @apply within single file components. How can you setup tailwindcss to process @apply within the section of a SFC?
Thanks for your time,
~ B