storm trellis
I can't even seem to be able to use any color shades whatsoever on my buttons. (UButton Components)
It's meant to install and use tailwind by itself, but am I missing something? I don't get any errors, but is something missing or not configured that needs to be done manually?
still robin
Good question!!
storm trellis
Yeah, in this state of being stuck with preset colors, no way to add custom colors, and no way to even use shades at least, I'm completely unable to use the UI framework.
noble bone
@storm trellis can you share your app.config ?
storm trellis
Sure.
noble bone
you dont have to import the colors. get rid of that. and you dont have nuxt/tailwind package right?
export default defineAppConfig({
ui: {
primary: "emerald",
gray: "neutral",
notifications: {
position: "top-0 right-0",
},
card: {
background: "bg-gray-200 dark:bg-gray-900",
ring: "ring-0",
rounded: "rounded-2xl",
},
button: {
rounded: "rounded-xl",
},
input: {
appearance: {
gray: "rounded-xl border-0 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 placeholder:text-gray-400 dark:placeholder:text-gray-500",
},
},
textarea: {
appearance: {
gray: "rounded-xl border-0 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 placeholder:text-gray-400 dark:placeholder:text-gray-500",
},
},
select: {
appearance: {
gray: "rounded-xl border-0 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 placeholder:text-gray-400 dark:placeholder:text-gray-500",
},
},
},
});
here is mine
storm trellis
The progress went as:
So the file isn't mine, I'm not sure what's going on there or how the default looks without OP's messing around with things.
noble bone
@storm trellis ok. sounds like the problem is not with nuxthq/ui module but more with the repo. not sure why you started with that repo? its not that hard to get started
storm trellis
First time with nuxt.
noble bone
ah. ok
storm trellis
I've only used Vue before, even that very briefly.
noble bone
storm trellis
I came straight from some basic experience with xml and wpf. I'm typically developing games instead, and I got recommended Tauri.
noble bone
scaffold a simple project with the first comand there
storm trellis
I seen that Nuxt would be a good option with a lot of convenient factors, but isn't inherently set up by Tauri. First time with VS Code as well, I only have Visual Studio experience.
noble bone
i see
storm trellis
And I can integrate Tauri afterwards?
noble bone
yes.you can add all these later
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"tauri": "tauri"
},
"devDependencies": {
"@tauri-apps/cli": "^1.2.3",
"autoprefixer": "^10.4.13",
"nuxt": "^3.1.2",
"postcss": "^8.4.21"
},
"dependencies": {
"@nuxtjs/tailwindcss": "^6.3.1",
"@tauri-apps/api": "^1.2.0"
}
}```dont add tailwind 🙂
storm trellis
You're suggesting that I don't use tailwind at all?
Or that I don't add tailwind, and let nexthq handle it?
noble bone
Or that I don't add tailwind, and let nexthq handle it?
yes
storm trellis
Yeah. Alright.
storm trellis
yes.you can add all these later
```{
"private": true,
"scripts": {
"buil...
You want me to replace the package.json after creating the project, then do an install?
noble bone
not yet. lets do this one step at a time
did you install nuxthq/ui and add it to modules
and create an app.config? with your theme
because that was your original question right?
i think the tauri part needs to go into a seperate thread
lets keep this thread clean and about nuxthq/ui
storm trellis
Didn't do anything yet, just created the new project with the command.
noble bone
ok. do the "npm install" and "npm run dev" just to see if the project was scaffolded correctly
storm trellis
It does say built, but I'm not sure how to test without the Tauri installation.
Ah, it just took some time, the hosted webpage is up.
noble bone
here's a stackblitz you can use - https://stackblitz.com/edit/nuxt-ui-starter?file=nuxt.config.ts
it will get you started on nuxt, layouts, components, pages and routing. and nuxt ui.
once you figure those pieces out you can add tauri
storm trellis
I've never used stackblitz before. Do you want me to look at it, or is there a way to implement the files into my project?
noble bone
I've never used stackblitz before. Do you want me to look at it, or is there a w...
click on the link
storm trellis
I did, though it seems like it integrates with github, and I don't have an account there yet.
noble bone
did you get an error?
dire perch
What I was able to do is to set a different sets of primary variables in app.vue
:root {
--color-primary-50: 255 242 242;
--color-primary-100: 255 227 227;
--color-primary-200: 255 204 204;
--color-primary-300: 255 171 171;
--color-primary-400: 255 137 137;
--color-primary-500: 255 102 102;
--color-primary-600: 204 80 80;
--color-primary-700: 153 58 58;
--color-primary-800: 102 36 36;
--color-primary-900: 51 15 15;
--color-primary-950: 25 0 0;
}