How to Setup Up a Component Library with React, Vite, Storybook and Tailwind

[@MarioPon-zc5se]

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

[@DevDiveIn]

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. 👍

[@zqgAFf]

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

[@susilthapa4367]

having same issue

[@susilthapa4367]

try this dts({ tsconfigPath: "./tsconfig.app.json", exclude: ["**/*.stories.tsx", "**/*.test.ts"], }),

[@luanfonsecap]

I've watched a lot of tutorials and examples to do this and no one was as good as yours!

[@christinahastenrath1829]

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!!

[@DevDiveIn]

Love the feedback! Thank you. I'm glad to hear the video helped you set up your component library.

[@destocot1729]

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

[@DevDiveIn]

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!

[@destocot1729]

@@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