CSS Tailwind có khó không?

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. Khung 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ế 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ế và cả 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?

Xem Hướng dẫn bằng video của chúng tôi về cách sử dụng CSS Tailwind để xây dựng trang web

CSS Tailwind là gì?

CSS đuôi gió

Tailwind CSS là khung 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

Xem cách Kinsta chống lại đối thủ. So sánh

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

Khung là gì?

Là một thuật ngữ lập trình chung, khung là một công cụ cung cấp các thành phần có thể tái sử dụng 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 tổng thể của việc tạo các khung 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 ta đã xác định được ý nghĩa của khung, khung này 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 của CSS. Tất cả các chức năng của khung được bắt nguồn từ các kiểu CSS được tạo thành 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 phần đá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 được đính kèm với nó và các 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 vanilla CSS (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, sau đó đính kèm các thuộc tính và giá trị khác nhau cho lớp đó, từ đó sẽ áp dụng kiểu dáng cho phần tử của bạn

Chúng tôi sẽ cho bạn thấy một ví dụ. Ở đây, chúng tôi sẽ tạo một nút có các góc tròn và văn bản có nội dung “Nhấp vào tôi. ” Đây là giao diện của nút

nút của chúng tôi

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

Với CSS vani

Click me

Chúng tôi đã cung cấp cho các thẻ nút lớp

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

9, 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

Click me

Đây là tất cả những gì cần thiết để đạt được hiệu quả tương tự như ví dụ với vanilla CSS. Không có biểu định kiểu bên ngoài nơi bạn phải viết các kiểu đã được tạo 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 Tailwind CSS

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 khung 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 của nó và cách thức hoạt động của nó
• Nền tảng vững chắc trong CSS — truy vấn phương tiện, flexbox và hệ thống lưới

Có thể sử dụng CSS Tailwind ở đâ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, tiếp theo. js, Laravel, Vite, Gatsby, v.v.

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

Dưới đây là một số lợi ích 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 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ể cho sản xuất thường nhỏ
5. Dễ học nếu bạn đã biết CSS
6. Tài liệu hay để học

Một số nhược điểm khi sử dụng Tailwind CSS bao gồm

1. Đánh dấu của bạn có thể trông lộn xộn đố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. 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ợ

Thời điểm sử dụng Tailwind CSS

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 giữa các yêu cầu thiết kế khác nhau như phần đệm, khoảng cách, v.v.;

Bạn cũng có thể sử dụng Tailwind CSS nếu muốn sử dụng một khung có thể định cấu hình dễ dàng vì khung này không buộc bạn phải luôn 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; . Nhưng bạn đừng bao giờ sử dụng Tailwind nếu chưa học và thực hành CSS

Điểm tương đồng và khác biệt giữa Tailwind CSS và các CSS Framework khác

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

1. Họ 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. Cả hai đều dễ học và dễ sử dụng với kiến ​​thức làm việc về CSS

 

Bây giờ hãy xem xét một 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ả những thành phần đó
2. Một số framework như Bootstrap không dễ dàng tùy chỉnh nên 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 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 vanilla CSS để đạt được kết quả tương tự. 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 Tailwind CSS

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ó nút. js được cài đặt trên máy tính của bạn để sử dụng trình quản lý gói Node (npm) trong thiết bị đầu cuối
2. Dự án của bạn đã được thiết lập xong với các tệp của bạn đã tạo

Đây là những gì cấu trúc dự án của chúng tôi trông giống như tại thời điểm này

-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ần phụ thuộc. Tiếp theo, tạo ra tailwind của bạn. cấu hình. js bằng cách chạy lệnh bên dưới

    npm install -D tailwindcss

gió ngược. cấu hình. 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: [],
};

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

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Theo dõi ngay

Đ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

________số 8

Đ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 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.

Click me

0 cho phép Tailwind xem tệp của bạn để biết các thay đổi đối với quy trình xây dựng tự động;

Bạn muốn làm được nhiều việc hơn trong khi viết ít mã hơn? . Bắt đầu với Tailwind CSS 👨‍💻Nhấp để Tweet

Sử dụng CSS Tailwind

Bây giờ, chúng ta đã 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ụ hộp linh hoạt

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

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

1Ba nút màu tím của chúng ta.

Sử dụng

Click me

1 sẽ đảo ngược thứ tự xuất hiện của các nút

Click me

2 xếp chồng lên nhau. Đây là một ví dụ

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

0Ba nút màu tím của chúng tôi.

Giống như ví dụ trước,

Click me

3 đảo ngược thứ tự

Ví dụ 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

Đấu tranh với thời gian chết và các vấn đề về WordPress? . Kiểm tra các tính năng của chúng tôi

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

1Sáu nút màu tím của chúng ta.

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 tập hợp 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ó nhiều màu và mã hex HTML của chúng để minh họa điều này

Tùy chỉnh màu sắc từ bảng màu mặc định của Tailwind. (Nguồn ảnh)

Chúng tôi sẽ đưa ra một ví dụ về cách bạn có thể thực hiện việc 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

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

2

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 số.

Click me

4 và

Click me

5

Để thêm màu văn bản, bạn sử dụng lớp

Click me

6

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

3

đệm

Tailwind đã có một hệ thống thiết kế giúp bạn duy trì tỷ lệ nhất quán trên 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 phần đệm vào các phần tử của bạn

• Click me

  7 biểu thị phần đệm trên toàn bộ phần tử

• Click me

  8 biểu thị padding-top và padding-bottom

• Click me

  9 biểu thị padding-left và padding-right

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

  0 biểu thị phần đệm trên cùng

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

  1 biểu thị phần đệm bên phải

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

  2 biểu thị phần đệm dưới cùng

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

  3 biểu thị phần đệm bên trái

Để áp dụng chúng cho các thành phần 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ố đại diện cho các biến thể màu trong phần trước. Đây là những gì chúng tôi muốn nói

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

4

Lề

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

Click me

7 bằng một

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

5

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

  5

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

  7

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

  8

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

  9

•     npm install -D tailwindcss

  0

•     npm install -D tailwindcss

  1

•     npm install -D tailwindcss

  2

Cách tạo plugin Tailwind CSS

Mặc dù Tailwind CSS có vô số tiện ích và hệ thống thiết kế đã được tạo sẵn cho bạn, nhưng vẫn có thể 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 cho. Tailwind CSS cho phép chúng tôi làm điều này bằng cách tạo 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à tiện ích xoay để xoay một phần tử 150º trên trục X. Chúng tôi sẽ tạo ra những tiện ích này theo chiều hướng thuận lợi. cấu hình. js bằng một chút JavaScript

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

5

Bây giờ, hãy phá vỡ đ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

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

6

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

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

7

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 ta có thể kiểm tra chúng

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

8

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 150º trên trục X

Vũ khí bí mật của bạn để xây dựng và thiết kế các trang web? Click to Tweet

Bản tóm tắt

Các khung là một tùy chọn vô giá khi 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 mắt và chuyên nghiệp đồng thời 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 đưa 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 tôi 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à thấy 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 để 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ì giờ đây bạn đã có hiểu biết cơ bản nhưng chắc chắn về cách thức hoạt động của Tailwind. Tuy nhiên, để sử dụng tốt hơn khung công tác ưu tiên tiện ích như vậy, bạn phải tiếp tục thực hành 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 hay một khung CSS khác chưa?

---

Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với

• Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7
• Tích hợp doanh nghiệp Cloudflare
• Tiếp cận đối tượng toàn cầu với 35 trung tâm dữ liệu trên toàn thế giới
• Tối ưu hóa với Giám sát hiệu suất ứng dụng tích hợp của chúng tôi

Tất cả những điều đó và hơn thế nữa, trong một gói không có hợp đồng dài hạn, hỗ trợ di chuyển và bảo đảm hoàn tiền trong 30 ngày. Kiểm tra các gói của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm gói phù hợp với bạn

Tailwind có tốt cho người mới bắt đầu không?

Hướng dẫn về CSS của Tailwind cũng như các ví dụ về CSS của Tailwind là những thứ có thể rất hữu ích cho những người mới bắt đầu muốn nắm vững kiến ​​thức cơ bản về khung CSS ưu tiên tiện ích này. But not only for them.

Tailwind có dễ hơn CSS không?

Dễ dàng thực hiện các thay đổi hơn với Tailwind CSS vì bạn chỉ phải xóa một số lớp CSS.

Cái nào dễ Tailwind hay Bootstrap?

Nếu bạn không phải là nhà thiết kế và chỉ muốn tập hợp một giao diện người dùng nhanh chóng và dễ dàng để mọi người sử dụng, thì Bootstrap có thể là lựa chọn phù hợp. Tuy nhiên, nếu bạn muốn hoàn toàn tự do với thiết kế của mình và khả năng dễ dàng tạo các thiết kế cũng như thành phần tùy chỉnh thì Tailwind CSS là lựa chọn tốt hơn .