feat: add util to write tw classes inside strings

docs/app.config.ts

@@ -1,4 +1,4 @@
-import { version as pkgVersion } from '../package.json';
+import { version as pkgVersion } from '../package.json'
 
 export default defineAppConfig({
   ui: {

docs/content/1.getting-started/2.options.md

@@ -162,3 +162,26 @@ export default defineNuxtConfig({
 ```
 
 You can edit the endpoint by `viewer.endpoint` and if you'd like to export the viewer as a static asset during build, you can set `viewer.exportViewer` to `true` (it will internally run [`npx tailwind-config-viewer export`](https://github.com/rogden/tailwind-config-viewer/blob/master/cli/export.js)).
+
+## `addTwUtil `
+
+- Default: `false`
+
+This option adds the utility function `tw` that will provide IntelliSense suggestions in JS/TS strings if the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension is installed. For this to work, you will have to add the following VSCode setting:
+
+```json [settings.json]
+{
+  "tailwindCSS.experimental.classRegex": ["tw`([^`]*)", "tw\\('([^'\\)]*)"],
+}
+```
+
+Once added, the new utility function can be used as follows, providing IntelliSense suggestions when writing Tailwind classes:
+
+```vue [index.vue]
+<script setup lang="ts">
+const variantClasses = {
+  primary: tw`bg-red-400`,
+  secondary: tw('bg-green-400')
+}
+</script>
+```

src/module.ts

@@ -10,7 +10,9 @@ import {
   resolvePath,
   addVitePlugin,
   useNuxt,
-  addTemplate
+  addTemplate,
+  addImportsDir,
+  createResolver
 } from '@nuxt/kit'
 
 // @ts-expect-error
@@ -45,12 +47,14 @@ const defaults = (nuxt = useNuxt()): ModuleOptions => ({
   exposeConfig: false,
   exposeLevel: 2,
   injectPosition: 'first',
-  disableHmrHotfix: false
+  disableHmrHotfix: false,
+  addTwUtil: false,
 })
 
 export default defineNuxtModule<ModuleOptions>({
   meta: { name, version, configKey, compatibility }, defaults,
   async setup (moduleOptions, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
     const [configPaths, contentPaths] = await resolveModulePaths(moduleOptions.configPath, nuxt)
 
     const tailwindConfig = await Promise.all((
@@ -133,6 +137,10 @@ export default defineNuxtModule<ModuleOptions>({
       await installModule('@nuxt/postcss8')
     }
 
+    if (moduleOptions.addTwUtil) {
+      addImportsDir(resolve('./runtime/utils'));
+    }
+
     // enabled only in development
     if (nuxt.options.dev) {
       // Watch the Tailwind config file to restart the server

src/runtime/utils/tw.ts

@@ -0,0 +1,3 @@
+export const tw = function (tailwindClasses: TemplateStringsArray | string) {
+  return tailwindClasses
+}

src/types.ts

@@ -90,4 +90,10 @@ export interface ModuleOptions {
    * @default false
    */
   disableHmrHotfix: boolean;
+  /**
+   * Add util to write Tailwind CSS classes inside strings with `` tw`{classes}` ``
+   * 
+   * @default false
+   */
+  addTwUtil: boolean;
 }