How To Integrate Asp.NET Core Project with Bootstrap, TailwindCSS and ParcelJS
Tags: development, bootstrap, tailwindcss, parceljs
Published: 2020-10-02 20:11:09

---
title: "How To Integrate Asp.NET Core Project with Bootstrap, TailwindCSS and ParcelJS"
published: true
description: Integrating an ASP.NET Core web application with Bootstrap, TailwindCSS and bundling with ParcelJS.
tags: ["development", "bootstrap", "tailwindcss", "parceljs"]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lqsegpjxqasatbq4xehm.png
canonical_url: https://kags.me.ke/post/integrate-asp-net-core-project-with-bootstrap-tailwindcss-parceljs/
---

##  Introduction

When you create a new ASP.NET Core Razor Pages project, the new project comes bundled with Bootstrap CSS framework and jQuery Javascript library. Files for both Bootstrap and jQuery are placed in a _wwwroot/lib_ folder. The _lib_ folder contains both compressed and un-compressed versions of all files your project may require.

During development, you add more CSS to customize the design of your final application. At times, the CSS you add may end up duplicating formatting under different class names. Coming up with these CSS class names at times also prove to turn out to be a challenge. This is where Tailwind CSS comes in handy. [Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs](https://tailwindcss.com/). Each Tailwind CSS class (`w-16`) maps to a single CSS declaration (`width: 4rem;`). By combining these classes, you can freely apply any CSS declarations to a page without ever thinking about coming up with CSS class names. Tailwind does not contain any predefined components and this is where Bootstrap comes in handy. You let Bootstrap provide the components like buttons, cards, and more while enhancing these components using Taiwind CSS.

Combining both Bootstrap and Tailwind CSS will however result in a huge increases the size of the CSS files. [ParcelJS](https://parceljs.org/) to our rescue. Parcel is a web application bundler which offers blazing fast performance and requires zero configuration. Using Parcel will allow us to compress and combine the CSS files into a single file. Now we get the best from both Bootstrap and Tailwind CSS and end up with manageable minimized CSS files.

In this post, we create an ASP.NET Core razor web application, add Tailwind CSS to the project, bundle the project asset files with Parcel and finally add the bundling process to our project build process.

## Prerequisites

Your development environment should already be set up to create ASP.NET Core applications and have Node JS installed. 

If however you are starting from a clean slate, you can run the following installations to follow along:

- Install [Visual Studio Code](https://code.visualstudio.com/)

- Install [.NET Core SDK](https://dotnet.microsoft.com/download)

- Install [C# for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) extension

- Install [Node.js](https://nodejs.org/en/download/).

## Create ASP.NET Core Razor Project

Open a terminal or console window and run the following command `dotnet new razor -o ParcelBootstrapTailwind` and wait for the project creation process to complete. `razor` is the template of the project. To see a list of available templates, run `dot new --help` command. `-o` creates a folder for our project. 

Open the project by running `code ParcelBootstrapTailwind` command.

Click **Yes** when the **Required assets to build and debug are missing from ParcelBootstrapTailwind'. Add them?** dialog is displayed. 

![alt="required vscode debug and build assets"](https://dev-to-uploads.s3.amazonaws.com/i/ffxhc5d9gkqbgbgfnfo8.png)

If the dialog closes before you press the **Yes** button, select **View** > **Command Palette..**, type **.NET** and click on  **.NET: Generate Assets for Build and Debug**.

![alt="generate required vscode debug and build assets"](https://dev-to-uploads.s3.amazonaws.com/i/xk6axhenvks2la13vqte.png)

From the main menu, select **Run** > **Run Without Debugging** and a browser page should open with a **Welcome** message.

Now that our project runs using the bundled CSS library, we can move to the next phase. Back in the text editor, stop the running project by selecting **Run** > **Stop Debugging**.


## Prepare Project To Use Parcel

We need to do a bit of re-organization before using ParcelJS to bundle our asset files.

1. Create an _assets_ folder in the root of the project. Your are free to name the folder differently.

1. Within the _assets_ folder, create a file and name it _main.js_. You can use a  different name for the file. This file will be the  entry point for Parcel.

1. Copy or move _js_ and _css_ folders from _wwwroot_ to the _assets_ folder

1. Delete the _wwwroot_ folder

1. Open  _Pages/Shared/__Layout.cshtml_ file and replace `<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />` and `<link rel="stylesheet" href="~/css/site.css" />` with `<link rel="stylesheet" href="~/dist/css/main.css" />`. Scroll down the file and replace `<script src="~/lib/jquery/dist/jquery.min.js"></script>`, `<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>` and `<script src="~/js/site.js" asp-append-version="true"></script>` with `<script src="~/dist/js/main.js"></script>`

1. From the main menu, select **View** > **Terminal**.

1. We need to create a _package.json:_ file at the root of the project. Run `npm init -y` command from the Terminal window. `-y` will make the command run using the default options without prompting us. If you want to supply the values for any  of the required options, then omit the `-y` from the command.

1. Install Bootstrap and jQuery. Run `npm install bootstrap jquery jquery-validation jquery-validation-unobtrusive popper.js` from the Terminal.

1. We will include the jQuery validation Javascript files into  our build process. Therefore, _Pages/Shared/_ValidationScriptsPartial.cshtml_ file is no longer needed and can be deleted.

1. Run `npm i -D parcel-bundler parcel-plugin-purgecss parcel-plugin-custom-dist-structure` command to install Parcel and plugins we will require in our build process. Both `parcel-plugin-purgecss` and `parcel-plugin-custom-dist-structure` plugins are optional and may be omitted. However, we will configure `parcel-plugin-purgecss` to remove any unused CSS classes. Parcel.js outputs all built resources in the same folder. We will therefore use `parcel-plugin-custom-dist-structure` to move files to custom folders within the output folder.

1. Open _main.js_ and add code to import Bootstrap and jQuery as follows: 
{% gist https://gist.github.com/kagundajm/8aa830470acc449ceac01e8ee15483ff %}

1. Open _package.json_ file at the root of the project and add scripts to build Parcel. Replace the `scripts` section with the following:
  {% gist https://gist.github.com/kagundajm/b11d106ef51f7ffa52b4a5176103c7c6 %} Scroll down and add the following code to move files to custom folders. Add the code below `"devDependencies"` or any other location:
  {% gist https://gist.github.com/kagundajm/638401793f1da8ae5921184120aaa33a %}

1. To remove any un-used CSS class during deployment, create a _purgecss.config.js_. We will update this file with the content files that contain CSS class names and the location of our CSS files.
  {% gist https://gist.github.com/kagundajm/6ad502122eb4104e9a48b6037af2e099 %}

1. From the terminal window, let us test that Parcel build works as expected. From the Terminal window, run `npm run build` and  `npm run publish`. If the builds run to completion, you should output similar to the following:
  ![alt="parcel build and publish test output"](https://dev-to-uploads.s3.amazonaws.com/i/ssrmawwy3y6b0yccx6at.png)

1. To complete this section, let's run the the application. Select **Run** > **Run Without Debugging** from the main menu and a browser page should open with a **Welcome** message similar to the way it was before using Parcel to bundle our CSS and Javascript files.

## Add Tailwind CSS

Open the Terminal window and run `npm install tailwindcss`. This command will add the Tailwind CSS package to our project.

Create _assets/css/tailwind.css_ file and update with the following:
  {% gist https://gist.github.com/kagundajm/4b161b55ab89102dbe5c1d7ca1648810 %}Make sure `@tailwind base;` is commented out to avoid conflicting with Bootstrap.

Some CSS class are common to both Bootstrap and Tailwind. We are therefore going to use a prefix for Tailwind CSS to differentiate between Bootstrap and Tailwind classes. Create a _tailwind.config.js_ file within the root of the project by running `npx tailwindcss init` command from the terminal window. Open the file and add `prefix: 'tw-'` prefix to use for Tailwind classes. Also, as we are using a Parcel `parcel-plugin-purgecss` plugin for purging un-used classes, we will therefore add `purge: false` to disable the purge feature within Tailwind. After these changes, your _tailwind.config.js_ file should look similar to the following:
{% gist https://gist.github.com/kagundajm/4471dbc1686034dea091617d29d6345d %} 

Add an import `import './css/tailwind.css'` statement for the _tailwind.css_ within _main.js_ just before the `import './css/site.css'`.

The final step for adding Tailwind to our project is by adding a PostCSS plugin to our Parcel build chain. Create  _postcss.config.js_ file at the root of the project.
{% gist https://gist.github.com/kagundajm/4471dbc1686034dea091617d29d6345d %}

If we now run `npm run build`, we should see that there is an increase in size on the _main.css_. The size however reduces drastically when we run the `npm run publish`.
  ![alt="parcel build and publish test output"](https://dev-to-uploads.s3.amazonaws.com/i/ws8f31chpuu56nz6b13q.png)

To test whether the Tailwind CSS classes are being used, open _Pages/_Layout.cshtml_ and change the background color of the **<body>** tag by adding a  `class="tw-bg-gray-200"` class. Also add a gradient to the nav bar by adding `tw-bg-gradient-to-r tw-from-teal-400 tw-to-blue-500` CSS classes to the **<nav>** tag. Run `npm run build` command and select **Run** > **Run Without Debugging** from the main menu. You should observe that the home page and the nav bar are now displayed using our new changes.
![alt="homepage updated with tailwind css classes"](https://dev-to-uploads.s3.amazonaws.com/i/ovvnu6noonrh6fl132k4.png)

When working with Tailwind CSS classes in Visual Studio Code, the Tailwind CSS IntelliSense extension will come in handy.This extension provides features such as autocomplete, syntax highlighting, and linting. To install the extension, open your Extensions and search for Tailwind CSS IntelliSense. 

Also, if you have some CSS code and cannot remember out its equivalent class name in Tailwind CSS, [Tailwind CSS class search](https://tailwind.spacet.me/) will be there to assist. Type a CSS style name and the website will display both the Tailwind CSS class name and style properties for you.
![alt="tailwind css class search website"](https://dev-to-uploads.s3.amazonaws.com/i/ofpnrmn8obmzzbn91h7v.png)

## Add Parcel To Project MsBuild Process.

To integrate Parcel build process to the project build process, we make some modifications to our project file. This will ensure that the `npm run` commands run before the project build and publish process is performed.

The [Microsoft Build Engine (MSBuild)](https://docs.microsoft.com/en-us/visualstudio/msbuild/msbuild) tool uses properties, items, tasks, and targets to build a project. Properties are key-value pairs which direct MSBuild what to do. You define properties using `<PropertyName>Value</PropertyName>` elements. MSBuild has its own reserved properties. You reference property values using `$(PropertyName)` syntax. Items are inputs into the build system while tasks are commands which are executed in order to complete a Target. Targets group tasks together.

In our project, we require properties for _assets_, _node__modules_, and _wwwroot_  folders. Open _ParcelBootstrapTailwind.csproj_ and add these properties within `<ProjectGroup>` as follows:
{% gist https://gist.github.com/kagundajm/e0067719c5feb768cb8af1a67440cda7  %}

 Next we create our Targets. The first Target will check whether NodeJS is installed and that the _node\_modules_ folder exists. If NodeJS is not installed, it will not be possible to proceed with with the build and we request the user to first install NodeJS. If _node\_modules_ folder does not exist, we first start by re-installing NPM packages before proceeding with the build. The other two targets will be called depending on whether we are doing a normal build or publishing our application. If we are running a normal build, the build process will invoke `npm run build` otherwise `npm run publish` will be invoked. The updated _ParcelBootstrapTailwind.csproj_ should be similar to the following:
 {% gist https://gist.github.com/kagundajm/b6ffaa4ab7c1c163371e29431d4e7c2a %}

From the main menu, select **Run** > **Run Without Debugging** and if we typed everything without errors,  a browser page should open with a **Welcome** message. To test for the project publishing, run `dotnet publish -c Release -o ./publish` from the terminal. You will observe the project will build and create a _publish_ folder at the root of  the project. The size of the CSS file within the _publish/wwwroot/dist/css/main.css_ will be much smaller than the one within _wwwroot/dist/css/main.css_.

## Conclusion

Not all of us are good at CSS and designing websites. By using CSS frameworks such as Bootstrap, we can use existing predefined components to create good looking websites. Using the low-level classes provided by Tailwind CSS enhances the look and feel of our websites without having to create custom classes. And when our websites are ready for deployment, we can bundle our website assets with no configuration using Parcel.

In this post, we set up a new project in Visual Studio Code, added Bootstrap and Tailwind and finally bundled our asset files using Parcel. As a final step, we automated the assets bundling commands into the project build process thereby ending up with minified asset files ready for deployment. 

Thank you for reading this far and I hope you picked something along the way that can be of use in your current or next project.

Happy Bootstraping and Tailwinding with Parcel!