https://github.com/fritzthecat9/tailwindblazor
How to add Tailwind CSS to Blazor WASM project
https://github.com/fritzthecat9/tailwindblazor
blazor blazor-webassembly c-sharp csharp css tailwind-css tailwindcss
Last synced: 3 months ago
JSON representation
How to add Tailwind CSS to Blazor WASM project
- Host: GitHub
- URL: https://github.com/fritzthecat9/tailwindblazor
- Owner: FritzTheCat9
- Created: 2024-04-06T22:25:50.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-06T22:51:13.000Z (about 2 years ago)
- Last Synced: 2025-01-28T03:42:58.158Z (over 1 year ago)
- Topics: blazor, blazor-webassembly, c-sharp, csharp, css, tailwind-css, tailwindcss
- Language: CSS
- Homepage:
- Size: 117 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## How to install tailwindcss to blazor project:
1. Go to ".\TailwindBlazor\TailwindBlazor" in CMD and run command:
```
npx tailwindcss init
```
2. The "tailwind.config.js" file will be created. Change it to:
```
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./**/*.{razor,html}'],
theme: {
extend: {},
},
plugins: [],
}
```
3. Create /Styles/tailwind.css file and change it to:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. Add some tailwindcss classes to "Home.razor" component:
```
@page "/"
Home
Hello, world!
Welcome to your new app.
```
5. Add tailwind file to "index.html":
```
```
6. Comment out some code in "NavMenu.razor" that toogles nav menu (bug)
```
```
7. Run command to build tailwind and listen to changes:
```
npx tailwindcss -i .\Styles\tailwind.css -o .\wwwroot\css\tailwind.css --watch
```