Photo by Form and function are essential elements of a successful application, each playing a role in delivering our end users’ experience. The mastery of both is challenging in an exploding web landscape. For ASP.NET Core developers, web design might not rank high at the top of our skillset. In the years since the web has become what we know it today, many of us have adopted CSS libraries and toolkits to accelerate our design productivity. The most popular for ASP.NET developers being Bootstrap, as it ships with the default application templates.
This post will see how to integrate an up-and-coming utility-first CSS library called * *Tailwind CSS** and how to start utilizing it in our ASP.NET Core applications.
* *TL;DR: Folks can get a working sample at GitHub to see how this solution works. **
What Is Tailwind?
The authors of Tailwind CSS first released Tailwind in November of 2017, to bring a utility-first framework to web developers. Tailwind’s approach is different than other CSS libraries as it doesn’t focus on building components but on building composable helper CSS classes. Let’s look at an example of a notification card.
The class attribute contains utility classes designed to set the background color, margins, padding, and font colors. In
other frameworks, you might see component classes like card or alert.
The authors of Tailwind admit that someone’s initial reaction to this approach might be to recoil in horror.
Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. –Tailwind
They ask you to give it a chance and explain some of the advantages of this approach.
You aren’t wasting energy inventing class names. Let’s face it; naming is hard, right? Your CSS stops growing or grows at a much slower rate. We can build new visual components from existing utility classes. Safer changes. Smaller utilities mean a better understanding of the cascade effects and what that means for the overall design.
For developers who want to stick to traditional UI element componentization, Tailwind CSS also offers the @apply
processor, which we can use to combine multiple utility classes into one logical concept.
Tailwind offers multiple approaches, and ultimately a design strategy is critical for any product, and design systems
are vital for project velocity and prototyping larger applications. The @apply processor can help solidify common UI
elements in a design system without adding additional overhead to HTML payloads.
One of my favorite design authors, Brad Frost, has a great post on the concept of * *Atomic Design**. The Atomic Design methodology recommends starting from the smallest design elements and then incrementally building a system to assemble complete designs by picking pieces.
We’ve barely scratched the surface of Tailwind, and I recommend developers read the documentation to understand the philosophy of Tailwind.
Let’s see how we can start using Tailwind CSS with an ASP.NET Core application.
Dependencies
To get started, you’ll need both the latest .NET SDK and the latest version of NodeJs and NPM. For this post, I used the .NET 5 SDK, Node v15.0.0, and NPM 6.14.9.
Start With An ASP.NET Core Web Project
The first step is to start with an ASP.NET Core web application that has Razor views. The project can either be a Razor Pages application or a traditional ASP.NET MVC application, or a combination of the two.
Utilizing the .NET CLI, we can create either application.
Any one of the commands above will create an ASP.NET Core web application. Let’s move onto the next step, installing Tailwind.
Install Tailwind
We’ll need to initialize our ASP.NET Core project with a package.json for NPM dependencies from the ASP.NET Core
project directory. Run the following command.
The command should create a new package.json at the root of your project.
Next, we’ll install Tailwind and its dependencies.
Our package.json file should look something like this. Note the devDependencies section.
Finally, we need to run the Tailwind initialization command.
When the command is complete, we should have two new files at the root of our web project: postcss.config.js
and tailwind.config.js.
Add Build Scripts
The next step is wiring up the Tailwind processing to our ASP.NET Core build. The first step is to modify
our package.json to process our input CSS and produce an artifact. Let’s add a new script of css:build. Don’t worry
if these files don’t exist yet; we’ll add them in the next section.
We also want to modify our ASP.NET Core project’s .csprojto to run this new NPM command.
It’s essential to use UpToDateCheckBuilt to make sure that we rebuild the entire project any time those files change.
Without the ItemGroup, we would have to trigger a rebuild manually.
You may notice this approach is very similar to my Vue Js post. I worked hard on that post, and it is an excellent approach if you’re interested in adopting Vue as your frontend framework.
Add CSS Files
Under the wwwroot folder, we can delete any lingering Bootstrap files. The files will be in the directories
of ./wwwroot/css and ./wwwroot/lib/bootstrap.
We can now create a new site.css file with the following contents.
This file is where we can put any custom CSS components utilizing the @apply processor. In general, we can leave the
file as-is.
Building the project now should produce an output.css file under ./wwwroot/css. Folks comfortable with Tailwind can
likely stop here, but let’s look at how we can modify our views to use Tailwind and prune our CSS using
the tailwind.config.js file settings.
Modify Layout and Razor Views
In my project, I decided to use Razor Pages. The _Layout.cshtml will be the same for ASP.NET MVC and Razor Page
applications. I’ve decided to use a [Minimal Blog]https://github.com/tailwindtoolbox/Minimal-Blog() sample layout
from Tailwind Toolbox.
As a quick start, here is the modified Razor. **Note the reference to our output.css file.
We can also modify Index.cshtml Razor to use Tailwind classes. I’ve copied the content from
the Tailwind Toolbox GitHub repository.
Running our application now shows our newly styled Tailwind UI.
Prune Unused CSS Settings
You may have noticed that the Tailwind build process is generating a 3 Megabyte file in the build output.
Don’t worry about that file size because Tailwind comes with a pruning mechanism that we can set to remove unused CSS
utility classes. Let’s change our tailwind.config.js file to scan our Razor views and remove any superfluous CSS from
our final output file.
When we rebuild our project, we now see a huge file size saving, with the final output being only 19.11KB.
That’s a remarkable feature of the Tailwind build pipeline, and we just fiddled with a few settings.
Conclusion
Design is critical to many web applications, and as ASP.NET developers, we have a lot of options at our disposal. Luckily, with ASP.NET Core and the latest .NET SDKs, we have mechanisms to integrate other valuable tools into our projects easily.
For folks who want a complete running ASP.NET Core project, check out a working sample at this GitHub repository.
Tailwind seems like a promising way to build user interfaces and design systems. I have to admit I’m not an expert, but I hope to learn more in the upcoming months as I dive deeper into the subject.
If you are currently using or thinking about using Tailwind, please leave a comment below. I’d love to hear your thoughts.
