Integrating Tailwind into an ASP.NET Core Project
This article will discuss about integrating Tailwind CSS into an ASP.NET Core Project. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Use Tailwind CSS with CDN URL
You can use the Tailwind CSS from any CDN URL - like this
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">. If you’re using this approach many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.
Using Tailwind package with Npm
This is the recommended way in the Tailwind documentation. First you need to create a
project.json file, you can do this with the help of
npm init -y command. Once it is create the
project.json file - run the following command -
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest. This will install the packages and tools required.
Here is the
Next you need to create the Tailwind configuration file. You can do this by running following command -
npx tailwindcss init. This will create a minimal
tailwind.config.js file at the root of your project. Here is the minimal
Next you need to create a stylesheet inside
wwwroot/css directory with the file name
style.css with the following code. This is the
@tailwind directives which will inject Tailwind’s base, components, and utilities styles into the
Then you need to add the following command in
package.json which will generate the
This will help you to create the site.css file with
npm run command. You can also include the
--minify flag which will minify the css file as well.
And finally you need to modify project file to include build step which will run the
npm run command
Once you build the dotnet app with dotnet build command it will execute the
npm run style:build command. And which will generate your stylesheet. Here is the command output.
Using BamButz.MSBuild.TailwindCSS NuGet package
Another option is using one
BamButz.MSBuild.TailwindCSS NuGet package. You need to install this package in your ASP.NET Core MVC project. In this option you don’t need to include the
project.json and the
Next you need to modify the project file like this - which will generate the Tailwind file from the style sheet.
Once you build the app using
dotnet build command, this will execute the generate the Tailwind stylesheet with the min.css filename.
You can remove the Bootstrap style references and you can include the style which is generated by the command and you can use the file in the app.
Happy Programming :)