Cách sử dụng Tailwind CSS để phát triển nhanh chóng các trang web nhanh

Khi thăng tiến với tư cách là nhà phát triển, bạn có nhiều khả năng sử dụng các công nghệ giúp bạn làm được nhiều việc hơn bằng cách viết ít mã hơn. Một khung công tác giao diện người dùng vững chắc như Tailwind CSS là một cách để thực hiện điều đó.

Trong bài viết này, chúng ta sẽ tìm hiểu về Tailwind CSS – một khung CSS hỗ trợ xây dựng và thiết kế các trang web. Chúng tôi sẽ bắt đầu bằng cách giải thích cách cài đặt và tích hợp Tailwind CSS trong dự án của bạn, xem một số ứng dụng thực tế cũng như cách bạn có thể tạo các kiểu và plugin tùy chỉnh của mình.

Bị kích thích? Hãy bắt đầu nào!

CSS Tailwind là gì?

Tailwind CSS là một khung công tác CSS (Cascading Style Sheets) ưu tiên tiện ích với các lớp được xác định trước mà bạn có thể sử dụng để xây dựng và thiết kế các trang web trực tiếp trong phần đánh dấu của mình. Nó cho phép bạn viết CSS trong HTML của mình dưới dạng các lớp được xác định trước.

Chúng tôi sẽ định nghĩa khung là gì và ý nghĩa của chúng tôi là “CSS ưu tiên cho tiện ích” để giúp bạn hiểu rõ hơn về Tailwind CSS.

Khung là gì?

Là một thuật ngữ lập trình chung, một khuôn khổ là một công cụ cung cấp các thành phần có thể sử dụng lại và làm sẵn được xây dựng từ các tính năng của một công cụ đã có sẵn. Mục đích chung của việc tạo khuôn khổ là tăng tốc độ phát triển bằng cách thực hiện ít công việc hơn.

Bây giờ chúng tôi đã thiết lập ý nghĩa của một khuôn khổ, nó sẽ giúp bạn hiểu rằng Tailwind CSS là một công cụ được xây dựng dựa trên các tính năng CSS. Tất cả các chức năng của khung công tác đều bắt nguồn từ các kiểu CSS được tạo thành dưới dạng các lớp.

Khung CSS Ưu tiên Tiện ích là gì?

Khi chúng tôi nói CSS ưu tiên tiện ích, chúng tôi đề cập đến các lớp trong đánh dấu (HTML) của chúng tôi với các chức năng được xác định trước. Điều này ngụ ý rằng bạn chỉ phải viết một lớp với các kiểu được xác định trước gắn liền với nó và những kiểu đó sẽ được áp dụng cho phần tử.

Trong trường hợp bạn đang làm việc với CSS vani (CSS không có bất kỳ khung hoặc thư viện nào), trước tiên bạn sẽ đặt tên lớp cho phần tử của mình và sau đó đính kèm các thuộc tính và giá trị khác nhau vào lớp đó, đến lượt nó, sẽ áp dụng kiểu cho phần tử của bạn .

Chúng tôi sẽ chỉ cho bạn một ví dụ. Ở đây, chúng ta sẽ tạo một nút với các góc tròn và dòng chữ “Nhấp vào tôi”. Đây là nút sẽ trông như thế nào:

Đầu tiên chúng ta sẽ thực hiện việc này bằng vanilla CSS, sau đó sử dụng các lớp tiện ích có sẵn trong Tailwind CSS.

Với CSS Vanilla

<button class="btn">Click me</button>

Chúng tôi đã cấp cho các thẻ nút là lớp btn , lớp này sẽ được tạo kiểu bằng cách sử dụng biểu định kiểu bên ngoài. Đó là:

.btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Với CSS Tailwind

<button class="bg-black p-2 rounded">Click me</button>

Đây là tất cả những gì cần thiết để đạt được hiệu ứng giống như ví dụ với CSS vani. Không có biểu định kiểu bên ngoài nào mà bạn phải viết các kiểu đã được tạo bởi vì mỗi tên lớp chúng tôi sử dụng đã có một kiểu được xác định trước.

Điều kiện tiên quyết để sử dụng CSS Tailwind

Trước khi sử dụng Tailwind CSS, có một số điều kiện tiên quyết mà bạn nên cân nhắc đáp ứng để sử dụng các tính năng của framework mà không gặp khó khăn. Dưới đây là một vài trong số họ:

• Kiến thức tốt về HTML, cấu trúc và cách thức hoạt động của HTML
• Nền tảng vững chắc trong CSS – truy vấn phương tiện, hộp linh hoạt và hệ thống lưới

Tailwind CSS có thể được sử dụng ở đâu?

Bạn có thể sử dụng Tailwind CSS trong các dự án web giao diện người dùng, bao gồm các khung JavaScript như React.js, Next.js, Laravel, Vite, Gatsby, v.v.

Ưu và nhược điểm của Tailwind CSS

Dưới đây là một số ưu điểm của việc sử dụng Tailwind CSS:

1. Quá trình phát triển nhanh hơn
2. Giúp bạn thực hành CSS của mình nhiều hơn vì các tiện ích tương tự nhau
3. Tất cả các tiện ích và thành phần đều có thể tùy chỉnh dễ dàng
4. Kích thước tệp tổng thể để sản xuất thường nhỏ
5. Dễ học nếu bạn đã biết CSS
6. Tài liệu tốt cho việc học

Một số nhược điểm của việc sử dụng Tailwind CSS bao gồm:

1. Đánh dấu của bạn có thể trông vô tổ chức đối với các dự án lớn vì tất cả các kiểu đều nằm trong tệp HTML.
2. Nó không dễ học nếu bạn không hiểu rõ về CSS.
3. Bạn buộc phải xây dựng mọi thứ từ đầu, bao gồm cả các yếu tố đầu vào của bạn. Khi bạn cài đặt Tailwind CSS, nó sẽ xóa tất cả các kiểu CSS mặc định.
4. Tailwind CSS không phải là lựa chọn tốt nhất nếu bạn đang muốn giảm thiểu thời gian dành cho việc phát triển giao diện người dùng của trang web và chủ yếu tập trung vào logic phụ trợ.

Khi nào sử dụng CSS Tailwind

Tailwind CSS được sử dụng tốt nhất để tăng tốc quá trình phát triển bằng cách viết ít mã hơn. Nó đi kèm với một hệ thống thiết kế giúp duy trì tính nhất quán trên các yêu cầu thiết kế khác nhau như đệm, khoảng cách, v.v.; với điều này, bạn không phải lo lắng về việc tạo ra các hệ thống thiết kế của mình.

Bạn cũng có thể sử dụng Tailwind CSS nếu bạn đang muốn sử dụng một khung công tác có thể dễ dàng định cấu hình vì nó không buộc bạn phải sử dụng các thành phần (thanh điều hướng, nút, biểu mẫu, v.v.) theo cùng một cách mọi lúc; bạn có thể chọn các thành phần của bạn trông như thế nào. Nhưng bạn không bao giờ nên sử dụng Tailwind nếu bạn chưa học và thực hành CSS.

Điểm giống và khác biệt giữa CSS Tailwind và các khung CSS khác

Dưới đây là một số điểm tương đồng:

1. Chúng giúp bạn hoàn thành công việc nhanh hơn.
2. Chúng đi kèm với các lớp được xác định trước.
3. Chúng được xây dựng dựa trên các quy tắc CSS.
4. Chúng đều dễ học và dễ sử dụng với kiến thức làm việc về CSS.

Bây giờ chúng ta hãy xem xét một số sự khác biệt:

1. Tailwind khác với hầu hết các framework vì bạn phải tạo các thành phần của mình. Ví dụ: Bootstrap có các thành phần như thanh điều hướng, nút, v.v., nhưng với Tailwind, bạn phải tự xây dựng tất cả.
2. Một số framework như Bootstrap không dễ dàng tùy chỉnh, vì vậy bạn buộc phải sử dụng các mẫu thiết kế của chúng. Trong Tailwind, bạn kiểm soát dòng chảy của mọi thứ.
3. Cần phải có kiến thức chuyên sâu về CSS để sử dụng Tailwind. Viết tên lớp là không đủ, vì bạn phải kết hợp chúng như thể bạn đang viết CSS vani để đạt được cùng một kết quả. Tất cả những gì bạn cần biết trong hầu hết các khung công tác khác là thành phần nào sẽ được xây dựng khi bạn sử dụng tên lớp.

Cách bắt đầu sử dụng CSS Tailwind

Trước khi cài đặt Tailwind CSS và tích hợp nó vào dự án của bạn, hãy đảm bảo rằng:

1. Bạn đã cài đặt Node.js trên máy tính của mình để sử dụng trình quản lý gói Node (npm) trong thiết bị đầu cuối.
2. Tất cả dự án của bạn đã được thiết lập với các tệp của bạn đã tạo.

Đây là cấu trúc dự án của chúng tôi hiện tại trông như thế nào:

-Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Tiếp theo, khởi động một thiết bị đầu cuối cho dự án của bạn và chạy các lệnh sau:

    npm install -D tailwindcss

Lệnh trên sẽ cài đặt khung CSS Tailwind dưới dạng phụ thuộc. Tiếp theo, tạo tệp tailwind.config.js của bạn bằng cách chạy lệnh bên dưới:

    npm install -D tailwindcss

Tệp tailwind.config.js sẽ trống khi được tạo, vì vậy chúng tôi phải thêm một số dòng mã:

module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Các đường dẫn tệp được cung cấp trong mảng nội dung sẽ cho phép Tailwind xóa / xóa mọi kiểu không sử dụng trong thời gian xây dựng.

Điều tiếp theo cần làm là thêm các lệnh “@tailwind” vào tệp CSS của bạn trong thư mục src – đây là nơi Tailwind tạo tất cả các kiểu tiện ích được xác định trước cho bạn:

@tailwind base; @tailwind components; @tailwind utilities;

Điều cuối cùng cần làm là bắt đầu quá trình xây dựng bằng cách chạy lệnh này trong thiết bị đầu cuối của bạn:

    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Trong đoạn mã trên, chúng tôi đang nói với Tailwind rằng tệp đầu vào của chúng tôi là biểu định kiểu trong thư mục src và bất kỳ kiểu nào chúng tôi đã sử dụng đều phải được tích hợp vào tệp đầu ra trong thư mục chung. – đồng hồ cho phép --watch xem tệp của bạn để biết các thay đổi trong quá trình xây dựng tự động; Bỏ qua nó có nghĩa là chúng ta phải chạy tập lệnh đó mỗi khi chúng ta muốn xây dựng mã của mình và xem kết quả đầu ra mong muốn.

Sử dụng CSS Tailwind

Bây giờ chúng tôi đã cài đặt và thiết lập Tailwind CSS cho dự án của mình, hãy xem một số ví dụ để hiểu đầy đủ về ứng dụng của nó.

Ví dụ về Flexbox

Để sử dụng flex trong Tailwind CSS, bạn cần thêm một lớp flex và sau đó là hướng của các mục flex:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Sử dụng flex-row-reverse sẽ đảo ngược thứ tự xuất hiện của các nút.

flex-col xếp chồng chúng lên trên nhau. Đây là một ví dụ:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Cũng giống như ví dụ trước, flex-col-reverse đảo ngược thứ tự.

Ví dụ về lưới

Khi chỉ định các cột và hàng trong hệ thống lưới, chúng tôi thực hiện một cách tiếp cận khác bằng cách chuyển vào một số sẽ xác định cách các phần tử sẽ chiếm không gian có sẵn:

<div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Màu sắc

Tailwind đi kèm với rất nhiều màu sắc được xác định trước. Mỗi màu có một loạt các biến thể khác nhau, với biến thể sáng nhất là 50 và tối nhất là 900.

Đây là hình ảnh của nhiều màu và mã hex HTML của chúng để minh họa điều này

Chúng tôi sẽ đưa ra một ví dụ về cách bạn có thể làm điều này bằng cách sử dụng màu đỏ ở trên để tạo màu nền cho phần tử nút:

<button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Cú pháp này giống nhau đối với tất cả các màu trong Tailwind ngoại trừ màu đen và trắng, được viết theo cùng một cách nhưng không sử dụng các số: bg-black và bg-white .

Để thêm màu văn bản, bạn sử dụng lớp text-{color} :

<p class="text-yellow-600">Hello World</p>

Đệm lót

Tailwind đã có một hệ thống thiết kế có thể giúp bạn duy trì quy mô nhất quán trong các thiết kế của mình. Tất cả những gì bạn phải biết là cú pháp để áp dụng từng tiện ích.

Sau đây là các tiện ích để thêm đệm vào các phần tử của bạn:

• p biểu thị phần đệm trên toàn bộ phần tử.
• py biểu thị padding padding-top và padding-bottom.
• px biểu thị padding-left và padding-right.
• pt biểu thị padding-top.
• pr biểu thị padding-right.
• pb biểu thị padding-bottom.
• pl biểu thị padding-left

Để áp dụng chúng cho các phần tử của mình, bạn phải sử dụng các số thích hợp do Tailwind cung cấp – hơi giống với các số thể hiện các biến thể màu trong phần trước. Đây là ý của chúng tôi:

<button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Lề

Các tiện ích được xác định trước cho padding và margin rất giống nhau. Bạn phải thay thế p bằng m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Cách tạo plugin Tailwind CSS

Mặc dù Tailwind CSS có rất nhiều tiện ích và hệ thống thiết kế đã được xây dựng cho bạn, nhưng vẫn có khả năng bạn có một chức năng cụ thể mà bạn muốn thêm để mở rộng những gì Tailwind có thể được sử dụng. Tailwind CSS cho phép chúng tôi làm điều này bằng cách tạo một plugin.

Hãy làm bẩn tay chúng ta bằng cách tạo một plugin bổ sung màu nước và một tiện ích xoay có thể xoay một phần tử 150º trên trục X. Chúng tôi sẽ tạo các tiện ích này trong tệp tailwind.config.js bằng cách sử dụng một chút JavaScript.

const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Bây giờ, chúng ta hãy chia nhỏ điều này. Điều đầu tiên chúng tôi làm là nhập chức năng plugin của Tailwind:

const plugin = require("tailwindcss/plugin");

Sau đó, chúng tôi tiếp tục tạo các plugin của mình trong mảng plugin:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Bạn có thể phải chạy lại tập lệnh xây dựng sau khi tạo plugin của mình.

Bây giờ các plugin đã sẵn sàng, chúng tôi có thể kiểm tra chúng:

<button class="bg-aqua rotate-150deg">Click me</button>

Nếu bạn đã làm đúng mọi thứ, bạn sẽ có một nút có màu nước với văn bản được xoay đến 150º trên trục X.

Bản tóm tắt

Khung là một lựa chọn vô giá khi nói đến việc tăng tốc quy trình làm việc của bạn. Chúng giúp bạn xây dựng các trang web đẹp và chuyên nghiệp trong khi vẫn duy trì tính nhất quán trong thiết kế. Tailwind CSS cung cấp nhiều lớp CSS chuyển tiếp tiện ích để giúp thiết kế và phát triển web của bạn lên một tầm cao mới.

Bài viết này đã cho chúng ta biết Tailwind CSS là gì và điều gì làm cho nó trở thành một khuôn khổ. Sau đó, chúng tôi xem xét quá trình cài đặt và xem một vài ví dụ cho thấy cách chúng tôi có thể tạo các plugin tùy chỉnh của mình để mở rộng chức năng hiện có.

Nếu bạn đã theo dõi đến thời điểm này, thì bây giờ bạn đã có hiểu biết cơ bản nhưng vững chắc về cách hoạt động của Tailwind. Tuy nhiên, để trở nên tốt hơn trong việc sử dụng khung công tác ưu tiên tiện ích như vậy, bạn phải tiếp tục luyện tập và nâng cao kiến thức về CSS nếu bạn chưa có nền tảng vững chắc.

Trước đây bạn đã sử dụng Tailwind CSS hoặc một khung CSS khác chưa? Hãy cùng chia sẻ suy nghĩ của bạn tại phần bình luận!