1. Giới thiệu

Chào các bạn! Trong bài viết trước, chúng ta đã cùng nhau khởi động một dự án Vue cơ bản sử dụng Vite. Hôm nay, chúng ta sẽ tiếp tục với một bước tiếp theo quan trọng là cài đặt và sử dụng Tailwind CSS trong dự án Vue của mình. Hứa hẹn rằng quá trình này sẽ rất dễ dàng và thú vị, hãy cùng nhau bắt đầu ngay nhé!

2. Tailwind CSS là gì?

Tailwind CSS là một framework CSS hiện đại, chú trọng vào các tiện ích và khả năng tùy biến dễ dàng. Điểm nổi bật của Tailwind CSS là nó cung cấp một bộ class CSS đã được xây dựng sẵn cho các thuộc tính như padding, màu sắc, con trỏ, và đường biên. Thay vì phải tạo ra các class phức tạp như các framework như Bootstrap hay Material Design, Tailwind CSS cho phép lập trình viên tự do kết hợp các tiện ích để tạo ra giao diện mà không bị ràng buộc. Điều này giúp cải thiện khả năng linh hoạt trong việc thiết kế và xây dựng ứng dụng web.

3. Hướng dẫn cài đặt Tailwind CSS

Giống như lần trước, chúng ta sẽ sử dụng npm để cài đặt Tailwind CSS và làm việc trong môi trường Visual Studio Code với thư mục hello-vite. Hãy bắt đầu nào!

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

Đầu tiên, mở terminal và chạy lệnh sau để cài đặt Tailwind CSS cùng với PostCSS và Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

Bước 2: Khởi tạo Tailwind CSS

Tiếp theo, khởi tạo Tailwind CSS với lệnh sau:

npx tailwindcss init -p

Sau lệnh này, bạn sẽ thấy hai file cấu hình được tạo tự động: tailwind.config.js và postcss.config.js.

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

Mở file tailwind.config.js và tiến hành cấu hình như sau:

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tiếp tục cấu hình trong file style.css của bạn như sau:

@tailwind base;
@tailwind components;
@tailwind utilities;

Bước 4: Nhập CSS vào dự án

Đừng quên nhập CSS vào trong file main.js:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

Bước 5: Thử nghiệm với Tailwind CSS

Giờ chúng ta sẽ thử nghiệm một chút trong file App.vue:

<script setup>
</script>

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

<style scoped>
</style>

Bước 6: Chạy ứng dụng

Cuối cùng, khởi động server dev để xem kết quả:

npm run dev

Nếu mọi thứ đều hoạt động tốt, bạn sẽ thấy kết quả đầu ra trong trình duyệt.

4. Kết luận

Vậy là chúng ta đã hoàn thành việc cài đặt và sử dụng Tailwind CSS trong một dự án Vue. Cảm ơn các bạn đã theo dõi bài viết! Nếu có bất kỳ câu hỏi hoặc ý kiến phản hồi nào, hãy để lại trong phần bình luận bên dưới. Chúc các bạn thành công trong việc triển khai Tailwind CSS vào dự án của mình!

Bài viết được tham khảo từ nguồn: https://tailwindcss.com/
source: viblo