No video :(

Add Tailwind CSS to Blazor! | Build a Blog - Ep 01

Подписаться 2,2 тыс.

Просмотров 1,7 тыс.

50% 1

In this video of the Build a Blog series, I set up our initial Blazor application and I show how to add Tailwind CSS to it. By default Blazor apps come with Bootstrap included, but I prefer to strip it out and use Tailwind.
I show how to set up and configure Tailwind config file and how to use the Tailwind CLI along with npx to create the final css file.
I also give some hints on how to run the tailwind cli command along with the dotnet watch command in Jetbrains Rider.
Code from this episode:
github.com/Scr...
Code for the whole series:
github.com/Scr...
Follow me on social media!
Instagram: / scriptbytes
Threads: www.threads.ne...
Check out my blog!
scriptbytes.io/

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@AlejandroBiancucci 4 месяца назад

Great set up video. Straight forward and easy to follow. My development experience is so much better with this set up. Keep it up!

@shahnawazk 8 месяцев назад

Thanks for all you are doing, keep it up. Looking forward to learn new Blazor stuff.

@scriptbytes 8 месяцев назад

Thanks!

@gianfrancodiaz6486 5 месяцев назад

This may be useful for somebody watching this tutorial: If you are using Visual Studio and you'd like to run automatically before the project compiles, you may copy and paste this XML code inside your Blazor server .csproj (after you defined the *tailwind:dev command* inside your *package.json* file): What does it do? It runs the content of the specified command in package.json BEFORE compilation. I added a 3000 ms delay in case Tailwind needs extra time to finish running since you want the output CSS ready before the execution.

@scriptbytes 5 месяцев назад

Great info, thanks!

@user-xi4ic2zi9y 8 месяцев назад

Look forward to update

@oncalldev 8 месяцев назад

You have a very direct approach in your tutorials - getting from Point A to B as fast as you can. I assume that you're gearing this series more towards intermediate developers who can fill in the gaps and may not require extended explanations. Using a Mac, JetBrains, and introducing NPM seem more to unnecessarily complicate things - although they are fine platforms/tools. I've worked in software development for a long time and I use RU-vid videos to learn something new, reinforce what I know, and basically see things in a way I may not have known about before. Your videos certainly seem to fall into the latter category for me and I'm fine with that and will continue to follow your series. If your intent is to onboard newer developers or those new to Blazor, it may not be the right combination.

@scriptbytes 8 месяцев назад

You are 100% correct. I am assuming most viewers have a general knowledge of C# and web development concepts if they are watching my videos. I also know using a Mac and Rider might be weird for a .Net/Blazor app, but I’m ok with that. This is the same setup I use in my day job with a full .Net/Microsoft stack and rarely have issues. I think most things are similar enough to Visual Studio that it (hopefully) won’t be too confusing to viewers, but we’ll see. I appreciate the feedback though! Thank you!

@paulh6933 8 месяцев назад

thanks for using the cli!!!

@larsthomasdenstad9082 4 месяца назад

Awesome and quickfire video. Only possible improvement would be commands in description. Subscribed.

@Duelweb 5 месяцев назад

You have an "unhandled exception" error when your app runs. I have same, which prevents project from running.

@scriptbytes 5 месяцев назад

Thanks, I'll try to get it fixed soon.

@MarkTulewicz 6 месяцев назад

I tried this in the latest visual studio... but for some reason i get a very different app.css when it inspect, than what I see in the app.css that tailwind generates. my text-red-800 is in the tailwind app.css, but when I run its not there.

@MarkTulewicz 6 месяцев назад

Fixed: I had to rename app.css to tailwind_app.css it seems something in visual studio writes out a app.css on top of it while compiling?

@scriptbytes 6 месяцев назад

Glad you got it working!

@Duelweb 5 месяцев назад

Followed your directions, but intellisense does not show up in my home page ?

@scriptbytes 5 месяцев назад

I think another person commented they had to install the tailwind extension.

@Duelweb 5 месяцев назад

@@scriptbytes Thanks, yes this solved the problem.

@CHACAL8949 8 месяцев назад

How to create a component library and use tailwind?

@scriptbytes 8 месяцев назад

This is something I haven't dug into really deep yet, so I'm not 100% sure this is right, but more than likely I think you'd want to use a Razor Class Library to put all of your components into. Then you could package these up into a dll or nuget package and use across multiple projects. As for using Tailwind in it, I think just make sure you are using the tailwind CLI in the project that consumes the components and it'll work? I'd have to test it out though.

@lerocher2182 6 месяцев назад

Nice! How can I do all this in Visual Studio 22?

@scriptbytes 6 месяцев назад

Everything should be the same except the last part where I showed how to run the steps in parallel. Unfortunately I haven’t used VS in a year or so, so I’m not sure exactly how that’s done, but I would assume there is a similar way of doing it.