diff --git a/README.md b/README.md index 5e61c8cd..1420b604 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md index b2bb73f3..f4f84071 100644 --- a/docs/content/1.getting-started/1.index.md +++ b/docs/content/1.getting-started/1.index.md @@ -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 diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 3afc9393..5d9ce79c 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -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` @@ -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` @@ -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` @@ -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