➕ Add tailwind typo

src/module.ts

@@ -37,6 +37,7 @@ declare module '@nuxt/schema' {
 
 export interface ModuleOptions {
   prefix?: string
+  globalComponents?: boolean
   safeColors?: string[]
 }
 
@@ -51,6 +52,7 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     prefix: 'Ray',
+    globalComponents: false,
     safeColors: ['primary'],
   },
   async setup(_options, _nuxt) {
@@ -74,25 +76,25 @@ export default defineNuxtModule<ModuleOptions>({
     addComponentsDir({
       path: resolve(runtimePath, 'components', 'elements'),
       prefix: _options.prefix,
-      global: false,
+      global: _options.globalComponents,
       watch: false,
     })
     addComponentsDir({
       path: resolve(runtimePath, 'components', 'forms'),
       prefix: _options.prefix,
-      global: false,
+      global: _options.globalComponents,
       watch: false,
     })
     addComponentsDir({
       path: resolve(runtimePath, "components", "overlays"),
       prefix: _options.prefix,
-      global: false,
+      global: _options.globalComponents,
       watch: false,
     })
     addComponentsDir({
       path: resolve(runtimePath, "components", "icons"),
       prefix: 'Icon',
-      global: false,
+      global: _options.globalComponents,
       watch: false,
     })
 

src/tailwind.ts

@@ -28,24 +28,28 @@ export const installTailwind = (
   })
 
   const configTemplate = addTemplate({
-    filename: 'ray-tailwind.config.cjs',
+    filename: "ray-tailwind.config.cjs",
     write: true,
     getContents: ({ nuxt }) => `
       const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
       const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(
-        resolve(runtimePath, 'utils', 'colors'),
+        resolve(runtimePath, "utils", "colors")
       )})
 
       const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
       module.exports = {
+        plugins: [
+          require('@tailwindcss/aspect-ratio'),
+          require('@tailwindcss/typography')
+        ],
         content: {
           files: [
             ${JSON.stringify(
-              resolve(runtimePath, 'components/**/*.{vue,mjs,ts}'),
+              resolve(runtimePath, "components/**/*.{vue,mjs,ts}")
             )},
             ${JSON.stringify(
-              resolve(runtimePath, 'ui.config/**/*.{mjs,js,ts}'),
+              resolve(runtimePath, "ui.config/**/*.{mjs,js,ts}")
             )}
           ],
         },
@@ -59,19 +63,19 @@ export const installTailwind = (
             return [
               ...defaultExtractor(content),
               ...customSafelistExtractor(${JSON.stringify(
-                moduleOptions.prefix,
+                moduleOptions.prefix
               )}, content, ${JSON.stringify(
-                nuxt.options.appConfig.rayui.colors,
-              )}, ${JSON.stringify(moduleOptions.safeColors)})
+      nuxt.options.appConfig.rayui.colors
+    )}, ${JSON.stringify(moduleOptions.safeColors)})
             ]
           }
         },
         safelist: generateSafelist(${JSON.stringify(
-          moduleOptions.safeColors || [],
+          moduleOptions.safeColors || []
         )}, ${JSON.stringify(nuxt.options.appConfig.rayui.colors)}),
       }
     `,
-  })
+  });
 
   const { configPath: userTwConfigPath = [], ...twModuleConfig }
     = nuxt.options.tailwindcss ?? {}