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

fix(module): handle tailwindcss import without theme(static) (#3630)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2025-03-20 15:53:57 +01:00
committed by GitHub
parent 06bc7d3028
commit ecff9abc72
14 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/1.getting-started/2.installation/1.nuxt.md
View File

@@ -59,7 +59,7 @@ export default defineNuxtConfig({
::code-group
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
```
@@ -72,10 +72,6 @@ export default defineNuxtConfig({
::
::warning
The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
::
::callout{icon="i-simple-icons-visualstudiocode"}
It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:

6
docs/content/1.getting-started/2.installation/2.vue.md
View File

@@ -102,14 +102,10 @@ app.mount('#app')
#### Import Tailwind CSS and Nuxt UI in your CSS
```css [assets/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
```
::warning
The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
::
::tip
Import the CSS file in your `main.ts`.

6
docs/content/1.getting-started/2.migration.md
View File

@@ -28,7 +28,7 @@ For a detailed walkthrough of all changes, refer to the official **Tailwind CSS
::code-group
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
```
```ts [nuxt.config.ts]
@@ -109,7 +109,7 @@ bun add @nuxt/ui-pro
:::div
```css [app/assets/css/main.css]{2}
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
```
@@ -119,7 +119,7 @@ bun add @nuxt/ui-pro
:::div
```css [app/assets/css/main.css]{2}
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
```

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

@@ -17,7 +17,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
:::div
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
@@ -45,7 +45,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
:::div
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme static {
@@ -87,7 +87,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
:::div
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
@source "../../../content";
@@ -101,7 +101,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
:::div
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
@source "../../../content";
@@ -380,7 +380,7 @@ You can change which shade is used for each color on light and dark mode:
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
:root {
@@ -398,7 +398,7 @@ You can change which shade is used for each color on light and dark mode:
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
@@ -434,7 +434,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
:root {
@@ -452,7 +452,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
@@ -564,7 +564,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
:root {
@@ -584,7 +584,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
@@ -625,7 +625,7 @@ You can customize the default radius value using the default Tailwind CSS variab
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
:root {
@@ -639,7 +639,7 @@ You can customize the default radius value using the default Tailwind CSS variab
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
@@ -670,7 +670,7 @@ You can customize the default container width using the default Tailwind CSS var
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
@@ -688,7 +688,7 @@ You can customize the default container width using the default Tailwind CSS var
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {

4
docs/content/1.getting-started/5.fonts.md
View File

@@ -19,7 +19,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
:::div
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
@@ -33,7 +33,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
:::div
```css [app/assets/css/main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {