docs(installation): add documentation for intellisense on SFC objects

[MadDog4533]

Added documentation and examples for enabling tailwind IntelliSense on objects in a vue SFC using a /*tw*/ prefix.

Sometimes when overriding too many ui props, a single line can get cluttered.
This would allow you to define your ui overrides in the script portion of the VUE SFC with IntelliSense.

You would define the RegExp in settings.json with:
"tailwindCSS.experimental.classRegex": [["/\\*tw\\*/\\s*{([^}]*)}", "'([^']*)'"]]
This can be appended to the ui config regexp that is already defined in the installation documentation.

How it works is it looks for JS objects prefixed with a /*tw*/ comment.
You could enable IntelliSense for the entire SFC but I figured /*tw*/ would be better to avoid over-saturating editor suggestions.

Here is an example:

<template>
    <UCard :ui="ui" />
</template>
<script setup>
     const ui = /*tw*/ {
         "background": "bg-blue-500"
     }
</script>

You can also make it reactive with:

<template>
    <UCard :ui="ui" />
</template>
<script setup>
     const ui = ref(/*tw*/ {
         "background": "bg-blue-500"
     })
</script>

Hope this is useful!

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	197ee63

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Jul 20, 2023 10:28am

[benjamincanac]

Why not use the ui prefix?

[MadDog4533]

UI would make sense too.
You are the expert! I'm open to whatever, just an idea that helped me tremendously keep my templates organized.

Would it make sense for tailwind intellisense on all SFC globally without syntactic sugar?

Let me know and I can change the prefix to /*ui*/ or make it global for every .vue that has a <script> tag.

[benjamincanac]

You can change to /*ui*/, I don't think it would make sense globally as you only define those classes in either app.config.ts, :ui prop directly in the template or through a ui variable like you mentioned and the first two cases are already documented.

[MadDog4533]

Awesome. I changed to /*ui*/ and updated the regexp to support all characters that enclose a string aswell as fixed nested objects. It only applies intellisense on strings that are values and not keys. Thanks for the regexp! I adopted it from whoever wrote app.config.ts regexp.

"tailwindCSS.experimental.classRegex": [["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]]

An example:

<script setup>
const ui = /*ui*/ {
    "base": "flex",
    "background": `bg-gray-900`,
    "heading": {
        "background": 'bg-gray-700'
    },
    "footer": {
        "background": 'bg-gray-700'
    }
}
</script>

[MuhammadM1998]

Hello does it work if the hint is on top of the statement? this is the normal way of declaring annotations and would be nice if this is supported as otherwise maybe a bit counter intuitive

<script setup>
  // Will this work?

  /*ui*/
  const ui = {
    "background": "bg-blue-500"
  }
</script>

[MadDog4533]

Hello does it work if the hint is on top of the statement? this is the normal way of declaring annotations and would be nice if this is supported as otherwise maybe a bit counter intuitive

<script setup>
  // Will this work?

  /*ui*/
  const ui = {
    "background": "bg-blue-500"
  }
</script>

Would this way interfere with JSDoc annotations?
Ive never used JSDoc so my intuition says that you wouldnt use JSDoc on something like this but dont want intellisense to be a hinderance.
Im open to whatever though!

[MadDog4533]

"tailwindCSS.experimental.classRegex": [["/\\*ui\\*/[^{};]*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]]

This works for declaring your annotation on top of the object declaration. It relies on a ; delimiter at the end of the object to avoid intellisense applying on the next object, however.

Let me know what you guys think!

[MuhammadM1998]

@MadDog4533 JSDoc syntax starts with a slash followed by two stars to be unique so that shouldn't be a problem

// JSDoc starts with a '/**'
/**
 * Represents a book.
 * @constructor
 */
function Book(title, author) {
}

// Your descrimniator starts with '/*', we should be good!
/*ui*/
const ui = {
  "background": "bg-blue-500"
}