Frontend Development

Vì sao nên dùng Tailwind CSS với Astro?

14/5/2026

Astro nổi tiếng với khả năng tạo website siêu nhanh nhờ giảm JavaScript không cần thiết. Khi kết hợp với Tailwind CSS, bạn sẽ có:

✅ CSS nhẹ hơn nhờ tree-shaking
✅ Responsive cực nhanh
✅ Không cần viết nhiều CSS thủ công
✅ Dễ maintain dự án lớn
✅ Tốc độ build tốt cho SEO

Đặc biệt với các website như:

  • Blog cá nhân

  • Landing page

  • Website doanh nghiệp

  • E-commerce

  • Portfolio

thì Tailwind + Astro là bộ đôi rất mạnh.

Bước 1: Tạo project Astro

Nếu chưa có project Astro, hãy tạo mới:

npm create astro@latest

Hoặc dùng Bun:

bun create astro

Sau đó chạy:

cd my-project  
npm install  
npm run dev

Mở trình duyệt:

http://localhost:4321

Nếu website chạy là thành công.

Bước 2: Cài Tailwind CSS cho Astro

Astro hiện hỗ trợ Tailwind rất tốt thông qua integration chính thức.

Cài package:

npx astro add tailwind

Hoặc:

bunx astro add tailwind

Lệnh này sẽ tự động:

  • Cài Tailwind CSS

  • Config Astro integration

  • Tạo file cấu hình cần thiết

Sau khi hoàn tất, project sẽ có:

src/  
astro.config.mjs  
tailwind.config.mjs

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

Từ Tailwind v4, cấu hình đã đơn giản hơn nhiều.

Tạo file CSS global:

@import"tailwindcss";

Ví dụ:

src/styles/global.css

Trong layout Astro:

---  
import "../styles/global.css";  
---  
  
<html lang="en">  
  <body>  
    <slot />  
  </body>  
</html>

Tailwind sẽ tự scan class trong project.

Không cần config phức tạp như trước.

Bước 4: Test Tailwind hoạt động

Mở file:

src/pages/index.astro

Viết thử:

<h1 class="text-4xl font-bold text-blue-500">  
  Hello Astro + Tailwind  
</h1>

Nếu chữ màu xanh hiển thị nghĩa là Tailwind đã hoạt động thành công.

Bước 5: Responsive Design trong Astro + Tailwind

Một ưu điểm lớn của Tailwind là responsive rất nhanh.

Ví dụ:

<div  
  class="  
    grid  
    grid-cols-1  
    md:grid-cols-2  
    lg:grid-cols-4  
    gap-4  
  "  
>  
  <div class="bg-gray-100 p-6 rounded-xl">  
    Card  
  </div>  
</div>

Giải thích:

  • grid-cols-1 → mobile

  • md:grid-cols-2 → tablet

  • lg:grid-cols-4 → desktop

Điều này giúp website hiển thị đẹp trên mọi màn hình mà không cần viết media query.

Bước 6: Cấu hình Dark Mode

Dark mode đang gần như là tiêu chuẩn UI hiện nay.

Trong Tailwind v4, bạn có thể dùng class strategy.

Ví dụ:

<htmlclass="dark">

Component:

<div  
  class="  
    bg-white  
    text-black  
    dark:bg-black  
    dark:text-white  
    p-6  
  "  
>  
  Hello Dark Mode  
</div>

Hoặc dùng JavaScript để toggle:

document.documentElement.classList.toggle("dark");

Bạn nên lưu trạng thái vào:

localStorage

để giữ theme khi reload.

Bước 7: Tạo Component Reusable

Một lỗi phổ biến khi dùng Tailwind là viết class quá dài.

Ví dụ xấu:

<button  
  class="  
    bg-blue-500  
    hover:bg-blue-600  
    text-white  
    px-5  
    py-2  
    rounded-lg  
    font-semibold  
  "  
>  
  Click me  
</button>

Thay vào đó hãy tạo component reusable.

Button.astro

---  
interface Props {  
  text: string;  
}  
  
const { text } = Astro.props;  
---  
  
<button  
  class="  
    bg-blue-500  
    hover:bg-blue-600  
    px-4  
    py-2  
    rounded-lg  
    text-white  
    transition  
  "  
>  
  {text}  
</button>

Sử dụng:

<Button text="Đăng ký ngay" />

Code sẽ sạch và dễ maintain hơn nhiều.

Bước 8: Kết hợp DaisyUI với Astro

Nếu bạn muốn làm UI nhanh hơn, có thể dùng DaisyUI.

Cài:

npm install daisyui

Thêm plugin:

@plugin"daisyui";

Ví dụ button:

<buttonclass="btn btn-primary">  
  Mua ngay  
</button>

Ưu điểm:

  • UI đẹp sẵn

  • Có theme

  • Dark mode tự động

  • Build landing page cực nhanh

Nhược điểm:

  • Thiết kế đôi lúc bị “generic”

Bước 9: Dùng shadcn/ui với Astro

Nếu muốn UI hiện đại hơn, bạn có thể dùng shadcn/ui.

Điểm mạnh:

  • Thiết kế đẹp

  • Component reusable

  • Professional UI

  • Dễ customize

Phù hợp:

  • SaaS Dashboard

  • Admin panel

  • Website startup

  • Product website

Tuy nhiên setup sẽ phức tạp hơn DaisyUI một chút.

Best Practices khi dùng Tailwind trong Astro

Dưới đây là những cách dùng chuẩn giúp project sạch hơn.

1. Không nhét quá nhiều class vào một component

Sai:

class="text-sm md:text-base lg:text-lg xl:text-xl font-bold tracking-wide ..."

Nên tách component.

2. Dùng utility grouping

Ví dụ:

btn-primary  
card  
section-container

Để tái sử dụng.

3. Ưu tiên Astro Islands

Không hydrate component không cần thiết.

Ví dụ:

<Component client:visible />

sẽ giúp website nhanh hơn.

4. Tối ưu ảnh

Dùng:

:assets


thay vì ảnh raw.

Ví dụ:






Điều này giúp giảm đáng kể điểm LCP.

---

## 5\. Không lạm dụng animation

Quá nhiều animation làm website lag trên mobile.

Chỉ animate:

-   Button hover
    
-   Modal
    
-   Navbar
    
-   Loading state
    

---

# Cấu trúc project Astro + Tailwind nên dùng

Ví dụ structure:

src/
│── components/
│ ├── ui/
│ ├── sections/
│
│── layouts/
│
│── pages/
│
│── styles/
│ └── global.css
│
│── content/


Cách tổ chức này dễ scale cho website lớn.

---

# Astro + Tailwind có tốt cho SEO không?

Câu trả lời là **rất tốt**.

Vì Astro:

-   Render HTML trước
    
-   Giảm JavaScript
    
-   PageSpeed cao
    
-   LCP tốt
    
-   TTFB nhanh
    

Tailwind chỉ là CSS utility nên gần như không ảnh hưởng SEO nếu tối ưu đúng.

Đây là combo được nhiều developer dùng cho:

-   Blog SEO
    
-   Website doanh nghiệp
    
-   Landing page
    
-   Affiliate site
    

---

# Kết luận

Nếu bạn đang tìm một cách xây dựng website **nhanh, đẹp và tối ưu SEO**, thì **Astro + Tailwind CSS** là lựa chọn rất mạnh trong năm 2026.

Tóm tắt quy trình:

1.  Tạo Astro project
    
2.  Cài Tailwind bằng `astro add tailwind`
    
3.  Config Tailwind v4
    
4.  Tạo responsive layout
    
5.  Bật Dark Mode
    
6.  Xây reusable component
    
7.  Kết hợp DaisyUI hoặc shadcn/ui
    
8.  Áp dụng best practices
    

Khi sử dụng đúng cách, bạn có thể tạo website vừa **đạt hiệu năng cao**, vừa **dễ maintain**, đồng thời giữ được trải nghiệm người dùng mượt mà.

Tags

#Astro.js #JavaScript #React.js #TypeScript #Tối ưu hiệu năng web

Góp ý nội dung