Tailwind CSS là một framework CSS tiện lợi được thiết kế để tăng tốc quá trình phát triển web. Nó nổi bật với việc cung cấp một số lượng lớn các tiện ích CSS có thể áp dụng trực tiếp lên các thành phần HTML. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách cài đặt Tailwind CSS trong dự án JavaScript của bạn. Chúng ta sẽ đi qua các bước từ việc thiết lập môi trường dự án, cài đặt Tailwind CSS, cấu hình và sử dụng nó trong dự án thực tế.
1. Tạo dự án JavaScript mới
Đầu tiên, chúng ta cần tạo một dự án JavaScript mới. Nếu bạn đã có một dự án JavaScript trước đó, bạn có thể bỏ qua bước này.
Bước 1: Tạo thư mục dự án
Bạn có thể tạo một thư mục dự án bằng cách sử dụng lệnh mkdir hoặc tạo thủ công trong hệ điều hành của mình.
mkdir tailwind-project
cd tailwind-project
Bước 2: Khởi tạo dự án với npm
Sử dụng npm để khởi tạo một dự án mới.
npm init -y
Lệnh này sẽ tạo ra một file package.json với các thông số mặc định.
2. Cài đặt Tailwind CSS
Để cài đặt Tailwind CSS, chúng ta sẽ sử dụng npm và cài đặt nó như một dependency trong dự án của mình.
npm install tailwindcss
Đồng thời, bạn cũng cài đặt postcss và autoprefixer, là hai công cụ hữu ích để xử lý CSS.
npm install postcss autoprefixer
3. Khởi tạo và cấu hình Tailwind CSS
Chúng ta cần khởi tạo file cấu hình cho Tailwind CSS. Lệnh dưới đây sẽ tạo ra một file tailwind.config.js.
npx tailwindcss init
Cấu hình Tailwind CSS
Mở file tailwind.config.js và cấu hình theo nhu cầu của bạn. File này sẽ trông như sau:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Bạn có thể thêm các cấu hình cho dự án của bạn vào file này.
4. Tạo CSS với Tailwind CSS
Sau khi đã cài đặt và cấu hình Tailwind CSS, chúng ta cần tạo một file CSS và import các tiện ích của Tailwind CSS vào. Tạo một file src/styles.css và thêm nội dung sau:
@tailwind base;
@tailwind components;
@tailwind utilities;
File này sẽ import toàn bộ các component và tiện ích của Tailwind CSS vào dự án của bạn.
5. Thiết lập PostCSS
Chúng ta cần thiết lập PostCSS để xử lý file CSS mà chúng ta vừa tạo. Tạo một file postcss.config.js và thêm nội dung sau:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
File cấu hình này sẽ cho PostCSS biết các plugin nào cần sử dụng, trong trường hợp này là tailwindcss và autoprefixer.
6. Build CSS
Tiếp theo, chúng ta cần build CSS để có thể sử dụng trong HTML. Bạn cần thêm scripts vào file package.json để chạy lệnh build CSS.
"scripts": {
"build:css": "postcss src/styles.css -o public/styles.css"
}
Chạy lệnh build CSS:
npm run build:css
Lệnh này sẽ build file CSS từ src/styles.css và output ra public/styles.css.
7. Sử dụng Tailwind CSS trong HTML
Cuối cùng, bạn có thể sử dụng Tailwind CSS trong file HTML của mình. Tạo một file public/index.html và thêm nội dung mẫu sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Tailwind CSS Project</title>
</head>
<body class="bg-gray-100">
<h1 class="text-3xl font-bold underline">
Hello Tailwind CSS!
</h1>
</body>
</html>
Đảm bảo rằng link CSS trỏ đúng tới file styles.css mà chúng ta đã build trước đó.
8. Cài đặt Tailwind CLI (Tuỳ chọn)
Nếu bạn muốn sử dụng Tailwind CSS với CLI mà không cần phải lo lắng về PostCSS và các công cụ khác, bạn có thể cài đặt Tailwind CLI.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Sau đó tạo một file CSS mới và thêm các dòng sau:
@tailwind base;
@tailwind components;
@tailwind utilities;
Chạy lệnh CLI sau để build file CSS:
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch
Lệnh này sẽ chạy Tailwind CLI để build CSS và tự động cập nhật khi có thay đổi.
Kết luận
Qua bài viết này, chúng ta đã đi qua các bước từ khởi tạo dự án JavaScript mới, cài đặt Tailwind CSS, cấu hình và build các file CSS cần thiết. Tailwind CSS là một công cụ mạnh mẽ và linh hoạt giúp tạo ra các ứng dụng web phong phú và tối ưu hiệu quả. Các bước trên cung cấp cơ bản về việc thiết lập Tailwind CSS trong dự án JavaScript của bạn. Hãy bắt đầu ngay và trải nghiệm sự tiện lợi mà Tailwind CSS mang lại cho công việc phát triển web của bạn.
Comments