docs(installation): add Modules and TypeScript section

Related to #1169, #1200, #571 and #1190

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

@@ -36,8 +36,114 @@ export default defineNuxtConfig({
 
 That's it! You can now use all the components and composables in your Nuxt app ✨
 
+## Modules
+
+Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.
+
 ::callout{icon="i-heroicons-exclamation-triangle"}
-As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
+You should remove them from your `modules` and `dependencies` if you've previously installed them.
+::
+
+### `@nuxtjs/tailwindcs`
+
+This module is pre-configured and will automatically load the following plugins:
+
+- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
+- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography)
+- [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
+- [@tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries)
+- [@headlessui/tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue)
+
+Note that the `@tailwindcss/aspect-ratio` plugin disables the default aspect ratio utilities:
+
+- `aspect-auto`
+- `aspect-square`
+- `aspect-video`
+
+You can re-enable them by adding the following to your `tailwind.config.ts`:
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      aspectRatio: {
+        auto: 'auto',
+        square: '1 / 1',
+        video: '16 / 9'
+      }
+    }
+  }
+}
+```
+
+### `@nuxtjs/color-mode`
+
+This module is installed to provide dark mode support out of the box thanks to the Tailwind CSS dark mode `class` strategy.
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about this in the [Theming](/getting-started/theming#dark-mode) section.
+::
+
+### `nuxt-icon`
+
+This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`.
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/elements/icon) component page.
+::
+
+## TypeScript
+
+This module is written in TypeScript and provides typings for all the components and composables. You can look at the [source code](https://github.com/nuxt/ui/tree/dev/src/runtime/types) to see all the available types.
+
+::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/concepts/typescript" target="_blank"}
+You can read more about TypeScript on the official Nuxt documentation.
+::
+
+You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components:
+
+```vue
+<template>
+  <UBreadcrumb :links="links">
+    <template #icon="{ link }">
+      <UIcon :name="link.icon" />
+    </template>
+  </UBreadcrumb>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbLink } from '#ui/types'
+
+export interface Props {
+  links: BreadcrumbLink[]
+}
+
+defineProps<Props>()
+</script>
+```
+
+You don't have to use TypeScript yourself, but doing so will give you access to prop validation and autocomplete.
+
+We've managed to provide dynamic typings on props such as `color`, `size`, `variant`, etc. based on your custom config. For example, you'll be suggested the `custom` color and the `subtle` variant when using the `Button` component with an `app.config.ts` as such:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      color: {
+        custom: {
+          subtle: '...'
+        }
+      }
+    }
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about components configuration in the [Theming](/getting-started/theming#appconfigts) section.
 ::
 
 ## IntelliSense