https://github.com/angeldev96/tailwind-aspdotnet
Adding Tailwind in ASP.NET 6 MVC
https://github.com/angeldev96/tailwind-aspdotnet
asp-net-mvc dotnet dotnet-core tailwindcss tailwinds
Last synced: 2 months ago
JSON representation
Adding Tailwind in ASP.NET 6 MVC
- Host: GitHub
- URL: https://github.com/angeldev96/tailwind-aspdotnet
- Owner: angeldev96
- Created: 2023-01-13T23:11:25.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-10T19:06:35.000Z (over 1 year ago)
- Last Synced: 2025-03-28T08:17:54.272Z (3 months ago)
- Topics: asp-net-mvc, dotnet, dotnet-core, tailwindcss, tailwinds
- Language: C#
- Homepage:
- Size: 1.24 MB
- Stars: 137
- Watchers: 2
- Forks: 19
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Steps to add Tailwind in ASP.NET 6 MVC Project:
## Video tutorial: https://youtu.be/HndP-Yh8WKc
## Requirements:
- NodeJS
- .NET 6
- Terminal Emulator (Works with Powershell in Windows and bash or zsh in Linux)
## Step 1:
Create the project in Visual Studio or the dotnet CLI
## Step 2:
Start a node project
```sh
npm init -y
```
## Step 3:
Add Tailwind
```sh
npm install -D tailwindcss
```
## Step 4:
Add script to package.json for the css output location
```sh
"scripts": {
"css:build": "npx tailwindcss -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify"
}
```
## Step 5:
Init the tailwind config file
```sh
npx tailwindcss init
```
## Step 6:
Add modules to tailwind.config.json, this is for tailwind to style razor pages:
```sh
module.exports = {
content: [
'./Pages/**/*.cshtml',
'./Views/**/*.cshtml'
],
theme: {
extend: {},
},
plugins: [],
}
```
## Step 7:
Add input css to site.css in wwwroot/css
```sh
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Step 8:
Add itemgroups in the project under the .csproj file, this is for building the css before deploying:
```sh
```
## Step 9:
Include the path to the CSS file in the _Layout.cshtml file (Or the other views you need to style with tailwind)
```sh
```