build: Allow Tailwind @apply syntax within Vue <style lang="postcss"> tags

[ryan-ludwig]

Allows writing CSS in .Vue filles like:

<template>
  <div class="my-special-snowflake">
    I'm special
  </div>
</template>
...
<style lang="postcss" scoped>
.my-special-snowflake {
	@apply tw-bg-primary-inverse md:tw-bg-secondary md:tw-w-[1234px];
}
</style>

The CSS this outputs is

<style type="text/css">
.my-special-snowflake {
  --tw-bg-opacity:1;
  background-color:rgba(var(--bg-primary-inverse), var(--tw-bg-opacity));
}

@media (min-width:45.875rem) {
  .my-special-snowflake {
    --tw-bg-opacity:1;
    background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity));
    width:1234px
  }
}
</style>

https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply

The majority of the time, I'd recommend against using this technique. Using the utility classes and breaking your re-usable element into it's own Vue component gives us more advantages (like re-using the bundled tailwind .css file the user has already downloaded.

However, I ran into an issue in a typography task where making a reusable Vue component didn't really make sense, but regular CSS classes did.

This gives us the ability to utilize the design system that Tailwind gives us (colors, breakpoints, spacing, etc), while still writing regular CSS classes. I think this might be a good way to handle unusual one-off widths and other values, especially when you need breakpoints too.

The CSS generated like this does not get added to the main Tailwind CSS file. It goes into a <style> tag loaded only on that page.

[mcstover]

Definitely a useful tool to couple with the primary class based application of tailwind.

Along with sizing, this should help us convert more complex nested style structures as well (for example: hover parent element and alter child element)

[ryan-ludwig]

Along with sizing, this should help us convert more complex nested style structures as well (for example: hover parent element and alter child element)

Yeah for sure! Just a note, nesting like Sass doesn't work out of the gate with PostCSS. I think we'd need to add a plugin for that. But you can still write it in one line

.my-special-snowflake:hover .icicle > p { 
  @apply tw-bg-primary;
}

[emuvente]

A nice tool to have in the toolbox! I agree that we should discourage devs from using this as the primary way to apply repeated styles.

[BoulderBrains]

👍

[mcstover]

Along with sizing, this should help us convert more complex nested style structures as well (for example: hover parent element and alter child element)

Yeah for sure! Just a note, nesting like Sass doesn't work out of the gate with PostCSS. I think we'd need to add a plugin for that. But you can still write it in one line

.my-special-snowflake:hover .icicle > p { 
  @apply tw-bg-primary;
}

Indeed. back to basic css syntax when needed.