Setting Up PrimeVue, Tailwind CSS in a Nuxt Project

hello to all today's tack is uh Tailwind CSS presets of un Prime View in a KNX project so we would need Prime View and the tailin CSS module of uh n and the KNX itself so let's try to initiate our next project first with the npx command let's name it Prime tww and it will initiate my project and install a lot of dependencies I think so I will just skip this part for you okay now the dependencies are installed let's try to open our application and let's fire up this code these are the presets when you open up uh the zip Val we have the Lara and the wind we can just get this and maybe just can copy it here with the presets now that's the main idea this thing sits in your application so that you can fully customize the code if you check out the for example here if you check out badge these are tailing classes if we have imported these from an mpm module that's the main reason that why we haven't put it into published it to mpm um there's no clean way to customize the these easily so um let's see we have the presets let's go back to the documentation now we have to import our presets here open up next config uh we setting the default preset of Prime View to be Lara uh presets are Dynamic so you can switch them on the fly as well but this is the default preset and the Prime View will be responsible for configuring almost everything and uh all components are registered but we can maybe just here as an example you can just exclude editor and charge the ones with third party dependencies in your application as well and I think that's it now the final step is adding the Tailwind configuration so what we have here is the uh there's an extended pallet that the presets use for primary colors and surface colors so that the using the CSS variables these can be changed dynamically so we have to extend this part and this part is uh to make sure the tail vnd scans these presets folder otherwise the utility classes won't end up in your bundle um as you know may know the tail Works in like the adjus in time compiler in the past they were using per CSS uh instead of removing the unused CSS now it's like an on demand uh approach which works much better of course now but uh to be able to do it the Tailwind needs to scan your application and needs to make if you have some custom uh folders like presets it needs to be aware of this so here we have we can open with the module you can use a tailin config CSS you need to go over this documentation but I for Simplest I will just use uh the configuration here which the tailin wraps and here we have the config and I think I can get this part here and move it here config and yeah I think I think it looks good okay everything seems to be set the final part is that we as you may know these require a default value so these are the the ones with titing the green green emerald color yeah so we need to find um some CSS like app here we can do it like this here for example um there are a couple of ways to do it I think um you can put it uh like this or maybe you can just create in the assets folder a with assets here we have you know assets is a special folder in next Bas scss something like maybe you can use it for Global stuff and now we can use the um at import URL assets CSS base so let's check out what we have we have the default colors for the CSS variables that we are using as the default uh of these extended colors and Tailwind generate like background surface primary servers and these presets if you check this out are using these for example let's check out the badge to see if you some yeah you see that uh the extended color for text borders and backgrounds these are used so that by changing the CSS variable your your application can change as well okay now let's see what we have okay this is uh let's make this flex and let's try to use a button Prime View button and yeah this is now the Prime View button right and let's also add an input text Prime View input okay so you may notice that these look like regular Prime View buttons but they are actually styleable T so if you go to the input text here is the Lara so for example what we can do is for example we can change the paddings here to something bigger now it's like Giant paddings and you have full control over here like the colors and placeholders H State Focus State you can dynamically change presets in the future we are adding more presets as well for example let's make it fully rounded and so on and I think it works works well and everything is um uh working fine in a NX environment so I think it's time to wrap it up so what we have done to summarize created The View project uh sorry the KN project first the second step was adding um the next uh tail module the nox Tail as I mentioned you can also do it manually but in a nox Sant it it makes sense the third part is adding the by following the nox documentation of Prime View we have added Prime View and the next module of Prime View configured Prime View using uh the module and we we need uny through downloaded the presets from GitHub which you may also use the Builder because as you can see the the one in the guar pleas contains everything you can just use the Builder to CH pick what you need the next phase was uh configuring the presets presets are basically a pass through object configuration so we use the import PT property and the final part is configuring tail vnd to use these extended color palette and adding the default colors so that's it um happy coding in your now now next project with tailwind and the Prime View and because you have full control over your style you can use these presets you can build your own presets and so on and hopefully uh you found this tutorial useful and beneficial and thank you and see you on the next tutorial

Channel: Cagatay Civici

Views: 3,793

Keywords:

Id: q5ck18NwYz8

Length: 8min 37sec (517 seconds)

Published: Fri Dec 22 2023