---
title: Giao diện mới
date: 2021-05-22 02:38:06.582789 UTC
---
Hôm nay, sau rất nhiều năm tạo website cá nhân này, tôi mới có một đợt tu sửa giao diện đầu tiên.

![new ui](https://quan-images.b-cdn.net/blogs/imgur/2026/x4qpErB.png)

Nhìn qua thì không khác gì mấy với giao diện cũ: vẫn thanh điều hướng màu cam trên đỉnh, với dòng chữ Playground to đùng phía dưới. Thực ra, sự thay đổi lớn nhất là nằm trong code: Đổi framework CSS từ [Bootstrap](https://getbootstrap.com/docs/3.4/) v3 sang [TailwindCSS](https://tailwindcss.com/) v2, bỏ [jQuery](https://jquery.com/) và thay bằng [AlpineJS](https://github.com/alpinejs/alpine). Kết quả lớn nhất của sự thay đổi này là sửa được lỗi thanh điều hướng trong màn hình điện thoại như sau:

<img src="https://quan-images.b-cdn.net/blogs/imgur/2026/FPDFkqW.png" alt="Before" width="320">

_Before_

<img src="https://quan-images.b-cdn.net/blogs/imgur/2026/zZdjZ08.png" alt="After" width="320">

_After_

Việc sửa này làm được là nhờ Tailwind. Trước đây khi dùng Bootstrap, tôi bị gặp một bất tiện là Bootstrap chỉ có các class sẵn theo những phần tử giao diện cụ thể, như `.btn`, `.navbar`, `.navbar-nav` khiến việc tùy biến rất chắp vá, sửa được cái này thì hỏng cái kia (và hình như lỗi một phần cũng vì tôi dùng lại HTML từ một template có sẵn và tác giả template đó đã viết code cho thanh điều hướng một cách không đầy đủ). TailwindCSS thì không như thế, nó không tạo class cho các đối tượng như Bootstrap mà tạo class theo kiểu "viết tắt cho thuộc tính CSS", ví dụ:

- `mt-4`: Margin phía trên (top) rộng 4 đơn vị.
- `px-4 md:pl-8`: Độ dày đệm lề (padding) theo chiều ngang là 4 đơn vị mặc định cho các màn hình, nhưng khi màn hình lớn từ cỡ "medium" (`md`) trở lên thì áp dụng padding lề trái dày 8 đơn vị.

Cách thiết kế của Tailwind đã mang tới những hiệu quả thú vị như sau. Chẳng hạn thanh điều hướng phía trên, tôi muốn ở màn hình laptop thì các link dàn hàng ngang, nhưng khi ở màn hình điện thoại thì chúng xếp dọc, tôi sẽ dùng các class của TailwindCSS như sau:

```html
<nav class='flex flex-col md:flex-row'>
  <div>Link 1</div>
  <div>Link 2</div>
</nav>
```

Nghĩa là, mặc định, bất kể màn hình nào, các phần từ `<div>` con sẽ xếp hàng dọc (`flex-col`), nhưng với màn hình bắt dầu từ cỡ medium (`md`) trở lên thì xếp hàng ngang (`flex-row`).

Class `flex` cũng là một điều thú vị mà TailwindCSS mang lại. Cùng với `grid`, nó giúp việc dàn dựng bố cục nhiều phần tử theo hàng lối được dễ dàng, đẹp mắt hơn. Nhớ thời Bootstrap v3 trở về trước, mỗi khi làm bố cục này, tôi phải đánh vật với các thuộc tính `float`, `clear` của CSS. Công bằng mà nói thì `display: flex` và `display: grid` là các tính năng mới của CSS v3 mà thời Bootstrap v3, đa số trình duyệt chưa hỗ trợ nên đội ngũ Bootstrap không dám đưa vào.

Về JavaScript, website này chỉ có một chỗ dùng JavaScript là thanh điều hướng, để khi bấm vào nút "Blog" thì xổ ra menu các danh mục con, nên việc dùng jQuery đi kèm Bootstrap là hơi quá. TailwindCSS được thiết kế để không phụ thuộc một framework JavaScript nào, nên tôi có thể bỏ jQuery và thay bằng AlpineJS cho nhẹ. Tôi cũng thích cách dùng của AlpineJS với cú pháp rất giống VueJS. Có thể bạn sẽ thắc mắc nếu thích cú pháp của VueJS thì sao không dùng VueJS mà lại dùng AlpineJS. Lý do là tôi thích cái gì "vừa đủ". Ứng dụng front-end của tôi quá đơn giản nên tôi làm biếng cả bước tạo ra một đoạn `<script>` riêng, viết code vào đó để tạo một application Vue bài bản.

Lấy ví dụ, tôi sẽ viết một ứng dụng siêu nhỏ mở/đóng menu bằng hai code: VueJS và AlpineJS. Với Vue thì tôi phải vừa viết HTML vừa viết JavaScript (xem [kết quả](https://codepen.io/hongquan-vn/pen/MWpprPd)):

```html
<div id='app'>
  <button class='border border-indigo-1 bg-white hover:text-indigo-800 p-2 rounded-lg' @click='open =! open'>Show menu</button>

  <ul v-show='open' class='mt-4 ml-4'>
    <li><a href='#' class='underline'>Link 1</a></li>
  </ul>
</div>
```

```js
const App = {
  data() {
    return {
      open: false
    }
  }
}

Vue.createApp(App).mount('#app')
```

Còn với Alpine, tôi chỉ cần HTML (xem [kết quả](https://codepen.io/hongquan-vn/pen/ZEeevdz)):

```html
<div x-data='{ open: false }'>
  <button class='border border-indigo-1 bg-white hover:text-indigo-800 p-2 rounded-lg' @click='open =! open'>Show menu</button>

  <ul x-show='open' class='mt-4 ml-4'>
    <li><a href='#' class='underline'>Link 1</a></li>
  </ul>
</div>
```

Vậy đó. Vì TailwindCSS, VueJS, AlpineJS thú vị quá nên nhân dịp này, tôi thay thế hàng loạt website (của EasyUni và AgriConnect) sang các thư viện / framework này luôn. Mà cơ duyên sao đó khiến cả tháng nay các nhiệm vụ mà tôi lãnh nhận toàn làm về front-end, nhờ thế tôi mới tranh thủ đổi mới website cá nhân của chính mình (thứ mà tôi luôn xếp sau các website làm cho công ty).