arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(getting-started): describe Tailwind CSS @source and @plugin

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-02 12:25:01 +02:00
parent 66a04add91
commit c837ca5cc0
1 changed files with 35 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/content/1.getting-started/3.theme.md
View File

@@ -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: