Skip to content

Commit

Permalink
docs: update links to tailwind v4 beta docs
Browse files Browse the repository at this point in the history
  • Loading branch information
benjamincanac committed Nov 21, 2024
1 parent 0baa3a0 commit c47ffc1
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 14 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Radix Vue](https://www.radix-vue.com/), [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Radix Vue](https://www.radix-vue.com/), [Tailwind CSS v4](https://tailwindcss.com/docs/v4-beta), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

> [!NOTE]
> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui) for Nuxt UI v2.
Expand Down
12 changes: 6 additions & 6 deletions docs/content/1.getting-started/1.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ This transition empowers Nuxt UI to become a more comprehensive and flexible UI

### Tailwind CSS v4

Nuxt UI v3 integrates the latest Tailwind CSS v4 alpha (announced March 6, 2024), bringing significant improvements:
Nuxt UI v3 integrates the latest Tailwind CSS v4 beta (released Nov 21, 2024), bringing significant improvements:

- **Faster Builds**: Up to 10x faster, especially for larger projects.
- **Unified Toolchain**: Built-in features like vendor prefixing, nesting support, and modern CSS transforms.
- **CSS-First Configuration**: New `@theme` directive for easy customization without JavaScript.
- **Optimized Performance**: Smaller engine footprint and more efficient processing.
- **Built for performance**: Full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
- **Unified toolchain**: Built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
- **CSS-first configuration**: A reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
- **Designed for the modern web**: Built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.

::note
For a comprehensive overview of Tailwind CSS v4 alpha features, visit the [official announcement](https://tailwindcss.com/blog/tailwindcss-v4-alpha).
For a comprehensive overview of Tailwind CSS v4 beta features, read the [prerelease documentation](https://tailwindcss.com/docs/v4-beta).
::

### Tailwind Variants
Expand Down
14 changes: 7 additions & 7 deletions docs/content/1.getting-started/3.theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: 'Learn how to customize Nuxt UI components using Tailwind CSS v4, C

## Tailwind CSS

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 beta, you can read the [prerelease documentation](https://tailwindcss.com/docs/v4-beta) for more information.

### `@theme`

Expand Down Expand Up @@ -36,8 +36,8 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your

The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.

::note
You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration).
::note{to="https://tailwindcss.com/docs/v4-beta#css-first-configuration" target="_blank"}
Learn more about Tailwind CSS v4 CSS-first configuration approach.
::

### `@source`
Expand All @@ -53,8 +53,8 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/
@source "../content/**/*.md";
```

::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14078"}
You can learn more about the `@source` directive in this pull request.
::note{to="https://tailwindcss.com/docs/v4-beta#adding-content-sources"}
Learn how to add content sources in Tailwind CSS v4.
::

### `@plugin`
Expand All @@ -68,8 +68,8 @@ You can use the `@plugin` directive to import Tailwind CSS plugins.
@plugin "@tailwindcss/typography";
```

::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14264"}
You can learn more about the `@plugin` directive in this pull request.
::note{to="https://tailwindcss.com/docs/v4-beta#using-plugins"}
Learn more about using plugins in Tailwind CSS v4.
::

## Design system
Expand Down

0 comments on commit c47ffc1

Please sign in to comment.