diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 076cfbfc..dcc74196 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -5,7 +5,9 @@ description: 'Learn to customize Nuxt UI components using Tailwind CSS v4 and th ## Tailwind CSS -Since Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, let's have a look on how to use it. +Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, let's have a look on how to use it. + +### `@theme` Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive: @@ -40,6 +42,38 @@ You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-al This is exactly what the [`@import "@nuxt/ui";`](https://github.com/nuxt/ui/blob/v3/src/runtime/index.css) is all about, it extends the default Tailwind CSS theme and declares the `primary`, `error` and `gray` colors to be configurable through the [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) but we'll talk more about that in the [Colors](/getting-started/colors) section. +### `@source` + +You can use the `@source` directive to add explicit content glob patterns if you want to look for Tailwind classes in other files that are not automatically detected. + +This can be useful when writing Tailwind classes in markdown files with `@nuxt/content`: + +```css [main.css] +@import "tailwindcss"; +@import "@nuxt/ui"; + +@source "../content/**/*.md"; +``` + +::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14078"} +You can learn more about the `@source` directive in this pull request. +:: + +### `@plugin` + +You can use the `@plugin` directive to import Tailwind CSS plugins. + +```css [main.css] +@import "tailwindcss"; +@import "@nuxt/ui"; + +@plugin "@tailwindcss/typography"; +``` + +::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14264"} +You can learn more about the `@plugin` directive in this pull request. +:: + ## Tailwind Variants API Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/) API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API: