This is a HMR test, try changing the color:
meow!
@@ -32,5 +32,8 @@
diff --git a/src/module.ts b/src/module.ts
index b096e725..f2b87e86 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -11,7 +11,8 @@ import {
useNuxt,
addTemplate,
addImportsDir,
- createResolver
+ createResolver,
+ addImports
} from '@nuxt/kit'
// @ts-expect-error
@@ -25,7 +26,8 @@ import {
resolveCSSPath,
resolveInjectPosition,
resolveExposeConfig,
- resolveViewerConfig
+ resolveViewerConfig,
+ resolveEditorSupportConfig
} from './resolvers'
import logger, { LogLevels } from './logger'
import createTemplates from './templates'
@@ -48,6 +50,7 @@ const defaults = (nuxt = useNuxt()): ModuleOptions => ({
disableHmrHotfix: false,
quiet: nuxt.options.logLevel === 'silent',
addTwUtil: false,
+ editorSupport: false,
})
export default defineNuxtModule
({
@@ -90,7 +93,6 @@ export default defineNuxtModule({
if (moduleOptions.exposeConfig) {
const exposeConfig = resolveExposeConfig({ level: moduleOptions.exposeLevel, ...(typeof moduleOptions.exposeConfig === 'object' ? moduleOptions.exposeConfig : {})})
createTemplates(resolvedConfig, exposeConfig, nuxt)
- isNuxt2() && addTemplate({ filename: 'tailwind.config.cjs', getContents: () => `module.exports = ${JSON.stringify(resolvedConfig, null, 2)}` })
}
// Compute tailwindConfig hash
@@ -139,8 +141,25 @@ export default defineNuxtModule({
})
}
- if (moduleOptions.addTwUtil) {
- addImportsDir(resolve('./runtime/utils'))
+ if (moduleOptions.editorSupport || moduleOptions.addTwUtil || isNuxt2()) {
+ const editorSupportConfig = resolveEditorSupportConfig(moduleOptions.editorSupport)
+
+ if (editorSupportConfig.autocompleteUtil || moduleOptions.addTwUtil) {
+ addImports({
+ name: 'autocompleteUtil',
+ from: resolve('./runtime/utils'),
+ as: 'tw',
+ ...(typeof editorSupportConfig.autocompleteUtil === 'object' ? editorSupportConfig.autocompleteUtil : {})
+ })
+ }
+
+ if (editorSupportConfig.generateConfig || isNuxt2()) {
+ addTemplate({
+ filename: 'tailwind.config.cjs',
+ getContents: () => `module.exports = ${JSON.stringify(resolvedConfig, null, 2)}`,
+ ...(typeof editorSupportConfig.generateConfig === 'object' ? editorSupportConfig.generateConfig : {})
+ })
+ }
}
// enabled only in development
diff --git a/src/resolvers.ts b/src/resolvers.ts
index e6807876..522ce9a1 100644
--- a/src/resolvers.ts
+++ b/src/resolvers.ts
@@ -2,7 +2,7 @@ import { existsSync } from 'fs'
import { defu } from 'defu'
import { join, relative, resolve } from 'pathe'
import { addTemplate, createResolver, findPath, useNuxt, tryResolveModule, resolveAlias } from '@nuxt/kit'
-import type { Arrayable, ExposeConfig, InjectPosition, ModuleOptions, ViewerConfig } from './types'
+import type { Arrayable, EditorSupportConfig, ExposeConfig, InjectPosition, ModuleOptions, ViewerConfig } from './types'
/**
* Resolves all configPath values for an application
@@ -124,6 +124,7 @@ export async function resolveCSSPath (cssPath: ModuleOptions['cssPath'], nuxt =
const resolveBoolObj = >(config: T, fb: U): U => defu(typeof config === 'object' ? config : {}, fb)
export const resolveViewerConfig = (config: ModuleOptions['viewer']): ViewerConfig => resolveBoolObj(config, { endpoint: '/_tailwind', exportViewer: false })
export const resolveExposeConfig = (config: ModuleOptions['exposeConfig']): ExposeConfig => resolveBoolObj(config, { alias: '#tailwind-config', level: 2 })
+export const resolveEditorSupportConfig = (config: ModuleOptions['editorSupport']): EditorSupportConfig => resolveBoolObj(config, { autocompleteUtil: true, generateConfig: false })
/**
* Resolve human-readable inject position specification into absolute index in the array
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
new file mode 100644
index 00000000..55cdbc67
--- /dev/null
+++ b/src/runtime/utils.ts
@@ -0,0 +1 @@
+export const autocompleteUtil = (tailwindClasses: T) => tailwindClasses
diff --git a/src/runtime/utils/tw.ts b/src/runtime/utils/tw.ts
deleted file mode 100644
index 361fa9c8..00000000
--- a/src/runtime/utils/tw.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const tw = function (tailwindClasses: TemplateStringsArray | string) {
- return tailwindClasses
-}
diff --git a/src/types.ts b/src/types.ts
index fb37646e..afcf5c1d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,13 +1,15 @@
+type Import = Exclude[0], any[]>
+
export type TWConfig = import('tailwindcss').Config;
-export type ResolvedTwConfig = ReturnType
+export type ResolvedTwConfig = ReturnType;
export type Arrayable = T | Array;
export type InjectPosition = 'first' | 'last' | number | { after: string };
interface ExtendTailwindConfig {
content?:
- | TWConfig['content']
- | ((contentDefaults: Array) => TWConfig['content']);
-}
+ | TWConfig['content']
+ | ((contentDefaults: Array) => TWConfig['content']);
+};
type BoolObj> = boolean | Partial;
@@ -17,7 +19,7 @@ export type ViewerConfig = {
*
* @default '/_tailwind'
*/
- endpoint: `/${string}`
+ endpoint: `/${string}`;
/**
* Export the viewer during build
*
@@ -43,6 +45,41 @@ export type ExposeConfig = {
level: number
};
+export type EditorSupportConfig = {
+ /**
+ * Enable utility to write Tailwind CSS classes inside strings.
+ *
+ * You will need to update `.vscode/settings.json` based on this value.
+ *
+ * ```json
+ * {
+ * "tailwindCSS.experimental.classRegex": ["tw`(.*?)`", "tw\\('(.*?)'\\)"]
+ * }
+ * ```
+ *
+ * Read https://tailwindcss.nuxtjs.org/tailwind/editor-support#autocomplete.
+ *
+ * @default false // if true, { as: 'tw' }
+ */
+ autocompleteUtil: BoolObj>;
+ /**
+ * Create a flat configuration template for Intellisense plugin.
+ *
+ * You will need to update `.vscode/settings.json` based on this value.
+ *
+ * ```json
+ * {
+ * "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
+ * }
+ * ```
+ *
+ * Read https://tailwindcss.nuxtjs.org/tailwind/editor-support#load-config-file.
+ *
+ * @default false // if true, { filename: 'tailwind.config.cjs', write: true }
+ */
+ generateConfig: BoolObj>;
+};
+
export interface ModuleOptions {
/**
* The path of the Tailwind configuration file. The extension can be omitted, in which case it will try to find a `.js`, `.cjs`, `.mjs`, or `.ts` file.
@@ -101,9 +138,18 @@ export interface ModuleOptions {
* Add util to write Tailwind CSS classes inside strings with `` tw`{classes}` ``
*
* @default false
+ * @deprecated use `editorSupport.autocompleteUtil` as object
*/
addTwUtil: boolean;
-}
+ /**
+ * Enable some utilities for better editor support and DX.
+ *
+ * Read https://tailwindcss.nuxtjs.org/tailwind/editor-support.
+ *
+ * @default false // if true, { autocompleteUtil: true }
+ */
+ editorSupport: BoolObj;
+};
export interface ModuleHooks {
/**
-Check out the [viewer option](/getting-started/options#viewer) to disable the viewer in development.
+Check out the [viewer option](/getting-started/configuration#viewer) to disable the viewer in development.
diff --git a/docs/content/2.tailwind/3.editor-support.md b/docs/content/2.tailwind/3.editor-support.md
index b9309a3d..e7e79bbb 100644
--- a/docs/content/2.tailwind/3.editor-support.md
+++ b/docs/content/2.tailwind/3.editor-support.md
@@ -20,7 +20,33 @@ Add the following configuration to your `.vscode/settings.json` file, so that Ta
If you use pnpm, ensure that tailwindcss is installed in your top-level node_modules folder.
-Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you happen to use a lower version and/or require the configuration in CommonJS, you can use the `tailwindcss:resolvedConfig` hook and a custom Nuxt module:
+## Autocomplete
+
+When using strings of Tailwind classes, you can enable IntelliSense suggestions using the [`editorSupport.autocompleteUtil`](/getting-started/configuration#editorsupport) option. You will have to add the following VSCode setting:
+
+```diff [.vscode/settings.json]
+// ...
++ "tailwindCSS.experimental.classRegex": ["tw`(.*?)`", "tw\\('(.*?)'\\)"],
+"files.associations": {
+ "*.css": "tailwindcss"
+},
+// ...
+```
+
+Once added, the new utility function can be used as follows, providing IntelliSense suggestions when writing Tailwind classes:
+
+```vue [index.vue]
+
+```
+
+## Load Config File
+
+Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you happen to use a lower version and/or require to generate a flat configuration, you can do so using [`editorSupport.generateConfig`](/getting-started/configuration#editorsupport) option, or you can use the `tailwindcss:resolvedConfig` hook and a custom Nuxt module:
```ts [modules/tw-cjs-config.ts]
import { defineNuxtModule, addTemplate } from '@nuxt/kit'
@@ -38,6 +64,8 @@ export default defineNuxtModule({
})
```
+This hook allows you to customize your generated template in different ways (e.g., different filename, contents, etc.) through a module. Please be aware that using `JSON.stringify` will remove plugins from your configuration.
+
```diff [.vscode/settings.json]
// ...
+ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
@@ -46,5 +74,3 @@ export default defineNuxtModule({
},
// ...
```
-
-This hook allows you to customize your generated template in different ways (e.g., different filename, contents, etc.) through a module. Please be aware that using `JSON.stringify` will remove plugins from your configuration.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index ff805a9b..fda428bf 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -8,7 +8,8 @@ export default defineNuxtConfig({
tailwindcss: {
// viewer: false,
exposeConfig: true,
- injectPosition: 'last'
+ injectPosition: 'last',
+ editorSupport: true
},
content: {
documentDriven: true
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index c7d44909..5e85022d 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -3,7 +3,7 @@