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

2
docs/app/components/theme-picker/ThemePicker.vue
View File

@@ -81,7 +81,6 @@ function setBlackAsPrimary(value: boolean) {
<div class="grid grid-cols-3 gap-1 -mx-2">
<ThemePickerButton
chip="primary"
label="Black"
:selected="appConfig.theme.blackAsPrimary"
@click="setBlackAsPrimary(true)"
@@ -90,6 +89,7 @@ function setBlackAsPrimary(value: boolean) {
<span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
</template>
</ThemePickerButton>
<ThemePickerButton
v-for="color in primaryColors"
:key="color"

6
docs/app/components/theme-picker/ThemePickerButton.vue
View File

@@ -5,6 +5,10 @@ defineProps<{
chip?: string
selected?: boolean
}>()
const slots = defineSlots<{
leading: () => any
}>()
</script>
<template>
@@ -17,7 +21,7 @@ defineProps<{
class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
:class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
>
<template v-if="chip" #leading>
<template v-if="chip || !!slots.leading" #leading>
<slot name="leading">
<span
class="inline-block size-2 rounded-full"

2
docs/app/pages/.index.yml
View File

@@ -97,7 +97,7 @@ design_system:
```
```css [main.css]
@import "tailwindcss" theme(static);
@import "tailwindcss";
@import "@nuxt/ui";
:root {

8
docs/app/plugins/theme.ts
View File

@@ -41,16 +41,16 @@ export default defineNuxtPlugin({
const primaryColor = localStorage.getItem('nuxt-ui-primary');
if (primaryColor !== 'black') {
html = html.replace(
/(--ui-color-primary-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.primary}-(\\d{2,3}\\))/g,
\`$1--color-\${primaryColor}-$2\`
/(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
\`$1\${primaryColor}$2\`
);
}
}
if (localStorage.getItem('nuxt-ui-neutral')) {
let neutralColor = localStorage.getItem('nuxt-ui-neutral');
html = html.replace(
/(--ui-color-neutral-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.neutral}-(\\d{2,3}\\))/g,
\`$1--color-\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}-$2\`
/(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
\`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
);
}

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 {