Tự học Angular: Simple CRUD | Cài đặt Tailwind CSS - #3
Ở bài viết này, mình sẽ cài đặt Tailwind CSS cho dự án.
Bước 1: Vào cài đặt Tailwind CSS Tại đây
Chọn Framework Guides -> Angular.
Tạo dự án: Bước này đã làm ở bài viết trước, các bạn có thể xem lại
tại đây.
- Cài đặt Tailwind CSS:
Mở terminal tại thư mục bạn lưu dự án và nhập lệnh sau:
Lệnh: npm install -D tailwindcss postcss autoprefixer
Tailwind CSS sẽ được tải thông qua npm.
Tiếp tục nhập lệnh sau:
Lệnh: npx tailwindcss init
Lệnh này sẽ khởi tạo file tailwind.config.js dùng để config khi sử
dụng.
Sau khi chạy xong sẽ có file tailwind.config.js trong folder
dự án của mình:
Tiếp theo, bạn copy phần khoanh đỏ dưới hình và dán vào phần tương ứng
trong file tailwind.config.js trong dự án của bạn (hoặc bạn
có thể copy hết nội dung đó nếu trước đó bạn chưa config gì):
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
}
Tiếp theo, thêm tailwindcss vào file style.scss của dự án.
Lưu ý, ở bài trước mình khởi tạo dự án và sử dụng stylesheet là SCSS nên thay
vì làm theo như trong website này
thì ta sử thay đổi một xíu như sau:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Cuối cùng chạy dự án và kiểm tra.
Lệnh: ng serve
Video tham khảo:
Nếu bạn gặp vấn đề gì thì đừng ngần ngại comment phía bên dưới bài viết để mình cũng nhau thảo luận nhé.
Ngoài ra, bạn có thể xem bài viết về Angular CRUD hoàn chỉnh ở tại đây.
Chúc các bạn thành công! 😉