Hey! Great video! So I ran into the issue that concurrently doesn't really like using single quotes ' when running commands. If anyone else runs into this issue I managed to fix it by changing them from single quotes ' to backslash double quotes \" :D
Nice Catch! Thanks for commenting. 😀 It's funny I originally had a double quote, but decided to use single quotes to make it easier to ready for the video. Lesson learned. I didn't realize single quotes don't work on all machines. I'll be sure to update the GitHub repo with this change. 👍
Hi I wonder why in your dist file you have components/ card , d.ts file while I have nothing but plain cjs es and umd , do you think if is something wrong with config ? and which part should I pay closer attention
This is a great video and I love to see Vite in here. Maybe add it to the title? Thank you for explaining clearly every important thing. Helped me setup my component library! I don't love the music but that is a personal preference. Great Video!!
great video thanks for explaining the little things is there a way to do this without having to import the style sheet? also i cant seem to get the types to show properly in my next.js app, the button is showing with styles but no auto complete is presented at all
As far as I know, I don't think there is a way to create a component library that uses Tailwind without importing a stylesheet. I could be mistaken though. If you opted to use a CSS-in-JS library I know that works. Good callout on the auto-complete. I have mine turned off for video creation and didn't notice. In the vite.config.ts, inside the dts function, add insertTypesEntry: true as an option. I've updated the GitHub repo with that change. 👍 Just a heads up though. You might have to close and reopen your project for vscode to start seeing these changes. Sometimes it's finicky. Thanks for the comment!
@@DevDiveIn ill experiment with the `insertTypesEntry` later what ended up working for me was adding a types field also to my exports "types": "./dist/index.d.ts", "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/khrm-ui.es.js", "require": "./dist/khrm-ui.umd.js" }, "./styles.css": { "require": "./dist/styles.css", "default": "./dist/styles.css" } }, hmm, maybe ill refactor to CSS modules although I'm not sure what the advantage would be, I only decided to use tailwind because I was lazy but for my library itself I'm not really tired to anything I want to be easily used by others (not like anyone would use it but that's just my thought process) I did like tailwind prefix thing you did so I did do that, however I did not do the part when you talked about specificity because I was just making a button for starters and I didn't want to add a wrapper div with a `ui` class for example on top of it, if you think I misunderstood that part of have alternative approach for a button I would love to know, feel free to see my code if your curious at github(dot)com/destocot/khrm-ui
Hey! Great video! So I ran into the issue that concurrently doesn't really like using single quotes ' when running commands. If anyone else runs into this issue I managed to fix it by changing them from single quotes ' to backslash double quotes \" :D
Nice Catch! Thanks for commenting. 😀 It's funny I originally had a double quote, but decided to use single quotes to make it easier to ready for the video. Lesson learned. I didn't realize single quotes don't work on all machines. I'll be sure to update the GitHub repo with this change. 👍
Hi I wonder why in your dist file you have components/ card , d.ts file while I have nothing but plain cjs es and umd , do you think if is something wrong with config ? and which part should I pay closer attention
having same issue
try this
dts({
tsconfigPath: "./tsconfig.app.json",
exclude: ["**/*.stories.tsx", "**/*.test.ts"],
}),
I've watched a lot of tutorials and examples to do this and no one was as good as yours!
This is a great video and I love to see Vite in here. Maybe add it to the title? Thank you for explaining clearly every important thing. Helped me setup my component library! I don't love the music but that is a personal preference. Great Video!!
Love the feedback! Thank you. I'm glad to hear the video helped you set up your component library.
great video thanks for explaining the little things
is there a way to do this without having to import the style sheet?
also i cant seem to get the types to show properly in my next.js app, the button is showing with styles but no auto complete is presented at all
As far as I know, I don't think there is a way to create a component library that uses Tailwind without importing a stylesheet. I could be mistaken though. If you opted to use a CSS-in-JS library I know that works.
Good callout on the auto-complete. I have mine turned off for video creation and didn't notice. In the vite.config.ts, inside the dts function, add insertTypesEntry: true as an option. I've updated the GitHub repo with that change. 👍 Just a heads up though. You might have to close and reopen your project for vscode to start seeing these changes. Sometimes it's finicky.
Thanks for the comment!
@@DevDiveIn ill experiment with the `insertTypesEntry` later what ended up working for me was adding a types field also to my exports
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/khrm-ui.es.js",
"require": "./dist/khrm-ui.umd.js"
},
"./styles.css": {
"require": "./dist/styles.css",
"default": "./dist/styles.css"
}
},
hmm, maybe ill refactor to CSS modules although I'm not sure what the advantage would be, I only decided to use tailwind because I was lazy but for my library itself I'm not really tired to anything I want to be easily used by others (not like anyone would use it but that's just my thought process)
I did like tailwind prefix thing you did so I did do that, however I did not do the part when you talked about specificity because I was just making a button for starters and I didn't want to add a wrapper div with a `ui` class for example on top of it,
if you think I misunderstood that part of have alternative approach for a button I would love to know, feel free to see my code if your curious at github(dot)com/destocot/khrm-ui