Sử dụng Tailwind CSS trong Blazor

Blazor

Tailwind CSS là một framework CSS hiện đại, giúp bạn xây dựng giao diện web linh hoạt, nhanh chóng và đẹp mắt. Trong bài viết này, chúng ta sẽ cùng nhau tích hợp Tailwind CSS vào một ứng dụng Blazor WebApp.

Bước 1: Tải Tailwind CSS CLI

  • Tải phiên bản standalone của Tailwind CLI phù hợp với hệ điều hành của bạn.
  • Đổi tên tệp thành tw4cli.exe để tiện sử dụng.
  • Đặt tệp vừa tải vào solution root như sau:
/MyBlazorApp                   <-- solution root
├── MyBlazorApp                <-- Hosted project
│   ├── wwwroot  
│   ├── Components
│	│	├── ...
│	│	├── App.razor
│   ├── ...
│   ├── appsetings.json               
│   ├── Program.cs
│   └── MyBlazorApp.csproj
├── MyBlazorApp.Client         <-- Blazor WebAssembly project
│   ├── Layout
│   ├── Pages
│   ├── ...
│   ├── Program.cs
│   └── MyBlazorApp.Client.csproj
├── tw4cli.exe                 <-- Tailwind CLI
└── MyBlazorApp.sln

Bước 2: Cài đặt Tailwind CSS

  • Cài Node.js nếu chưa có.
  • Mở terminal tại solution root và tạo package.json:
npm init -y
  • Sau đó cài đặt Tailwind CSS:
npm install tailwindcss

Bước 3: Cấu hình Tailwind CSS

  • Trong thư mục wwwroot của project Host, tạo thư mục css.
  • Tạo tệp input.css trong thư mục css và thêm nội dung:
@import "tailwindcss";

Bước 4: Chạy Tailwind CLI để sinh CSS

  • Tại solution root, chạy lệnh sau để build CSS:
tw4cli -i ./MyBlazorApp/wwwroot/css/input.css -o ./MyBlazorApp/wwwroot/css/output.css --watch
  • Trong App.razor, thêm link tới tệp CSS vừa sinh:
<link href="css/output.css" rel="stylesheet" />

Sau khi hoàn tất các bước trên, Tailwind CSS đã sẵn sàng để sử dụng trong dự án Blazor của bạn.

Bình luận

Gợi ý

0%