Skip to content

Commit

Permalink
feat: update to tailwind 4 via nui/tailwind 4
Browse files Browse the repository at this point in the history
  • Loading branch information
stafyniaksacha committed Nov 8, 2024
1 parent 4d0917d commit 3490c20
Show file tree
Hide file tree
Showing 15 changed files with 1,291 additions and 1,683 deletions.
5 changes: 1 addition & 4 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
strict-peer-dependencies=false
# shamefully-hoist=true
use-lockfile-v6=true
resolution-mode=highest
shamefully-hoist=true
3 changes: 0 additions & 3 deletions .nuxtrc

This file was deleted.

4 changes: 3 additions & 1 deletion .playground/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export default defineAppConfig({
nuxtIcon: {},
icon: {
mode: 'svg',
},
nui: {
BaseButton: {
variant: 'solid',
Expand Down
70 changes: 70 additions & 0 deletions .playground/assets/tailwind.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
@import 'tailwindcss';

@import '@shuriken-ui/tailwind';

@variant dark (&:where(.dark, .dark *));

/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
/*
Form elements have a 1px border by default in Tailwind CSS v4, so we've
added these compatibility styles to make sure everything still looks the
same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add \`border-0\` to
any form elements that shouldn't have a border.
*/
@layer base {
input:where(:not([type='button'], [type='reset'], [type='submit'])),
select,
textarea {
border-width: 0;
}
}

@theme {
--font-family-sans: Inter, sans-serif;
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace,;
--font-family-alt: Karla, sans-serif;
--font-family-heading: var(--font-family-sans);

/** Colors */
/* --color-primary-50: var(--color-red-50);
--color-primary-100: var(--color-red-100);
--color-primary-200: var(--color-red-200);
--color-primary-300: var(--color-red-300);
--color-primary-400: var(--color-red-400);
--color-primary-500: var(--color-red-500);
--color-primary-600: var(--color-red-600);
--color-primary-700: var(--color-red-700);
--color-primary-800: var(--color-red-800);
--color-primary-900: var(--color-red-900);
--color-primary-950: var(--color-red-950); */

--color-muted-50: var(--color-stone-50);
--color-muted-100: var(--color-stone-100);
--color-muted-200: var(--color-stone-200);
--color-muted-300: var(--color-stone-300);
--color-muted-400: var(--color-stone-400);
--color-muted-500: var(--color-stone-500);
--color-muted-600: var(--color-stone-600);
--color-muted-700: var(--color-stone-700);
--color-muted-800: var(--color-stone-800);
--color-muted-900: var(--color-stone-900);
--color-muted-950: var(--color-stone-950);
}
85 changes: 6 additions & 79 deletions .playground/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,81 +1,8 @@
/* eslint-disable ts/ban-ts-comment */

import { fileURLToPath } from 'node:url'
import { addTemplate } from '@nuxt/kit'
import { dirname, join } from 'pathe'

export default defineNuxtConfig({
compatibilityDate: '2024-11-02',
extends: '..',
modules: ['nuxt-component-meta', 'unplugin-fonts/nuxt'],
unfonts: {
google: {
families: ['Roboto Flex', 'Inter', 'Karla'],
},
},
sourcemap: true,
tailwindcss: {
// config: {
// content: [],
// theme: {
// fontFamily: {
// heading: ['Inter', 'sans-serif'],
// sans: ['Inter', 'sans-serif'],
// alt: ['Karla', 'sans-serif'],
// mono: [
// 'ui-monospace',
// 'SFMono-Regular',
// 'Menlo',
// 'Monaco',
// 'Consolas',
// '"Liberation Mono"',
// '"Courier New"',
// 'monospace',
// ],
// },
// extend: {
// colors: {
// primary: colors?.violet,
// muted: colors?.stone,
// },
// },
// },
// },
},
componentMeta: {
globalsOnly: false,
debug: 2,
exclude: [
(component: any) => {
const componentsPath = join(
dirname(fileURLToPath(import.meta.url)),
'../components',
)
const isExternal = !component.filePath?.startsWith?.(componentsPath)
const isIcon = component?.kebabName?.startsWith('icon-')

return isExternal || isIcon
},
],
checkerOptions: {
schema: {
ignore: ['KeyboardEvent'],
},
},
},
hooks: {
// @ts-ignore
'tailwindcss:resolvedConfig': function (config) {
addTemplate({
filename: 'tailwind.config.ts', // gets prepended by .nuxt/
getContents: () => `export default ${JSON.stringify(config, null, 2)}`,
write: true,
})
},
},
vite: {
optimizeDeps: {
include: ['@headlessui/vue', '@headlessui-float/vue'],
},
},
compatibilityDate: '2024-11-08',
extends: ['@shuriken-ui/nuxt'],
modules: [
'@nuxt/fonts',
],
css: ['~/assets/tailwind.css'],
})
5 changes: 4 additions & 1 deletion .playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
"@iconify-json/mdi-light": "^1.2.1",
"@iconify-json/ph": "^1.2.1",
"@iconify-json/system-uicons": "^1.2.1",
"@iconify-json/tabler": "^1.2.7"
"@iconify-json/tabler": "^1.2.7",
"@nuxt/fonts": "^0.10.2",
"@shuriken-ui/nuxt": "workspace:*",
"nuxt": "^3.14.159"
}
}
10 changes: 0 additions & 10 deletions .playground/tailwind.config.ts

This file was deleted.

34 changes: 17 additions & 17 deletions components/base/BaseButtonAction.vue
Original file line number Diff line number Diff line change
Expand Up @@ -80,31 +80,31 @@ const rounded = useNuiDefaultProperty(props, 'BaseButtonAction', 'rounded')
const radiuses = {
none: '',
sm: 'nui-button-rounded-sm',
md: 'nui-button-rounded-md',
lg: 'nui-button-rounded-lg',
full: 'nui-button-rounded-full',
sm: 'nui-button-action-rounded-sm',
md: 'nui-button-action-rounded-md',
lg: 'nui-button-action-rounded-lg',
full: 'nui-button-action-rounded-full',
}
const colors = {
'default': 'nui-button-default',
'default-contrast': 'nui-button-default-contrast',
'muted': 'nui-button-muted',
'muted-contrast': 'nui-button-muted-contrast',
'light': 'nui-button-light',
'dark': 'nui-button-dark',
'black': 'nui-button-black',
'primary': 'nui-button-primary',
'info': 'nui-button-info',
'success': 'nui-button-success',
'warning': 'nui-button-warning',
'danger': 'nui-button-danger',
'default': 'nui-button-action-default',
'default-contrast': 'nui-button-action-default-contrast',
'muted': 'nui-button-action-muted',
'muted-contrast': 'nui-button-action-muted-contrast',
'light': 'nui-button-action-light',
'dark': 'nui-button-action-dark',
'black': 'nui-button-action-black',
'primary': 'nui-button-action-primary',
'info': 'nui-button-action-info',
'success': 'nui-button-action-success',
'warning': 'nui-button-action-warning',
'danger': 'nui-button-action-danger',
'none': '',
}
const classes = computed(() => [
'nui-button-action',
props.loading && 'nui-button-loading',
props.loading && 'nui-button-action-loading',
color.value && colors[color.value],
rounded.value && radiuses[rounded.value],
])
Expand Down
38 changes: 19 additions & 19 deletions components/base/BaseButtonClose.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,31 +45,31 @@ const rounded = useNuiDefaultProperty(props, 'BaseButtonClose', 'rounded')
const size = useNuiDefaultProperty(props, 'BaseButtonClose', 'size')
const sizes = {
xs: 'nui-button-xs',
sm: 'nui-button-sm',
md: 'nui-button-md',
lg: 'nui-button-lg',
xl: 'nui-button-xl',
xs: 'nui-button-close-xs',
sm: 'nui-button-close-sm',
md: 'nui-button-close-md',
lg: 'nui-button-close-lg',
xl: 'nui-button-close-xl',
}
const radiuses = {
none: '',
sm: 'nui-button-rounded-sm',
md: 'nui-button-rounded-md',
lg: 'nui-button-rounded-lg',
full: 'nui-button-rounded-full',
sm: 'nui-button-close-rounded-sm',
md: 'nui-button-close-rounded-md',
lg: 'nui-button-close-rounded-lg',
full: 'nui-button-close-rounded-full',
}
const colors = {
'default': 'nui-button-default',
'default-contrast': 'nui-button-default-contrast',
'muted': 'nui-button-muted',
'muted-contrast': 'nui-button-muted-contrast',
'primary': 'nui-button-primary',
'info': 'nui-button-info',
'success': 'nui-button-success',
'warning': 'nui-button-warning',
'danger': 'nui-button-danger',
'default': 'nui-button-close-default',
'default-contrast': 'nui-button-close-default-contrast',
'muted': 'nui-button-close-muted',
'muted-contrast': 'nui-button-close-muted-contrast',
'primary': 'nui-button-close-primary',
'info': 'nui-button-close-info',
'success': 'nui-button-close-success',
'warning': 'nui-button-close-warning',
'danger': 'nui-button-close-danger',
'none': '',
}
Expand All @@ -84,7 +84,7 @@ const classes = computed(() => [
<template>
<button type="button" :class="classes">
<slot>
<IconClose class="nui-button-icon" />
<IconClose class="nui-button-close-icon" />
</slot>
</button>
</template>
42 changes: 21 additions & 21 deletions components/base/BaseButtonIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -93,38 +93,38 @@ const size = useNuiDefaultProperty(props, 'BaseButtonIcon', 'size')
const radiuses = {
none: '',
sm: 'nui-button-rounded-sm',
md: 'nui-button-rounded-md',
lg: 'nui-button-rounded-lg',
full: 'nui-button-rounded-full',
sm: 'nui-button-icon-rounded-sm',
md: 'nui-button-icon-rounded-md',
lg: 'nui-button-icon-rounded-lg',
full: 'nui-button-icon-rounded-full',
}
const sizes = {
sm: 'nui-button-sm',
md: 'nui-button-md',
lg: 'nui-button-lg',
xl: 'nui-button-xl',
sm: 'nui-button-icon-sm',
md: 'nui-button-icon-md',
lg: 'nui-button-icon-lg',
xl: 'nui-button-icon-xl',
}
const colors = {
'default': 'nui-button-default',
'default-contrast': 'nui-button-default-contrast',
'muted': 'nui-button-muted',
'muted-contrast': 'nui-button-muted-contrast',
'light': 'nui-button-light',
'dark': 'nui-button-dark',
'black': 'nui-button-black',
'primary': 'nui-button-primary',
'info': 'nui-button-info',
'success': 'nui-button-success',
'warning': 'nui-button-warning',
'danger': 'nui-button-danger',
'default': 'nui-button-icon-default',
'default-contrast': 'nui-button-icon-default-contrast',
'muted': 'nui-button-icon-muted',
'muted-contrast': 'nui-button-icon-muted-contrast',
'light': 'nui-button-icon-light',
'dark': 'nui-button-icon-dark',
'black': 'nui-button-icon-black',
'primary': 'nui-button-icon-primary',
'info': 'nui-button-icon-info',
'success': 'nui-button-icon-success',
'warning': 'nui-button-icon-warning',
'danger': 'nui-button-icon-danger',
'none': '',
}
const classes = computed(() => [
'nui-button-icon',
props.loading && 'nui-button-loading',
props.loading && 'nui-button-icon-loading',
rounded.value && radiuses[rounded.value],
size.value && sizes[size.value],
color.value && colors[color.value],
Expand Down
7 changes: 6 additions & 1 deletion nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import { createResolver } from '@nuxt/kit'
import tailwindcss from '@tailwindcss/vite'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
'@nuxtjs/color-mode',
'@nuxtjs/tailwindcss',
// '@nuxtjs/tailwindcss',
'@nuxt/icon',
],

vite: {
plugins: [tailwindcss()],
},

colorMode: {
classSuffix: '',
},
Expand Down
Loading

0 comments on commit 3490c20

Please sign in to comment.