Create a Custom Component Library with Vue & Tailwind CSS

[@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-).

[@sahib.alejandro]

This is very helpful, thanks

[@peze_yt]

Hello, how I can add prefix to tailwind?

[@bozzistef]

Thanks for the tip!

[@nikolaystoychev7170]

In case you don't want to use the css from package, instead discover the files from node_modules/florida-components and compile them into your project. Example ⬇ module.exports = { content: [ 'node_modules/florida-components/dist/*.js' ], OR module.exports = { content: [ 'node_modules/florida-components/components/**/*.vue' ],

[@s1kebeats]

thank you very much!!

[@jo0o0oke3e3er]

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

[@amirhoseinarmantaheri7029]

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 ?

[@YouGetIt]

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

[@alexandreevich2278]

Where is TS support? :(

[@markatienza5101]

Created one on my github btw: a-3140/vue3-tailwindcss-ts-ui-component

[@abhishekpaliwal346]

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)

[@ZlatkoIliev-s4j]

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

[@CuevasGPablo16]

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

[@jo0o0oke3e3er]

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

[@maxk6655]

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

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

[@andrewboddy2791]

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 (using base technology makes it more accessible )

[@brokula1312]

Why? Because someone gave you styleguide and brand guidelines to follow.

[@OzoneGrif]

1. Building your own component library can give you better control over the design of your application. You also won't be dependent on library issues and limitations. Vuetify isn't that good anyway plus it is very opiniated... 2. It can be, but it requires more attention to details. Tailwind is a good middle-ground honestly. 3. Use what works for you... if works, then why not use it?

[@hogwrangler3283]

imo this talk is about how to wrap your own components (css & behavior) into a npm package for others to consume. you can use any ui library or write your own entirely custom css and behavior for your components & tailwind was just used for demo purposes.

[@andrewboddy2791]

@@hogwrangler3283 thanks, yes, there was a lot of 'NPM' in this which is not important to me. I thought of 'roll my own' but that is too ambitious for our small team. Lowest risk is to use Vuetify with our own layer of styled components; we can style differently from the toy-town look that comes out-of-the-box.

[@albertomanzano1745]

1) on large companies where they have several internal projects you may need to have a good design system with its own component library based on all needs across projects rather than having to install n+vuetify instances and copy pasting components. Both ways work, it depends on what you need; does it going to have a big scale? o just one small project.

[@breezycodes]

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

[@brokula1312]

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