Giới thiệu
Vue 3 kết hợp với TypeScript và Tailwind CSS đang trở thành bộ ba phổ biến cho việc xây dựng giao diện người dùng hiện đại, nhanh chóng và dễ bảo trì. Bài viết này sẽ hướng dẫn chi tiết cách cấu hình dự án sao cho môi trường phát triển mạnh mẽ, hỗ trợ kiểm tra kiểu dữ liệu toàn diện và tối ưu hoá việc viết style bằng Tailwind mà không gây xung đột.
Cài đặt môi trường
Bước 1: Khởi tạo dự án Vite với mẫu Vue‑TS
Sử dụng Vite để tạo project nhanh chóng, tích hợp sẵn TypeScript.
npm create vite@latest my-vue-app -- --template vue-ts cd my-vue-app npm install
Bước 2: Thêm Tailwind CSS
Cài đặt Tailwind và các phụ thuộc cần thiết, sau đó khởi tạo cấu hình.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p
Sau khi chạy lệnh trên, Vite sẽ tạo ra hai file tailwind.config.js và postcss.config.js. Hãy mở tailwind.config.js và chỉnh sửa content để Vite quét đúng các file Vue.
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}Cấu hình TypeScript
Mặc dù Vite đã tạo sẵn tsconfig.json, chúng ta cần bổ sung một vài tùy chọn để tối ưu IntelliSense và phản hồi lỗi sớm.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"skipLibCheck": true,
"types": ["vite/client"],
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}Đặc biệt, strict: true kích hoạt toàn bộ chế độ nghiêm ngặt, giúp phát hiện lỗi tiềm ẩn. paths cho phép sử dụng alias @/ thay cho đường dẫn tương đối dài.
Sử dụng Tailwind trong component Vue
Dưới đây là một component mẫu sử dụng script setup cùng TypeScript và áp dụng Tailwind để tạo giao diện nhanh.
<template>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<svg class="h-12 w-12 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14c-4.418 0-8 1.79-8 4v2h16v-2c0-2.21-3.582-4-8-4z" />
</svg>
</div>
<div>
<div class="text-xl font-medium text-black">{{ title }}</div>
<p class="text-gray-500">{{ description }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const title = ref<string>('Vue 3 + TypeScript')
const description = ref<string>('Kết hợp mạnh mẽ giữa Vue, TypeScript và Tailwind CSS')
</script>
<style scoped>
/* Không cần viết CSS tùy chỉnh vì Tailwind đã cung cấp đầy đủ */
</style>Nhờ cấu hình postcss và tailwindcss trong vite.config.ts, Tailwind sẽ tự động loại bỏ các lớp không sử dụng khi chạy npm run build, giúp giảm kích thước bundle.
Kết luận
Việc thiết lập đúng TypeScript, Tailwind và Vite mang lại môi trường lập trình hiện đại, giúp phát hiện lỗi sớm, giảm thời gian styling và tối ưu hoá bundle cuối cùng. Nếu bạn muốn đi sâu hơn vào các mẫu kiến trúc lớn và thực hành dự án thực tế, hãy Tham khảo khóa học "Lập trình Front-End với VueJS Framework" tại đây.
.png)
