feat: add util to write tw classes inside strings

[mitjans]

There are documentation changes missing in this PR. I want to know your opinion on this first before continuing the development.

Description

More often than not, there are times when you may want to write Tailwind CSS classes within TypeScript strings. For example:

<script setup lang="ts">
const variant = ref('primary');

const variantClasses = {
  primary: "bg-red-400",
  secondary: "bg-green-400",
};
</script>

<template>
  <button :class="variantClasses[variant]">Click me</button>
</template>

When doing so, you lose intellisense in VSCode through TailwindCSS extension. To overcome this problem, the extension team created a setting to allow for custom class name completion contexts.

I thought it would be nice if this library helped the DX of TailwindCSS classes by providing a util function that when paired with the correct VSCode setting, it would automatically generate suggestions.

Approach

We can provide the following auto-imported function under the flag addTwUtil:

export const tw = function (tailwindClasses: TemplateStringsArray | string) {
  return tailwindClasses
}

We can also add in the documentation that users should add the following configuration in VSCode:

  "tailwindCSS.experimental.classRegex": ["tw`(.*?)`", "tw\\('(.*?)'\\)"],

With these modifications, users of this module will now be able to write TailwindCSS classes like this:

const variantClasses = {
  primary: tw`bg-red-400`,
  secondary: tw`bg-green-400`,
};

Here's a small video showcasing the use case:

Screen.Recording.2023-11-15.at.10.23.33.mov

I feel like this could improve a lot the DX when using Tailwind CSS classes. I'm not sure if this is something you are willing to add to this module since it's very coupled to VSCode development and it requires modification of VSCode settings to work (that's why I set addTwUtil to be false by default).

[atinux]

Looks good to me!

Happy to update the documentation to explain all this? 🙏

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
TailwindCSS	Edit on Studio ↗︎	View Live Preview	3f71d4b

[mitjans]

@atinux added documentation for the new module option. Please, let me know if I missed anything! 🙏