CSS Cascading With Vue Components

pxwee5 commented 5 years ago

Curious, how do you guys manage styling your components using the Vue SFC <style> tag?

Vue style tags are lazily loaded in the end of <head> tag of the page. This has higher specificity than TailwindCSS's utility classes that are loaded using the <link> tag.

So with this code:

AppFigure.vue

<template>
  <figure class="c-fig relative"></figure>
<template>

<style>
.c-fig {
  position: initial;
}
</style>

At first glance you would think that the position: relative should be set via the utility class. But this is not the case, in this case position: initial overwrites the Tailwind's relative class.

Are we not meant to use TailwindCSS, Vue Style and .CSS files together?

adamwathan commented 5 years ago

I would set important to true in my Tailwind config to get around this, I'm highly considering just making that the default because utilities should always take precedence over anything else in my opinion.

pxwee5 commented 5 years ago

GASP That's a taboo in CSS world!

You have a point about utilities should always take precedence. Is that the only solution to this issue though? And how would that affect the @apply function? I hope !important doesn't get applied when being used with @apply.

pxwee5 commented 5 years ago

@adamwathan Here's an idea. Create a nestedID option in theme.options that accepts either a string or bool false. If false (default), don't use this option. If string (e.g. nestedId: 'body'), this will add one ID specificity to all tailwind css.

Expected Output

Before .bg-black {} - Specificity: 0 1 0 After #body .bg-black {} - Specificity: 1 1 0

This will overwrite any Vue scoped CSS which is on .component-class[data-v-hash] {} - specificity: 0 2 0, which is still lower than 1 1 0.

This is safer because this overall still lower specificity than inlined css - 1 0 0 0 and, !important - 1 0 0 0 0. So the option to nuke it with !important is still open for users.

This also means that you'll have to add the id="body" to the tag manually like <body id="body">

Implications

There are some implications to this feature where it will increase the total css size since all classes will have the #id prefix (as low as 2 + 1 chars). But this is still fewer characters and more performant than !important (10 + 1 chars).

Other Considerations

This feature shouldn't be applied when used with @apply.

Thoughts?

hacknug commented 5 years ago

@pxwee5 this comment might be of interest to you https://github.com/tailwindcss/tailwindcss/issues/797#issuecomment-475754646

tailwindlabs / discuss