Create a Custom Component Library with Vue & Tailwind CSS

0:00 Custom Component Libraries with Vue and Tailwind
1:23 Component Libraries
2:10 Step 1: Generate a Vue application
3:11 Step 2: Install Tailwind CSS
7:06 Step 3: Build your First Component
11:45 Step 4: Register Components
15:16 Publish to NPM
16:33 In action
20:06 Other things to consider
21:34 Q&A

[rm-rf]

If you do not use Tailwind in the project that consumes the component library, you probably want to disable preflight (style resetting). Otherwise it may break your main applications layout. Also, to avoid clashing class names when you do use Tailwind in your main application, use some prefix for tailwind in the component library (like tw-).

[juanramonlabrada]

Why in min 17:31 she is importing the style from and not from the library that was installed? Also in the github demo code this is wrong.

[maxk]

But it's build one big css file that not ideal for production

[abhishekpaliwal]

How we can import as a component currently based on the video we are importing at the root level you can say in app mount I want to import the component in wherein I need to use (route or components based wherein we need to use not on the root level)

[nikolaystoychev]

In case you don't want to use the css from package, instead discover the files from and compile them into your project. Example ⬇

module.exports = {
content: [

],

OR

module.exports = {
content: [

],

Great presentation, however the name of the video should be "Create Custom Vue Component Library with Tailwind"

[joookeeer]

8:20 you re importing again the component which is already imported by the other index.js file.
it would be more clean to simply do: export * from ./Button

[amirhoseinarmantaheri]

i have a small question:
if i wanna use my web component which is created by vue 3 in a third party website (website may uses any version of vue or not at all)
and the question:
is it possible to face vue version conflict between my web component vue version and the third party website vue version ?

[joookeeer]

why register them globally? would not make sense to import only whatever is needed? as soon as the library grow, the probability to don't use of all them is quite high

[ZlatkoIliev-sj]

What if I want to also export icons from my library?!? How can I do that?

[YouGetIt]

What are the differences in the configuration if one is using the Vite, without vue-cli?

[CuevasGPablo]

why is using the old create vue app? can we use the new way of scaffolding vue projects?

[breezycodes]

🤣😂🤣😂 the code always want to show off when you are showing it to people.

[andrewboddy]

1. WHY would I do this rather than use Vuetify? I am at this decision point. (I have used Vuetify before)

2. I dislike the Vuetify layout classes, although I am not a CSS master (or competent) I prefer to use raw CSS so I learn the basics of grid and flexbox. Is this a good approach?

3. Another example/preference (am I wrong?)... Rather than use v-divider from Vuetify is it not more simple to use <hr/> (using base technology makes it more accessible )

[brokula]

These presentations are getting more and more useless. Please, now teach me how do you declare variables.