Theme Generator myCustomTheme

[Bimbimz]

Link to the Page

https://www.skeleton.dev/docs/generator

Describe the Issue (screenshots encouraged!)

I have followed the guide but get an error message when using myCustomTheme. there are not enough tutorials on the internet for this.

tailwind.config.js

import { myCustomTheme } from './src/styles/CustomTheme'

plugins: [
    skeleton({
        themes: {
            custom: [
                myCustomTheme
            ]
        }
    })
]

[Sarenor]

While I would love to help you, we'd need some more information, like "whats the error message"?

[endigo9740]

@Bimbimz we cover themes in detail in our documentation here:

https://www.skeleton.dev/docs/themes

But otherwise what Sarenor said - we need more information about what's happening to help you.

[Bimbimz]

this is the error message

[plugin:vite:css] [postcss] Cannot find module './src/styles/CustomTheme'

file name is CustomTheme.tsx i changed it to CustomTheme.ts and it works.

is it possible to create a file with the CustomTheme.jsx extension? and what does it contain?

[endigo9740]

@Bimbimz that's correct, per our documentation we typically recommend .ts files for themes. To make sure we're on the same page:

• .js - Javascript file extension
• .ts - Typescript file extension
• .jsx - JSX file extension (typically used for React components)
• .tsx - the Typescript enabled variation of JSX files

There would be no immediate benefit of using JSX for theme files. They're a Javascript object that's provided to the Skeleton Tailwind plugin to access the settings within. This include colors, fonts, etc.

You linked to the Skeleton v2 theme generator, but note that Skeleton v2 only supports Svelte and Sveltekit as mentioned the Get Started information:

So let me ask - are you trying to use Skeleton v2 within a React project? If so that's possible, but not officially supported by us. However, we're currently working on developing Skeleton v3, which will have full support for React and Next.js. If you're curious about that, you can learn more here:

• https://github.com/skeletonlabs/skeleton/discussions/2681

Just note that Skeleton v3 is in an early pre-release state right now and not ready for production use.

[Bimbimz]

i want to use the latest version. i have v2 by running this by default: npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin

does v3 support Svelte? i use react a lot, and these days trying svelte.

[endigo9740]

Ok, the latest package releases for Skeleton v2 are as follows:

• @skeletonlabs/skeleton: v2.10.2
• @skeletonlabs/tw-plugin: v0.40

You can run npm list to verify your installed versions.

For Skeleton v3 - one of the primary goals is to support Svelte 5, which introduces some new component APIs and features. At launch we'll be supporting Svelte 5 and React, but we do hope to introduce other frameworks over time.

[endigo9740]

Also I think the original issue raised has been resolved, so I'll go ahead and close out this issue. If you have further questions feel free to reach out here (I'll see new posts). Thanks!