How to Easily Integrate Alpine JS with Tailwindcss | UI Designing Made Easy |#alpinjs #js #css

[Music] hey developers welcome to another video and i hope it will be quite interesting for you in this video i'm going to teach you about how to install the kelvin css and alpine js previously as i have created a series on television css which is a crash course uh and the link is in the description and the card above so you can visit that and learn how to install intelligent css or setup television css easily with the cli option and in this video we will learn about how to setup these both together detailing css and the alpine js as you can see alpine js is looking quite cool like you said your new lightweight javascript framework though we cannot compare it with the view or react or angular but it is so lightweight and so special for spa single page applications and it's quite interesting so simple so lightweight and powerful we can see 15 attributes six properties in two methods so it will be really easy to learn and for simple uh single page applications it's like uh heavily useful you can now easily set up i set up alpine js with the challenge css and use it for your own purpose so though i have the sale but i will do it once again in this video but with the with a little speed and when reaching 12. i'll explain it how to set up and run both of them so let's dive into it i have a folder called test here and i have dragged it to the visual studio code and here i'll open the terminal and first let's the setup determines this is so we have to install television and run this command on our terminal let's wait for it to install uh so we have now installed the television css let's initiate it and have the talent config file with this command so we'll get a children.config file here as you can see and then we can configure the contents we will have some html5 files maybe in our root folder so we can just say all the dot html this will refer to the root folder after that we have to create the source folder and in and give this all uh delvin directives to our source folder so let's copy it from here create a source folder then inside this let's create a for caller styles.css and paste all the directories of television here next let's go to terminal and build our css with the cli so instead of building it with the terminal i'll do something else so you will get it so let's copy this command instead of going to terminal i'll just go to packages.json and create some scripts object here and just name it build css then colon again here i'll press the command here build instead of input.css we have style.css and the output will be css and the watcher must be stored after that so let's save it and let's see what's the matter here scripts we got we forgot to give a comment okay let's say and this was about the television and now we can run this command to start watching on our terminal npm uh run build css let's see we will get a public folder here with style.css inside it and now we can create in our folder index.html and let's test if challenge is successfully installed so first let's link our television file from public slash style.css and let's give the body a class of bg blue for example 500 let's run it on the browser yeah so the challenge is fine now it's time to configure the alpine js so going to the installation okay we have the cdn option as well we can just include this but if you want to install it via the npm we have the option insta npm installed with point js as you know that we for the television css we just use this script to build our css file from the styles.css in source folder to the public folder and style.css files the same thing we will need for the uh alpine js let me open another terminal and we have this install the sponges so for the the same thing we will need for the alpine js so after installing this alpine js uh i recommend you to install like a bundler yes build is a bundler so we can use it to bundle our alpine scripts to our uh output folder so as build is also let's go to the documentation and we have to bring this one import alpine from the node modules folder then we have to assign it to our window and start it so let's go to the source folder create a new file like a script dot js then paste all the things needed for the alpine now the same thing if you want to bundle it with the es build so we can do it on the each time on the terminal but this will get a little big so we can go to this packages.json put a comma here name it like build js and for that let's give that npx instead of telling css now we have the bundler es build and giving the input file like we can say that this source folder slash script dot js and the out file dash dash out file and equals to which our file now the public and script.js justice build and then this dish watch this means that build and watch are uh like our scripts so let's once again run this one as well the cfs is for fun npm run build js the name that we have given to our script so it is better to use this name instead of each time running this big statement so we got some error let's see i think is about the out file i don't know what's the error here maybe it's something like out file let's run in oh we got again there let me just uh see what's the matter i think this is not bundle this is not built this is bundle let's save it and run again [Music] yeah so now it's fine and as we tested our uh like our television we can test our alpine as well let me just do it a little bit easier let's go to alpine.js and copy this the first code that they have put in on their website let's paste it here let's save it and go to our browser and let's see our target expand the content let's click not working okay one thing more we have not linked our script yes yet we have it in our public folder but we have nothing so in the bottom of the document we can just say script source and then get like publix let's scripture let's save it and now it's working let me click on the expand expand it will expand the content so everything is working fine this was about how to set up television css and alpine js now both are set up together i hope you get something kindly like subscribe and share this channel thank you very much

Channel: Dev Space

Views: 5,422

Keywords: Beshnaw, Web Designing, Web Development, Technology, Computers, Web, Internet, HTML, HTML5, CSS, CSS3, UI, UI/UX, Laravel, PHP, Programming, Coding, Inspiration, Software, Software Engineering, CMS, Database, MySQL, RDBMS, Management System, javascript, How to integrate alpinejs with tailwindcss, Tailwind css and Alpine js, Tailwind and Alpine, What is Alpine JS, What is Tailwindcss, Alpine, Alpinejs, Alpine JS, How to Setup Alpine JS, How to install tailwind, how to install alpinejs

Id: 0jukD2yldTY

Length: 9min 16sec (556 seconds)

Published: Tue Feb 01 2022