trouble making primary color
this is my app.config.ts
export default defineAppConfig({
ui: {
primary: 'am',
cool: 'gray'
}
})
this is my tailwind.config.ts
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
export default <Partial<Config>>{
theme: {
extend: {
colors: {
am: {
50: '#BBF2DD',
100: '#A0ECD0',
200: '#88E7C4',
300: '#66E1B4',
400: '#44DAA3',
500: '#28CC90',
600: '#22AA78',
700: '#1B8860',
800: '#146648',
900: '#0D4430',
950: '#0A3324'
}
}
}
}
}
this is my nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@nuxtjs/tailwindcss'],
tailwindcss: {
configPath: 'tailwind.config.ts'
}
})
when i try and make anything a primary color (example: class="bg-primary-400") it just doesnt work7 Replies
How does ur package.json look like?
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "^3.10.3",
"vue": "^3.4.19",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.11.4"
}
}You're using Nuxt UI config but you haven't installed it. Install it and add it to the
modules in your nuxt.config and this should work. You can remove the nuxt/tailwind from your packages and nuxt.config as NuxtUI already does that for youits already in my nuxt config
and installed
It's not in the code you posted
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@nuxtjs/tailwindcss'],
tailwindcss: {
configPath: 'tailwind.config.ts'
}
})
???you're adding tailwindcss. I'm saying you should add
nuxt/ui
Remove nuxtjs/tailwindcss from your package.json and modules
Then install nuxt/ui as described in this link and things should work
https://ui.nuxt.com/getting-started/installation