Angular CRUD Example with Local Storage - Cài đặt Tailwind CSS - #3

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.


Bước 2: Làm theo các hướng dẫn tại trang này:

  • 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! 😉

No comments:

Powered by Blogger.