feat: migrate to @nuxtjs/tailwindcss (#32)

README.md

@@ -1,6 +1,6 @@
 # @nuxthq/ui
 
-Components library as a Nuxt3 module using [UnoCSS](https://github.com/antfu/unocss).
+Components library as a Nuxt3 module using [TailwindCSS](https://tailwindcss.com).
 
 ## Installation
 

docs/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="antialiased font-sans">
-    <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-50">
+    <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-20">
       <UContainer padded>
         <div class="flex items-center justify-between h-16">
           <div class="flex items-center">
@@ -62,16 +62,9 @@ const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }, { label: 'AlertDialog', to: '/components/AlertDialog' }] },
-  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
+  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
-  // { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
-  { label: 'Navigation', links: [{ label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
+  { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
   { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>
-
-<style>
-html.dark {
-  background-color: black;
-}
-</style>

docs/nuxt.config.ts

@@ -28,17 +28,13 @@ export default defineNuxtConfig({
       primary: 'blue'
     },
     preset: {
-      container: {
-        constrained: 'max-w-8xl'
-      }
     },
-    unocss: {
+    tailwindcss: {
       theme: {
-        fontFamily: {
-          sans: '"Inter var", sans-serif'
-        },
-        maxWidth: {
-          '8xl': '90rem'
+        extend: {
+          fontFamily: {
+            sans: '"Inter var", sans-serif'
+          }
         }
       }
     }

docs/pages/components/[component].vue

@@ -100,6 +100,15 @@ const is = `U${params.component}`
 
 const component = nuxtApp.vueApp.component(is)
 
+const people = [
+  { id: 1, name: 'Durward Reynolds', disabled: false },
+  { id: 2, name: 'Kenton Towne', disabled: false },
+  { id: 3, name: 'Therese Wunsch', disabled: false },
+  { id: 4, name: 'Benedict Kessler', disabled: true },
+  { id: 5, name: 'Katelyn Rohan', disabled: false }
+]
+
+const selectCustom = ref(people[0])
 const alertDialog = ref(false)
 const toggle = ref(false)
 const modal = ref(false)
@@ -214,6 +223,12 @@ const defaultProps = {
     name: 'select',
     options: ['English', 'Spanish', 'French', 'German', 'Chinese']
   },
+  SelectCustom: {
+    modelValue: selectCustom,
+    'onUpdate:modelValue': (v) => { selectCustom.value = v },
+    textAttribute: 'name',
+    options: people
+  },
   Textarea: {
     name: 'textarea'
   },
@@ -264,6 +279,10 @@ const defaultProps = {
 const componentDefaultProps = defaultProps[params.component] || {}
 const { props: componentProps } = await component.__asyncLoader()
 
+function lowercaseFirstLetter (string) {
+  return string.charAt(0).toLowerCase() + string.slice(1)
+}
+
 const refProps = Object.entries(componentProps).map(([key, prop]) => {
   const defaultValue = componentDefaultProps[key]
   const propDefault = (typeof prop.default === 'function' ? prop.default() : prop.default)
@@ -281,15 +300,15 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
     if (arrayRegex) {
       values = JSON.parse(arrayRegex[0].replace(/'/g, '"')).filter(Boolean)
     } else {
-      const $uiProp = $ui[params.component.toLowerCase()][key]
+      const $uiProp = $ui[lowercaseFirstLetter(params.component)][key]
       if ($uiProp) {
         values = Object.keys($uiProp).filter(Boolean)
       }
     }
   }
 
   if (value) {
-    if (type === 'String') {
+    if (type === 'String' && typeof value === 'string') {
       value = value.replace(/^'(.*)'$/, '$1')
     } else if (type === 'Array') {
       value = JSON.stringify(value)
@@ -307,6 +326,7 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
 
 const eventProps = Object.entries(componentDefaultProps)
   .filter(([key]) => !refProps.find(prop => prop.key === key))
+  .filter(([key]) => !['slots'].includes(key))
   .reduce((acc, [key, value]) => {
     acc[key] = value
     return acc

docs/pages/examples.vue

@@ -178,13 +178,28 @@
       <UCard body-class="flex" @submit.prevent="onSubmit">
         <div class="flex-1 px-4 py-5 sm:p-6 space-y-3">
           <UFormGroup label="Email" name="email" required>
-            <UInput v-model="form.email" type="email" name="email" required />
+            <UInput v-model="form.email" type="email" name="email" required icon="heroicons-outline:mail" />
           </UFormGroup>
 
           <UFormGroup label="Description" name="description">
             <UTextarea v-model="form.description" type="description" name="description" autoresize />
           </UFormGroup>
 
+          <UFormGroup label="Person" name="person" required>
+            <USelect
+              v-model="form.personId"
+              name="person"
+              :options="people"
+              text-attribute="name"
+              value-attribute="id"
+              icon="heroicons-outline:user"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="People" name="people" required>
+            <USelectCustom v-model="form.person" name="people" :options="people" text-attribute="name" />
+          </UFormGroup>
+
           <UFormGroup label="Toggle" name="toggle">
             <UToggle v-model="form.toggle" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
           </UFormGroup>
@@ -223,13 +238,23 @@
 
 <script setup>
 const isModalOpen = ref(false)
+
+const people = [
+  { id: 1, name: 'Durward Reynolds', disabled: false },
+  { id: 2, name: 'Kenton Towne', disabled: false },
+  { id: 3, name: 'Therese Wunsch', disabled: false },
+  { id: 4, name: 'Benedict Kessler', disabled: true },
+  { id: 5, name: 'Katelyn Rohan', disabled: false }
+]
 const form = reactive({
   email: '',
   description: '',
   toggle: false,
   notification: 'email',
   notifications: [],
-  terms: false
+  terms: false,
+  personId: people[0].id,
+  person: ref(people[0])
 })
 
 const { $toast } = useNuxtApp()

docs/pages/index.vue

@@ -8,7 +8,7 @@
       </div>
 
       <p class="mt-1 text-lg u-text-gray-500">
-        Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank" class="underline">UnoCSS</a>.
+        Components library as a Nuxt3 module using <a href="https://tailwindcss.com" target="_blank" class="underline">TailwindCSS</a>.
       </p>
     </div>
 
@@ -66,23 +66,11 @@
 
     <p>- `colors.gray`</p>
 
-    <p>Define the gray variant. Defaults to `zinc`. You can like the `primary` color specify your own object. https://github.com/antfu/unocss/blob/main/packages/preset-uno/src/theme/colors.ts</p>
+    <p>Define the gray variant. Defaults to `zinc`. You can like the `primary` color specify your own object. https://tailwindcss.com/docs/customizing-colors#default-color-palette</p>
 
-    <p>- `unocss.shortcuts`. Defaults to `[]`.</p>
+    <p>- `tailwindcss.theme`. Defaults to `{}`.</p>
 
-    <p>Define UnoCSS shortcuts: https://github.com/antfu/unocss#shortcuts.</p>
-
-    <p>- `unocss.rules`. Defaults to `[]`.</p>
-
-    <p>Customize UnoCSS rules: https://github.com/antfu/unocss#custom-rules.</p>
-
-    <p>- `unocss.variants`. Defaults to `[]`.</p>
-
-    <p>Customize UnoCSS variants: https://github.com/antfu/unocss#custom-variants.</p>
-
-    <p>- `unocss.theme`. Defaults to `{}`.</p>
-
-    <p>Extend UnoCSS theme: https://github.com/antfu/unocss#extend-theme.</p>
+    <p>Define TailwindCSS theme: https://tailwindcss.com/docs/theme.</p>
   </div>
 </template>
 

package.json

@@ -29,16 +29,21 @@
     "@iconify-json/heroicons-solid": "^1.0.2",
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
     "@popperjs/core": "^2.11.2",
-    "@unocss/nuxt": "^0.24.3",
     "@vueuse/core": "^7.6.1",
     "defu": "^5.0.1",
     "lodash-es": "^4.17.21",
     "nanoid": "^3.2.0",
     "pathe": "^0.2.0"
   },
   "devDependencies": {
+    "@iconify/vue": "^3.1.3",
     "@nuxt/module-builder": "^0.1.7",
     "@nuxtjs/eslint-config-typescript": "^8.0.0",
+    "@nuxtjs/tailwindcss": "^5.0.0-4",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/line-clamp": "^0.3.1",
+    "@types/tailwindcss": "^3.0.7",
     "@types/lodash-es": "^4.17.6",
     "@vueuse/components": "^7.6.1",
     "eslint": "^8.8.0",
@@ -47,7 +52,8 @@
   },
   "build": {
     "externals": [
-      "@unocss/preset-mini"
+      "tailwindcss",
+      "tailwindcss/colors.js"
     ]
   }
 }