Issue with Theming

[Techiton]

The issue that im having with theming is that im getting a error which says bg-primary-50 doesnt exist.

This is the full log of the error that im having currently:

> dev
> concurrently "remix dev" "npm run tailwind:dev"

[1]
[1] > tailwind:dev
[1] > tailwindcss -w -i app/styles/tailwind.css -o app/styles/tailwind-output.css
[1]
[1]
[1] Rebuilding...
[0] The path "@chimera-ui/components" is imported in app\components\Forms\Signup.tsx but "@chimera-ui/components" was not found in your node_modules. Did you forget to install it?
[1]
[1] 🌼 daisyUI components 2.51.3  https://daisyui.com
[1]   ✔︎ Including:  base, components, 1 themes, utilities
[1]   ❤︎ Support daisyUI:  https://opencollective.com/daisyui
[1]
[0]
[0] 🌼 daisyUI components 2.51.3  https://daisyui.com
[0]   ✔︎ Including:  base, components, 1 themes, utilities
[0]   ❤︎ Support daisyUI:  https://opencollective.com/daisyui
[0]
[1] CssSyntaxError: tailwindcss: C:\Users\dynam\dosscord\app\styles\tailwind.css:2:1: The `bg-primary-50` class does not exist. If `bg-primary-50` is a custom class, make sure it is defined within a `@layer` directive.
[1]     at Input.error (C:\Users\dynam\dosscord\node_modules\postcss\lib\input.js:148:16)
[1]     at AtRule.error (C:\Users\dynam\dosscord\node_modules\postcss\lib\node.js:60:32)
[1]     at processApply (C:\Users\dynam\dosscord\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:376:29)
[1]     at C:\Users\dynam\dosscord\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:524:9
[1]     at C:\Users\dynam\dosscord\node_modules\tailwindcss\lib\processTailwindFeatures.js:55:50
[1]     at Object.Once (C:\Users\dynam\dosscord\node_modules\tailwindcss\lib\cli\build\plugin.js:256:19)
[1]     at LazyResult.runOnRoot (C:\Users\dynam\dosscord\node_modules\postcss\lib\lazy-result.js:337:23)
[1]     at LazyResult.runAsync (C:\Users\dynam\dosscord\node_modules\postcss\lib\lazy-result.js:393:26)
[1]     at async Object.watch (C:\Users\dynam\dosscord\node_modules\tailwindcss\lib\cli\build\plugin.js:364:13)
[1]     at async build (C:\Users\dynam\dosscord\node_modules\tailwindcss\lib\cli\build\index.js:44:9) {
[1]   reason: 'The `bg-primary-50` class does not exist. If `bg-primary-50` is a custom class, make sure it is defined within a `@layer` directive.',
[1]   file: 'C:\\Users\\dynam\\dosscord\\app\\styles\\tailwind.css',
[1]   source: '@tailwind base;\r\n' +
[1]     '@tailwind components;\r\n' +
[1]     '@tailwind utilities;\r\n' +
[1]     '\r\n' +
[1]     '@layer base {\r\n' +
[1]     '    :root,\r\n' +
[1]     '    html[data-theme="dosscord-default"] {\r\n' +
[1]     '        --base: hsl(120, 2%, 10%);\r\n' +
[1]     '        --base-focus: hsl(120, 2%, 27.6%);\r\n' +
[1]     '        --base-2: hsl(120, 2%, 14.4%);\r\n' +
[1]     '        --base-2-focus: hsl(120, 2%, 18.8%);\r\n' +
[1]     '        --base-content: hsl(120, 2%, 100%);\r\n' +
[1]     '        --base-content-2: hsl(120, 2%, 90%);\r\n' +
[1]     '        --base-content-3: hsl(120, 2%, 70%);\r\n' +
[1]     '        --overlay: hsl(120, 2%, 17.7%);\r\n' +
[1]     '        --overlay-focus: hsl(120, 2%, 37.5%);\r\n' +
[1]     '        --overlay-2: hsl(120, 2%, 25.4%);\r\n' +
[1]     '        --overlay-2-focus: hsl(120, 2%, 37.5%);\r\n' +
[1]     '        --overlay-content: hsl(120, 2%, 100%);\r\n' +
[1]     '        --overlay-content-2: hsl(120, 2%, 90%);\r\n' +
[1]     '        --overlay-content-3: hsl(120, 2%, 80%);\r\n' +
[1]     '        --line: hsl(120, 2%, 1.2%);\r\n' +
[1]     '        --line-focus: hsl(120, 2%, 17.7%);\r\n' +
[1]     '        --input: hsl(120, 2%, 13.3%);\r\n' +
[1]     '        --input-focus: hsl(120, 2%, 13.3%);\r\n' +
[1]     '        --input-content: hsl(120, 2%, 100%);\r\n' +
[1]     '        --input-content-2: hsl(120, 2%, 80%);\r\n' +
[1]     '        --primary: hsl(128, 44%, 58%);\r\n' +
[1]     '        --primary-focus: hsl(128, 44%, 52.5%);\r\n' +
[1]     '        --primary-subtle: hsl(128, 44%, 85.5%);\r\n' +
[1]     '        --primary-content: hsl(128, 44%, 0%);\r\n' +
[1]     '        --primary-subtle-content: hsl(128, 44%, 0%);\r\n' +
[1]     '        --secondary: hsl(135, 62%, 50%);\r\n' +
[1]     '        --secondary-focus: hsl(135, 62%, 44.5%);\r\n' +
[1]     '        --secondary-subtle: hsl(135, 62%, 77.5%);\r\n' +
[1]     '        --secondary-subtle-content: hsl(135, 62%, 0%);\r\n' +
[1]     '        --secondary-content: hsl(135, 62%, 0%);\r\n' +
[1]     '        --info: hsl(248, 50%, 40%);\r\n' +
[1]     '        --info-focus: hsl(248, 50%, 34.5%);\r\n' +
[1]     '        --info-subtle: hsl(248, 50%, 67.5%);\r\n' +
[1]     '        --info-subtle-content: hsl(248, 50%, 0%);\r\n' +
[1]     '        --info-content: hsl(248, 50%, 100%);\r\n' +
[1]     '        --danger: hsl(359, 100%, 50%);\r\n' +
[1]     '        --danger-focus: hsl(359, 100%, 44.5%);\r\n' +
[1]     '        --danger-subtle: hsl(359, 100%, 77.5%);\r\n' +
[1]     '        --danger-subtle-content: hsl(359, 100%, 0%);\r\n' +
[1]     '        --danger-content: hsl(359, 100%, 100%);\r\n' +
[1]     '        --success: hsl(137, 87%, 46%);\r\n' +
[1]     '        --success-focus: hsl(137, 87%, 40.5%);\r\n' +
[1]     '        --success-subtle: hsl(137, 87%, 21%);\r\n' +
[1]     '        --success-subtle-content: hsl(137, 87%, 100%);\r\n' +
[1]     '        --success-content: hsl(137, 87%, 0%);\r\n' +
[1]     '        --warning: hsl(49, 100%, 70%);\r\n' +
[1]     '        --warning-focus: hsl(49, 100%, 64.5%);\r\n' +
[1]     '        --warning-subtle: hsl(49, 100%, 45%);\r\n' +
[1]     '        --warning-subtle-content: hsl(49, 100%, 0%);\r\n' +
[1]     '        --warning-content: hsl(49, 100%, 0%);\r\n' +
[1]     '    }\r\n' +
[1]     '}',
[1]   line: 2,
[1]   column: 1,
[1]   endLine: 2,
[1]   endColumn: 22,
[1]   input: {
[1]     line: 2,
[1]     column: 1,
[1]     endLine: 2,
[1]     endColumn: 22,
[1]     source: '@tailwind base;\r\n' +
[1]       '@tailwind components;\r\n' +
[1]       '@tailwind utilities;\r\n' +
[1]       '\r\n' +
[1]       '@layer base {\r\n' +
[1]       '    :root,\r\n' +
[1]       '    html[data-theme="dosscord-default"] {\r\n' +
[1]       '        --base: hsl(120, 2%, 10%);\r\n' +
[1]       '        --base-focus: hsl(120, 2%, 27.6%);\r\n' +
[1]       '        --base-2: hsl(120, 2%, 14.4%);\r\n' +
[1]       '        --base-2-focus: hsl(120, 2%, 18.8%);\r\n' +
[1]       '        --base-content: hsl(120, 2%, 100%);\r\n' +
[1]       '        --base-content-2: hsl(120, 2%, 90%);\r\n' +
[1]       '        --base-content-3: hsl(120, 2%, 70%);\r\n' +
[1]       '        --overlay: hsl(120, 2%, 17.7%);\r\n' +
[1]       '        --overlay-focus: hsl(120, 2%, 37.5%);\r\n' +
[1]       '        --overlay-2: hsl(120, 2%, 25.4%);\r\n' +
[1]       '        --overlay-2-focus: hsl(120, 2%, 37.5%);\r\n' +
[1]       '        --overlay-content: hsl(120, 2%, 100%);\r\n' +
[1]       '        --overlay-content-2: hsl(120, 2%, 90%);\r\n' +
[1]       '        --overlay-content-3: hsl(120, 2%, 80%);\r\n' +
[1]       '        --line: hsl(120, 2%, 1.2%);\r\n' +
[1]       '        --line-focus: hsl(120, 2%, 17.7%);\r\n' +
[1]       '        --input: hsl(120, 2%, 13.3%);\r\n' +
[1]       '        --input-focus: hsl(120, 2%, 13.3%);\r\n' +
[1]       '        --input-content: hsl(120, 2%, 100%);\r\n' +
[1]       '        --input-content-2: hsl(120, 2%, 80%);\r\n' +
[1]       '        --primary: hsl(128, 44%, 58%);\r\n' +
[1]       '        --primary-focus: hsl(128, 44%, 52.5%);\r\n' +
[1]       '        --primary-subtle: hsl(128, 44%, 85.5%);\r\n' +
[1]       '        --primary-content: hsl(128, 44%, 0%);\r\n' +
[1]       '        --primary-subtle-content: hsl(128, 44%, 0%);\r\n' +
[1]       '        --secondary: hsl(135, 62%, 50%);\r\n' +
[1]       '        --secondary-focus: hsl(135, 62%, 44.5%);\r\n' +
[1]       '        --secondary-subtle: hsl(135, 62%, 77.5%);\r\n' +
[1]       '        --secondary-subtle-content: hsl(135, 62%, 0%);\r\n' +
[1]       '        --secondary-content: hsl(135, 62%, 0%);\r\n' +
[1]       '        --info: hsl(248, 50%, 40%);\r\n' +
[1]       '        --info-focus: hsl(248, 50%, 34.5%);\r\n' +
[1]       '        --info-subtle: hsl(248, 50%, 67.5%);\r\n' +
[1]       '        --info-subtle-content: hsl(248, 50%, 0%);\r\n' +
[1]       '        --info-content: hsl(248, 50%, 100%);\r\n' +
[1]       '        --danger: hsl(359, 100%, 50%);\r\n' +
[1]       '        --danger-focus: hsl(359, 100%, 44.5%);\r\n' +
[1]       '        --danger-subtle: hsl(359, 100%, 77.5%);\r\n' +
[1]       '        --danger-subtle-content: hsl(359, 100%, 0%);\r\n' +
[1]       '        --danger-content: hsl(359, 100%, 100%);\r\n' +
[1]       '        --success: hsl(137, 87%, 46%);\r\n' +
[1]       '        --success-focus: hsl(137, 87%, 40.5%);\r\n' +
[1]       '        --success-subtle: hsl(137, 87%, 21%);\r\n' +
[1]       '        --success-subtle-content: hsl(137, 87%, 100%);\r\n' +
[1]       '        --success-content: hsl(137, 87%, 0%);\r\n' +
[1]       '        --warning: hsl(49, 100%, 70%);\r\n' +
[1]       '        --warning-focus: hsl(49, 100%, 64.5%);\r\n' +
[1]       '        --warning-subtle: hsl(49, 100%, 45%);\r\n' +
[1]       '        --warning-subtle-content: hsl(49, 100%, 0%);\r\n' +
[1]       '        --warning-content: hsl(49, 100%, 0%);\r\n' +
[1]       '    }\r\n' +
[1]       '}',
[1]     url: 'file:///C:/Users/dynam/dosscord/app/styles/tailwind.css',
[1]     file: 'C:\\Users\\dynam\\dosscord\\app\\styles\\tailwind.css'
[1]   },
[1]   plugin: 'tailwindcss'
[1] }
[0] Remix App Server started at http://localhost:3000 (http://169.254.156.55:3000)
[0] GET /signup 200 - - 241.093 ms

[williamlmao]

hey @Techiton, I think that's because primary-50 is not actually a color in Chimera. You can see the available colors in the docs below.

https://www.chimera-ui.com/docs/key-concepts/colors#primary

[Techiton]

Alright, thank you