How to Install Tailwind in a Blazor Project (2023)

hey everyone welcome back to a new tutorial in this tutorial we will get to know how to install Tailwind in a Blazer webassembly project so first if you don't know what is still one CSS it's a utility first CSS framework back to the all type of utilities like flexbox and the grid embeddings and even a typography it's mostly used to create a design system and they provide the essential tools to create and design system like sizing colors typography and shutters and then we have Blazer which is a single page application framework written using c-sharp and net and it has many features like creating forms and security and calling JavaScript and seizure let's get started so here in Visual Studio 2022 we are going to create a new blazer webassembly empty project so just click create a new project and select Blazer web assembly app empty double click and select the project name I'll just name it Blazer and talent dot UI and for the solution name I'll just call it blazerline talent and for the location I will just paste the source location and I will click next select.net 7 and click create and once the visual studio is loaded you will see this Blazer overview tab so just close it and go to pages and index so as you can see it's just an empty project so there are no Pages like counter and forecasts and so on so I just closed this one and right click on the project name and select open folder in file explorer so once you are in the file explorer right click and select open internal so we have opened up the terminal so we can install a few BM buckets so before you start check whether you have MBM or not so just type in BM hyphen V so hyphen V flag stands for version so we are checking the version of the MBM installed in our device so the version of my device is 8.1.2 so if you face any error message just go to MBM and install it so first of all we need to install this package so just declare the terminal and type MBM in it because we want to create a new nbm project in the current directory so the package name will just leave it as Blazer and talent just click enter until you finish all of these so as you can see we have a package.json so if you double click you will see all of this Json like properties like the name and version and so on so just delete the test script and save and go back to the terminal so first we want to install this packet so just type BM I or install hyphen D and install this bracket so first package is obviously tl1 TSS and the second package is cross hyphen environment because we need to access the environmental variable in node.js and the third package is boss CSS because we will install tailwind and configure it using keyboard CSS and we need both CSS hyphen CLI and the last package is Auto prefixer and click enter so it might take a while so just be patient Twilight let's install these packets so once the packets are installed go back to backstage.json and you must see the dev dependencies so the next step is just to configure the boss CSS so right click on the solution and go to add new item or you can just go directly to the terminal to create the file so basically we need two JS files the first file is boss css.comfact.js and the second file is gentleman.config.js so once the files are created go to both css.com page and type module dot exports equals and open calibrances we need a single property which is plugins and this plugins objects will have basically two properties the first property is still on CSS which is nothing more than an empty object and the second property is auto prefixer after that we need to configure Tailwind config so basically we are going to do the same over here so module.exports equals an object so here first we needed the team property and this theme property will just extend the end of the object so in this property you will have the theme Styles like the colors and so on and then we have the content which is nothing more than an array so the content will have a bath that will scan the current directory and look for the classes that will be included in the style sheet so the first path is dot slash double star slash anything that ends with DOT razor so any eraser files that have Tailwind classes will be included in the final style sheet and then we have dot slash www.root index.html so if you don't already know the host file of this project is the index.tml and finally we need the plugins property and this nftr8 so like this we have just set up both CSS and Tailwind then go back to the terminal and we need to create a new directory so this director will be Styles and navigate to the Styles use using Siri and it creates a new item which is tailwind.css so this style sheet will have telemund directives which are specific to television so the first directive is Talent base and the second directive is Tailwind components and third directive is Talent utilities so once we have added the base directive which are base and components and utilities we are set to run MBM but before that we need to go to backup.json and add a script so this script will be built CSS and we'll call it debugging because in later stage we will have a release script third descriptor on both CSS and we need to specify the width of the challenge but before that I just need to rename this directory to start so the path will be dot slash styles slash cell one dot CSS and we need to specify the output so the output will just be in the root file and in CSS we'll just name it something like talon.sport so the math will be dot slash www.root slash CSS slash Tailwind dot Styles dot CSS or you can even name it dot exports but for debug verbs I will just name it dot debug so we are all set so in the terminal of irmbm run build CSS column divide as you can see in the CSS file HTML debug file is created so this file contains the default styles of based cell window project this will not be efficient since we are just running MBM so what we want to do is whenever I run this project I want to run MBM build script so I just close this out and double click on Blazer and talent project so over here we will have a chain of tasks that to run one after each other that we need to run before the compilation of this project so we can run VM run build script so first we will Define a Target element so this targets element will have a name of build Tailwind CSS so this script will run before Target combo so run this project whenever you combine the projects so first we need to execute a command and this command will be MBM run build CSS turn on debug so if I delete 10. debug file and I run this project you're not that it's creating the talent.jebug.css file automatically because this target is being run before the project compilation before that before adding more targets because we want to optimize it for production users I'll go to index.tracer and I will add a set of classes so the classes will be text hyphen 4XL and font hyphen balls in B hyphen 4. so if I save this and go to Talent exported file you will notice there there are no more classes so once I click on this project you'll notice that over here a set of classes will be added you'll see that these classes are being added to the CSS file and this is because of the content bands we have added over here so currently we are not checking against situations like we we are not having MBM or anything like that so we need to add two more targets so the first Target name will be check and BM is installed and this will run before the next Target which is installing BM so just to demonstrate that I'll just go with this one and I will paste it over here and this target installing BM will run before Build Challenge CSS so basically it's just like a team that will determine when this will be run so in checking BMS install Target we'll have an execute element so this excuse element to run in VM hyphen V which will check the for the version of MBM install in the device and continue on error will be true because we don't want to end the workflows and the output element will have a task parameter of exit code and the probability name of error code and we need to export an error so just add error elements so the condition so we have a condition and that condition will be the error code we have specified over here should not equals zero and watch out for the single quotations so if this condition is not we will export the text which is U must install in BM to run this task so this workflow will determine if we have MBM is installed or not and for installing BM Target we will have execute elements and that's element one on command of MBM install or even you can sort it to I but I'll just give it to install and then once we install this we want to create a file so we'll use Touch elements and the files will be MBM last install and set always create Etc so almost we have we are done with this but in the first probability group we need to create a new elements so this element will be named after this file name which is MBM lost install and the parameter will be node underscore modules slash dot slash last hyphen install so MBM last install file will have this text to determine when was the last time we have installed MBM so almost we are done what we need to do now is to have a release workflow so right now we need to take the projection environment so go to both CSS file and add a new property which is CSS Nano which is a package will install later and the value of this property is EMV treble equals projection if this is true use the default presets so present equals default otherwise sensitive volts so like this we have just configured the what CSS but before proceeding I have to add the environment parameter which is AMV and don't forget to add the arrow function and drop it inside there prices so just close this out and go to package.json so here we'll type cross hyphen environment cell wind mode Talent underscore mode equals build so whenever we run the scripts tailored mode will be set to build using cross environments package and we will export the project as default which is for build environments so just duplicate this one and change it to release and this time we'll just delete challenge mode and we will set node underscore environment equals projection so whenever we run the script it will set the environment to protection and thus it will Minify the CSS file so we'll just change this to telwyn.release.css so we can know that this is able to release and don't forget to install CSS Nano projects so once you have installed this package we can go back to Blazer internment project and we have to add another execute element and this time we will change the debug to release and we will have a conditions on both execution elements so this time the condition will be configuration should match with divide so if it's a debug build it will run the script otherwise we need to run the script which is for release so just change the debug to release and you should be all set so in the CSS file so in this yes directory you can see that it's just created the release file and if you double click you'll see that it's a minified but it's being created because we didn't add the conditions earlier so just delete all of this and right click and the collectible solution so this time it's giving us an error because we forgot to add a quotation so add equation here and over here so right click and click build again and in the CSS directory you should see terrible dot debug file so this file is not being minified and all the classes we have added are there so just change the builds mode to release and right click on the project and click build and as you can see in the CSS directory we have the challenge release file which is being unified and the debug file is being generated because we didn't change the build mode to release so you can just safely delete it so if you click F5 to run this project you'll notice that the size of children's are not being applied this is because we didn't link the style sheet to this project so all we need to do is just link the style sheet with HTML so it's sort of attribute to bcss 7. debug and we can add the relation of style sheets so if you click F5 and run this project you'll note that challenge styles are being applied and if not applied you can just hit F12 and right click and click empty cache and hard refresh so you can just delete the cache file so as you can see that Tillman says are being employed and that's it this is how you can add salmon to Blazer webassembly project and if you need the project files you'll see a link to GitHub in the description and as always this was your host pixel X and till next time stay creative

Channel: IT for Everyone

Views: 7,033

Keywords:

Id: enE3omOdzZc

Length: 14min 57sec (897 seconds)

Published: Sat Jan 07 2023