Tailwind color issue
I used npm install tailwindcss @tailwindcss/vite which is what tailwind said, installed npm install --save-dev @nuxtjs/tailwindcss according to Nuxt's site, and most styling works, but some button styles and all coloring doesn't work
My files:
My files:
nuxt.config.js
import tailwindcss from "@tailwindcss/vite";
export default {
modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
test: {
environment: 'jsdom',
globals: true
},
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
vite: {
plugins: [
tailwindcss(),
],
},
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./composables/**/*.{js,ts}",
"./utils/**/*.{js,ts}",
"./app.vue",
"./error.vue"
],
theme: {
extend: {
colors: {
customBlue: '#3A5FCD',
customGreen: '#6EE7B7',
customPurple: '#8B5A8C',
bronze: '#df842a',
gold: "#facc15",
silver: "#c0c0c0",
lightText: "#f8fafc",
darkText: "#1A1A1A",
pageGray: "#F8F9FA",
lightGray: "#94a3b8",
cardGray: "#F5F7FA",
lightBeige: "#fbf0ed",
currency: "#f5b942",
},
fontFamily: {
agrandir: ['Agrandir', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
satoshi: ['Satoshi', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
},
},
},
plugins: [],
}
assets/css/main.css
@import 'tailwindcss';nuxt.config.js
import tailwindcss from "@tailwindcss/vite";
export default {
modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
test: {
environment: 'jsdom',
globals: true
},
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
vite: {
plugins: [
tailwindcss(),
],
},
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./composables/**/*.{js,ts}",
"./utils/**/*.{js,ts}",
"./app.vue",
"./error.vue"
],
theme: {
extend: {
colors: {
customBlue: '#3A5FCD',
customGreen: '#6EE7B7',
customPurple: '#8B5A8C',
bronze: '#df842a',
gold: "#facc15",
silver: "#c0c0c0",
lightText: "#f8fafc",
darkText: "#1A1A1A",
pageGray: "#F8F9FA",
lightGray: "#94a3b8",
cardGray: "#F5F7FA",
lightBeige: "#fbf0ed",
currency: "#f5b942",
},
fontFamily: {
agrandir: ['Agrandir', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
satoshi: ['Satoshi', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
},
},
},
plugins: [],
}
assets/css/main.css
@import 'tailwindcss';
