How To Integrate Asp.NET Core Project with Bootstrap, TailwindCSS and ParcelJS

Table of Contents

alt=""

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. 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 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:

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”

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”

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.

  2. 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.

  3. Copy or move js and css folders from wwwroot to the assets folder

  4. Delete the wwwroot folder

  5. 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>

  6. From the main menu, select View > Terminal.

  7. 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.

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

  9. 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.

  10. 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.

  11. Open main.js and add code to import Bootstrap and jQuery as follows:

  12. Open package.json file at the root of the project and add scripts to build Parcel. Replace the scripts section with the following: Scroll down and add the following code to move files to custom folders. Add the code below "devDependencies" or any other location:

  13. 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.

  14. 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”

  15. 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: 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:

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.

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”

To test whether the Tailwind CSS classes are being used, open _Pages/Layout.cshtml and change the background color of the 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