ElianCodes

← Back to blog

Published on 12/16/2021 23:16 by Elian Van Cutsem

Using Tailwind CLI with Blazor

Last year I wrote an article about using TailwindCSS with Blazor. It was a struggle, since Blazor had to be tricked to install and compile TailwindCSS via PostCSS using NodeJS. Yesterday, TailwindCSS launched a new tool called Tailwind CLI. So it’s time to revisit trying a combination of TailwindCSS with Blazor!

Bootstrapping a new Blazor project

Installing dotnet

First of all, you should install a dotnet version on your local system. Since I use windows, I use choco to install my dotnet SDK.
You can also install it from their website.

choco install dotnetcore-sdk -y

Note: I used version dotnet-core 5 for this ‘project’

Making the project

Starting a new project is easy, just put the follow command in your terminal:

dotnet new blazorserver -o YourAppName

now when you enter the YourAppName directory, you should be able to start the project in dev mode with dotnet watch run.

You should be sent to localhost:5001 which is the default for dotnet apps. Here you’ll see an example welcome page built with bootstrap.

Example welcome page

Switching from Bootstrap to Tailwind

Get rid of Bootstrap

While Bootstrap still is a widely used and good CSS framework, we’ll be using TailwindCSS (duh!), so let’s delete all files in the css directory.

Also delete the <link> elements refering to them in Pages/_host.cshtml

Tailwind all the way

Now let’s try out Tailwind. First of all we need an executable. The executables can be found on their GitHub repo here. Be sure to grab the exact one for your OS.

Once the file is downloaded, move it to the current project directory.

tailwind executable in project directory

Now we can make a new config file by running the following command in the project root

./tailwind init

We can now see that a file called tailwind.config.js is made in the project root! Yay!

Now let’s make a tailwind.css file in the wwwroot/css directory with the standard Tailwind imports

@tailwind base;
@tailwind components;
@tailwind utilities;

Let’s compile tailwind into usable CSS

The only thing we need to do now, is build our Tailwind config into browser ready CSS and link it from our HTML.

The TailwindCLI has a command for building and watching the css file. At the moment, we still need to give the entire path to the input and output path, but you can build a seperate script to take care of this ofcourse!

./tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/output.css

If you’re working on the CSS, you can add the --watch flag to the command above, the CSS wil then recompile on edits.

Note: add your output.css file to the .gitignore if you’re using git, so the file won’t get uploaded.

Now let’s add the file to Pages/_host.cshtml by adding

<link rel="stylesheet" href="css/output.css" />

You can now use TailwindCSS as usual!

Written by Elian Van Cutsem

← Back to blog

Recent Blogposts

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.