Laravel là framework web PHP phổ biến nhất dựa trên mô hình model-view-controller (MVC) giúp bạn xây dựng các ứng dụng web và API hiện đại Show
Sử dụng khung ưu tiên tiện ích CSS Tailwind được đề xuất chính thức và các thành phần giao diện người dùng từ Flowbite để nâng cao quy trình phát triển giao diện người dùng của bạn Cài đặt Tailwind CSS với Laravel #Đảm bảo rằng bạn có Trình soạn thảo và Nút. js được cài đặt cục bộ trên máy tính của bạn Làm theo các bước tiếp theo để cài đặt Tailwind CSS và Flowbite với Laravel Mix
Đảm bảo đặt thư mục bin của nhà cung cấp trong PATH của bạn. Đây là cách bạn có thể làm điều đó dựa trên từng hệ điều hành
Bây giờ bạn có thể truy cập ứng dụng Laravel trên Lệnh này sẽ khởi tạo một dự án Laravel trống mà bạn có thể bắt đầu với
Một tệp
________số 8 Điều này sẽ cho trình biên dịch từ Tailwind biết những tệp cần tìm để áp dụng đúng các lớp bên trong tệp CSS cuối cùng và nó cũng sẽ cài đặt các tùy chọn plugin bổ sung từ Flowbite
Ngoài ra, bạn cũng có thể bao gồm tệp JavaScript bằng CDN Bây giờ bạn đã thiết lập xong mọi thứ, hãy khởi động một máy chủ phát triển cục bộ bằng cách sử dụng Thành phần Flowbite #Bây giờ bạn đã cài đặt thành công dự án, bạn có thể bắt đầu sử dụng các thành phần giao diện người dùng từ Flowbite và Tailwind CSS để phát triển các trang web và ứng dụng web hiện đại Chúng tôi khuyên bạn nên khám phá các thành phần bằng cách sử dụng điều hướng trên thanh tìm kiếm (_______51 hoặc Tailwind CSS là khung CSS hạng nhất tiện ích không giống như các khung CSS khác như material UI và Bootstrap Nó cung cấp rất nhiều ưu điểm mà bạn có thể kiểm tra trong bài viết của chúng tôi Tại sao CSS Tailwind lại tốt như vậy Trong hướng dẫn CSS Tailwind này, chúng ta sẽ xem cách cài đặt Tailwind CSS với Laravel Điều này đặc biệt tuyệt vời vì sử dụng tailwind với Laravel mang đến cho các nhà phát triển Php rất nhiều lợi thế mà các framework khác không làm được Cài đặt Tailwind CSS với Laravel lúc đầu có thể khó khăn vì nó yêu cầu nhà phát triển tạo tệp cấu hình của họ, cùng với hỗn hợp Laravel Tuy nhiên, hướng dẫn này sẽ hướng dẫn bạn cách thực hiện việc này một cách hiệu quả và dễ dàng Mục lục
Cài đặt Tailwind CSSTạo dự ánTrước tiên, chúng ta phải tạo dự án của mình trước khi có thể bắt đầu sử dụng CSS tailwind trong ấu trùng. Bạn có thể tạo cái này bằng cách chạy lệnh sau trên trình cài đặt Laravel Mã số r Sao chépTrong đoạn mã trên, chúng tôi đã tạo dự án mới của mình bằng lệnh Mã số r Sao chéplệnh này sẽ cài đặt tất cả các gói bạn cần cho ứng dụng ấu trùng. Sau đó, chúng ta có thể tiếp tục cài đặt Tailwind CSS trong ứng dụng ấu trùng Cài đặt Tailwind CSSĐây là một số cách bạn có thể cài đặt Tailwind CSS trong Laravel. Những cách này bao gồm sử dụng npm Bạn có thể cài đặt Tailwind CSS ở dạng ấu trùng bằng phương pháp này bằng cách chạy lệnh sau trên thiết bị đầu cuối của mình Mã số r Sao chéplệnh này đảm bảo rằng tailwind CSS đã được cài đặt trong dự án của chúng ta sử dụng sợi Bạn có thể sử dụng yarn, một trình quản lý gói tốt để cài đặt tailwind của mình bằng cách chạy lệnh sau Mã số r Sao chépCài đặt Tailwind CSS trong Laravel bằng CDNPhương pháp này không phải là tùy chọn tốt nhất để cài đặt tailwind CSS của bạn trong ứng dụng Laravel. Nó không kích hoạt tất cả các tính năng mà tailwind CSS cung cấp. Bạn có thể sử dụng phương pháp này bằng cách sao chép CDN từ trang web tailwind html Sao chépMặc dù, trong dự án này, tôi sẽ sử dụng npm để cài đặt Tailwind CSS với larval. Tôi sẽ đi đến thư mục gốc của ứng dụng của chúng tôi và chạy lệnh sau trong thiết bị đầu cuối Mã số r Sao chépTạo tập tin cấu hình của bạnchúng ta phải tạo tệp cấu hình vì được Laravel mix sử dụng khi xây dựng CSS từ thư mục tài nguyên sang ứng dụng của thư mục chung. css. chúng ta có thể tạo tệp cấu hình bằng cách chạy lệnh sau Mã số r Sao chépLệnh trên sẽ tạo một tệp trên root ứng dụng ấu trùng của bạn, tệp sẽ được đặt tên là tailwind. cấu hình. js. mở nó trên trình soạn thảo văn bản của bạn hoặc IDE. Mã dưới đây sẽ được nhìn thấy trên đó Mã số js Sao chépĐoạn mã trên là cài đặt mặc định và bạn có thể tự do thay đổi nó. Bạn có thể tìm hiểu thêm về tệp cấu hình trên tài liệu tailwind Định cấu hình CSS Tailwind thành Laravel MixTại thư mục gốc của ứng dụng của bạn. Trong Laravel's Mix in the Mã số js Sao chépBao gồm tailwind trong CSS của bạnBạn sẽ cần nhập tailwind từ ứng dụng. css bằng đường dẫn Mã số js Sao chépNhững thay đổi mới sẽ cho phép tailwind hoán đổi các lệnh này trong thời gian xây dựng cùng với tất cả các kiểu mà nó tạo ra dựa trên hệ thống thiết kế cấu hình. Bây giờ hãy nhập biểu định kiểu của bạn vào bố cục Blade chính của bạn và thêm thẻ meta quan điểm phản hồi thích hợp nếu bạn chưa làm điều đó html Sao chépBạn có thể tiếp tục xây dựng ứng dụng mình muốn bằng Tailwind CSS với Laravel. Khi bạn chạy 'npm run watch', 'npm run dev' hoặc 'npm run prod', Tailwind CSS sẽ có sẵn trong Laravel Mix Project của bạn Tạo biểu mẫu bằng Tailwind CSS với LaravelNhư chúng ta đã thấy cách cài đặt Tailwind CSS trong dự án Laravel. Chúng ta sẽ tạo một biểu mẫu đơn giản để chứng minh rằng CSS Tailwind của chúng ta đang hoạt động. Mở thư mục tài nguyên và nhấp vào chào mừng. lưỡi. tập tin php. Bên trong tệp xóa phần thân của mã. Bây giờ bạn có thể tiếp tục và thêm đoạn mã sau vào phần thân của trang Mã số html Sao chépDưới đây là giao diện trang web của chúng tôi khi chúng tôi đã lưu tệp của bạn. Và tải lại máy chủ của chúng tôi  Phần kết luậnTrong CSS tailwind của chúng ta ngày hôm nay, chúng ta sẽ xem xét cách cài đặt Tailwind CSS trong dự án Laravel và cũng tiếp tục kiểm tra xem Tailwind CSS của chúng ta có hoạt động trên Laravel hay không bằng cách tạo một biểu mẫu đăng nhập. Tôi hy vọng bạn thích hướng dẫn này Xây dựng các dự án hiện đại bằng Bootstrap 5 và ContrastCố gắng tạo các thành phần và trang cho ứng dụng web hoặc trang web từ đầu trong khi duy trì giao diện Người dùng hiện đại có thể rất tẻ nhạt. Đây là lý do tại sao chúng tôi tạo ra Độ tương phản, để giúp giảm đáng kể lượng thời gian chúng tôi dành cho việc đó. để chúng ta có thể tập trung xây dựng một số khía cạnh khác của dự án. bài viết liên quan Cách tạo Tailwind CSS ModalXem thêm Cách thêm màu sắc và phông chữ CSS tailwind vào dự án của bạnXem thêm Xây dựng và tạo mã trực quan cho giao diện người dùng của bạnSử dụng Windframe để xây dựng trang web một cách trực quan trong vài phút bằng cách sử dụng tailwind css Tạo mã HTML, Angular, React, Vue cho trang web của bạn một cách nhanh chóng và tốn ít thời gian hơn cho việc định tâm các div 🙂 Tôi có thể sử dụng tailwind trong laravel không?Laravel Mix
. you can easily integrate bootstrap and tailwind in your application and use their classes to style your applications.
Làm cách nào để cài đặt Tailwind CSS trong Laravel 9?Cách cài đặt Tailwind CSS 3 trong Laravel 9 với Vite 3 . Bước 1. Cài đặt dự án Laravel. . Bước 2. Thiết lập CSS Tailwind. . Bước 3. Thêm CSS Tailwind vào ứng dụng. css. . Bước 4. Nhập tài sản Vite vào Laravel Blade. . Bước 5. Chạy máy chủ phát triển Vite. . Bước 6. Chạy máy chủ phát triển Laravel Làm cách nào để sử dụng Tailwind CSS với php?Cài đặt CSS Tailwind . Mở Terminal nhúng ( Alt+F12 ) và gõ. npm cài đặt tailwindcss postcss autoprefixer Để định cấu hình cài đặt Tailwind CSS, hãy tạo một tailwind. cấu hình. js trong thư mục gốc của dự án của bạn. Trong Terminal nhúng ( Alt+F12 ), gõ. npx tailwindcss init Tailwind config js ở đâu trong laravel?Một luồng gió mới. cấu hình. js sẽ được tạo bên trong thư mục gốc của bạn . |
