Bài viết này giúp bạn cài đặt Tailwind Css vào dự án của mình một cách dễ dàng và dễ thực hiện. Đây là một Framework Css giúp bạn tạo giao diện với css có tùy biến độ cao và hiệu suất cao Show Nội dung chính Hiển thị Tính năng nổi bật của Tailwind
Xem thêm. Tailwind là gì? Video hướng dẫn cài đặt Tailwind CssĐể giúp bạn hiểu rõ tư duy cũng như các thao tác rõ ràng nên tôi đã làm video bên dưới. Bạn xem và thực hành để hiểu và sử dụng tailwind css trong quá trình xây dựng giao diện website của mình Chuẩn bịBạn chuẩn bị những thứ bên dưới để phục vụ cho quá trình cài đặt và sử dụng tailwind css trong dự án
Các bước cài đặt tailwind Css vào websiteĐể cài đặt Tailwind Css vào trang web, bạn thực hiện từng bước theo video và phần ghi chú các câu lệnh đã sử dụng ở bên dưới 1. Cài đặt Tailwind CSS 2. Định cấu hình đường dẫn mẫu của bạn 3. Thêm lệnh Tailwind vào CSS của bạn Tập tin. src/tailwind. css _______3____4____54. Bắt đầu quá trình xây dựng Tailwind CLI 5. Bắt đầu sử dụng Tailwind trong HTML của bạn Kết luận Trong nội dung bài viết bao gồm video hướng dẫn này, tôi tin rằng bạn sẽ hiểu và cài đặt Tailwind Css vào trong dự án của mình Tuy nhiên để sử dụng Tailwind Css hiệu quả đầu tiên bạn phải nắm giữ nền tảng Css cơ bản trong trang web, bạn có thể tham khảo Html Css 21 Ngày hoàn thiện kỹ năng Css của mình trước khi đến với Framework Css như Bootstrap, Tailwind Css 1. Open startĐổi với những bạn đang làm việc bên front-end hoặc thậm chí cả back-end thì cái tên 2. TailwindCSSa. Tiện ích đầu tiênIf you used once Về cách sử dụng thì giống như cách chúng ta thêm trạng thái bổ sung vào các phần tử hoặc sử dụng các bộ chọn như ở mục trước. Để hiểu rõ hơn thì các bạn có thể nhìn ví dụ như sau Ban đầu giao diện của chúng ta sẽ có dạng như sau trên màn hình di động Sua that mình has more a new class is Ở màn hình có chiều rộng tối đa là 768px mình đã làm cho thẻ e. tùy chỉnh cơ bảnNgoài việc cung cấp sẵn cho chúng ta các lớp trợ giúp để sử dụng, Tailwind còn cho phép chúng ta chỉnh sửa hoặc bổ sung các lớp mới để phù hợp với Style Guide của chúng ta. Giả sử mình không muốn sử dụng các mã màu có sẵn của Tailwind như Sau đó trong mã của mình có thể sử dụng luôn tất cả các lớp có thể gắn màu như văn bản, nền,. as after Và đây là kết quả chúng ta thu được Tuy nhiên, nếu ta viết màu trực tiếp như nói trên và thực tế ta sẽ phải tái sử dụng mã màu của nó ở rất nhiều chỗ trong dự án của chúng ta thì việc viết trực tiếp như trên sẽ không hay lắm. Thay vào đó, trong file css chúng ta có thể viết như sau Và ta sẽ thu được kết quả như mong muốn ban đầu. Ở đây Tailwind cung cấp cho chúng ta thêm một chức năng đặc biệt là g. xây dựng sản xuấtCuối cùng, khi chúng ta đã hoàn thiện phần mã UI của chúng ta và muốn xây dựng thành bản sản xuất thì Tailwind vẫn hỗ trợ chúng ta tối ưu hóa phần css chúng ta đã sử dụng trong dự án. Giả sử ta không thêm gì trong cấu hình tệp và chạy lệnh Thì ta sẽ thu được một thư mục Và đăng nhập vào phần chạy lệnh, ta sẽ thấy kích thước tệp của chúng ta khá lớn, hơn 3Mb Điều này không tốt chút nào vì nó sẽ làm cho web của bạn tải chậm hơn do cần tải xuống một tệp css lớn và đồng thời trên thực tế ta hầu như ít khi sử dụng hết toàn bộ lớp mà Tailwind cung cấp mà chỉ một phần mà thôi. Để làm điều này thì Tailwind cung cấp cho chúng ta phương pháp cấu hình đơn giản để loại bỏ những lớp mà chúng ta không sử dụng đến như sau At in item FIle of they ta at this only but have 3. Kết bàiBài viết của mình đến đây là kết thúc, mong rằng nó sẽ giúp ích cho các bạn phần nào nếu bạn quyết tâm thử sức với Tailwind. Nếu các bạn có bất cứ thắc mắc gì hãy comment ngay phía dưới cho mình biết và cũng đừng quên để lại 1 upvote để ủng hộ mình nhé |
