Prerequisites
Before starting the project make sure to install the following utilities:
- Node LTS (18.x.x or higher recommended)
- .NET 8.0 SDK (this tutorial was created with .NET 6.0)
- Code editor. We recommend VSCode
Creating a new ASP.NET application
Let's begin by setting up a brand-new ASP.NET application together. This way, we're all on the same page, and we can walk through each step together.
Step 1
Create a new app with use of dotnet and go to the newly created directory.
dotnet new webapp -o my-project
cd my-project
That's it for now! Let's install tw-elements.
Installing and configuring Tailwind CSS and TW Elements
Step 1
File structure
If you are using the .NET 8.0 SDK version, your project file
structure should look like this (package.json and config files will be
created in the next steps):
my-project/
├── obj/
├── Pages/
│ ├── Shared/
│ │ ├── ...
│ │ └── _Layout.cshtml
│ │ └── _Layout.cshtml.css
│ ├── ...
│ └── Index.cshtml
├── Properties/
├── wwwroot/
│ ├── css/
│ │ └── site.css
│ ├── js/
│ │ └── site.js
│ ├── ...
│ ├── package.json
│ ├── postcss.config.js
│ └── tailwind.config.js
└── ...
Now that we have analyzed what our project looks like let's install Tailwind
CSS. We are going to install our packages inside the
wwwroot directory.
npm install within the
wwwroot directory, you find that there is no
package.json file or node_modules directory,
please run npm init and then retry this step.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 2
Add the paths to all of your template files in your
tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"../Pages/**/*.cshtml",
"./js/**/*.js",
"./node_modules/tw-elements/js/**/*.js",
],
darkMode: "class",
plugins: [require("tw-elements/plugin.cjs")],
};
Step 3
Replace the styles that were created via dotnet inside
site.css file with Tailwind directives.
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
@tailwind base;
@layer base {
html {
@apply text-surface;
@apply bg-white;
}
html.dark {
@apply text-neutral-50;
@apply bg-body-dark;
}
}
@tailwind components;
@tailwind utilities;
p {
@apply leading-[1.6];
}
Step 4
Install TW Elements.
npm install tw-elements
Step 5
Start the Tailwind CLI build process. Run the CLI tool to scan your template
files for classes and build your CSS. Links are related to the
wwwroot directory so make sure you are in the right place.
npx tailwindcss -i ./css/site.css -o ./css/output.css --watch
You can also add this script to the package.json so that you
can run it later again without worrying about input and output files.
"scripts": {
"build-tw": "npx tailwindcss -i ./css/site.css -o ./css/output.css --watch"
},
Step 6
Now we have to add the styles and script to our
_Layout.cshtml file. Navigate to
Pages/Shared/_Layout.cshtml and add the following code inside
the head tag.
...
<head>
...
<link
rel="stylesheet"
href="~/css/output.css"
asp-append-version="true" />
...
</head>
...
And add the following code before the closing body tag.
<body>
...
<script
type="module"
src="~/node_modules/tw-elements/dist/js/tw-elements.umd.min.js"></script>
</body>
Optional: You can also remove the rest of the content inside the
body tag. Leave only the @RenderBody() and script
tags.
Step 7
Navigate the the ./Pages/Shared/_Layout.cshtml.css and remove
styles that were added during creating the new ASP.NET app.
Step 8
Now we can start working on our TWE app. Add the TWE components you intend
to use in your project for example into Index.cshtml file.
@page
@model IndexModel
@{
ViewData["Title"] = "TWE Integration";
}
<div class="mt-16 flex justify-center">
<p class="text-lg">
Hover the link to see the
<a
href="#"
class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
data-twe-toggle="tooltip"
title="Hi! I'm tooltip"
>tooltip</a
>
</p>
</div>
Step 9
Run the local server. You're all set to dive into using TW Elements for your ASP.NET project. Have fun!
dotnet run