➕ add tailwind

.playground/app.config.ts

@@ -1,5 +1,2 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
 })

app.vue

@@ -1,3 +1,3 @@
 <template>
-  <HelloWorld />
+  <RayButton>Click me!</RayButton>
 </template>

components/HelloWorld.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-const { myLayer } = useAppConfig()
-</script>
-
-<template>
-  <div>
-    <h1>Hello World!</h1>
-    <pre>{{ myLayer }}</pre>
-  </div>
-</template>

components/ray/Button.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <button class="bg-cyan-200 rounded-lg border border-neutral-50 px-2 py-1">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+
+</style>

nuxt.config.ts

@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true }
+  devtools: { enabled: true },
-})
+  modules: ["@nuxtjs/tailwindcss"]
+})

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "latest",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "eslint": "^9.14.0",
     "nuxt": "^3.14.159",
     "typescript": "^5.6.3",