Tailwind CSS về cơ bản là khung CSS đầu tiên của Tiện ích để xây dựng giao diện người dùng tùy chỉnh nhanh chóng. Nó là một khung CSS cấp thấp, có thể tùy chỉnh cao, cung cấp cho bạn tất cả các khối xây dựng mà bạn cần. Ngoài ra, đó là một cách hay để viết kiểu dáng nội tuyến và đạt được giao diện tuyệt vời mà không cần viết một dòng CSS nào của riêng bạn

Nội dung chính Show

• Mục lục
• Chơi theo chiều gió
• Plugin PostCSS
• Phần kết luận
• CSS Tailwind có khó học không?
• Có đáng để học Tailwind CSS không?
• Cách tốt nhất để tìm hiểu Tailwind CSS là gì?
• Tailwind có dễ hơn Bootstrap không?

 

Tại sao lại chọn Tailwind CSS?

Như chúng ta biết có rất nhiều framework CSS nhưng mọi người luôn chọn framework nhanh và dễ để học và sử dụng trong dự án. Tailwind đã tích hợp sẵn rất nhiều tính năng và kiểu dáng để người dùng lựa chọn, đồng thời cũng được sử dụng để giảm xu hướng viết mã CSS và tạo giao diện người dùng tùy chỉnh đẹp mắt. Nó sẽ giúp bạn vượt qua nhiệm vụ phức tạp. Tailwind CSS tạo các tiện ích nhỏ với một tập hợp các tùy chọn được xác định cho phép tích hợp dễ dàng các lớp hiện có trực tiếp vào mã HTML

 

Liên kết CDN CSS Tailwind

Ghi chú. Có một số hạn chế khi sử dụng CDN. một số trong số họ là

• Không thể sử dụng chủ đề mặc định của Customize Tailwind
• Không thể sử dụng các lệnh như @apply, @variants, v.v.
• Không thể cài đặt plugin của bên thứ ba

Cài đặt Tailwind CSS

Qua npm

• Về cơ bản, Tailwind có sẵn trên npm và bạn có thể cài đặt nó bằng lệnh sau

  npm install tailwindcss

• Sau đó, tạo tệp cấu hình Tailwind quảng cáo bằng lệnh sau

  npm tailwind init {name of file}

Thông qua sợi

• Bạn có thể cài đặt tailwind bằng cách sử dụng lệnh yarn

  yarn add tailwindcss

• Sau đó, tạo tệp cấu hình Tailwind quảng cáo bằng lệnh sau

  yarn tailwind init {name of file}

Thí dụ. Đây là một ví dụ cơ bản về Tailwind CSS mô tả cách thay đổi màu nền khi di chuột

Căn phòng rộng rãi và đầy nắng này dành cho những người đi du lịch nhẹ nhàng và đang tìm kiếm một nơi thoải mái và ấm cúng để ngả đầu trong một hoặc hai đêm. Ngôi nhà bên bờ biển này nằm trong một khu phố sôi động với nhiều quán cà phê, quán rượu, nhà hàng và siêu thị và gần tất cả các điểm tham quan chính như Lâu đài Edinburgh và Arthur's Seat.

Đây là hướng dẫn sử dụng Tailwind CSS thân thiện với người mới bắt đầu, một khung CSS tương đối mới nhưng vô cùng phổ biến và có khả năng thay đổi cuộc chơi. Tailwind áp dụng phương pháp ưu tiên tiện ích giúp dễ dàng tùy chỉnh và thậm chí còn dễ bảo trì hơn khi CSS của dự án tăng về quy mô

Bản thân CSS rất khó quản lý trong các dự án lớn và điều này càng trở nên trầm trọng hơn bởi các khung CSS truyền thống, như Bootstrap, Foundation và các khung khác đi kèm với một thư viện dài gồm các thành phần được xác định trước cho các mục phổ biến như nút, thanh điều hướng, chân trang, v.v. Tóm lại, CSS nhanh chóng trở thành một mớ hỗn độn. khó viết, khó suy luận và thậm chí còn khó cập nhật hơn

Tailwind giải quyết nhiều thách thức này bằng cách áp dụng phương pháp cấp thấp hơn. cung cấp các lớp trợ giúp CSS có thể được sử dụng để tạo và tùy chỉnh bất kỳ thiết kế nào. Tuy nhiên, tốt nhất bạn nên xem điều này trong thực tế bằng cách tự mình thử nghiệm Tailwind

Thật không may, việc cài đặt Tailwind CSS có thể khá khó khăn vì hướng dẫn chính thức đã nêu rõ. Mặc dù bạn có thể cần tất cả chuông và còi cho một dự án chính thức, nhưng hầu hết Tailwind có thể được sử dụng thông qua CDN và một tệp HTML. Hướng dẫn này bắt đầu chỉ ra cách sử dụng phương pháp CDN, sau đó chuyển sang tùy chọn Node đầy đủ và mọi thứ khác sau đó

Mục lục

Chơi theo chiều gió

Cách đơn giản nhất để dùng thử Tailwind là sử dụng chế độ trình duyệt web tương tác trên Tailwind Play. Điều này cho phép cập nhật trang HTML hiện có và trực quan hóa các thay đổi. Đây là bước đầu tiên tuyệt vời cùng với tài liệu Tailwind để thử các tính năng khác nhau và cách tiếp cận chung của Tailwind

CDN

Cách tiếp cận dễ dàng thứ hai–và là cách tôi khuyên bạn nên bắt đầu—là sử dụng Tailwind CDN trong một tệp HTML duy nhất. Bằng cách đó, bạn có toàn quyền kiểm soát và có thể bắt chước trải nghiệm phát triển trong thế giới thực

Để bắt đầu, hãy tạo một thư mục mới có tên là

$ open index.html

4 và điều hướng vào đó. Sau đó, tạo một tệp có tên

$ open index.html

5

$ mkdir tailwind-cdn
$ touch index.html

Hãy bắt đầu với một mẫu HTML5 cơ bản sẽ chỉ có một div, một tiêu đề và một số đoạn văn bản

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Từ dòng lệnh của bạn, vì bạn đang ở trong thư mục

$ open index.html

$ open index.html

Để thêm CDN Tailwind, tất cả những gì chúng ta phải làm là cập nhật phần

$ open index.html

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

Đây là giao diện của tệp

$ open index.html

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Nếu bạn lưu các thay đổi của tệp và làm mới trình duyệt web của mình, bạn sẽ thấy rằng tất cả các định dạng đã bị xóa

Văn bản của chúng tôi khá chật chội trên trang web hiện tại, phải không?

Để thêm phần đệm bên vào lớp

$ open index.html

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

•  href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  

  2 là viết tắt của ký quỹ

•  href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  

  3 có nghĩa là áp dụng cho trục x

•  href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  

  4 đại diện cho chiều dài đơn vị tương đối là rem cho Tailwind

Logic tương tự áp dụng cho việc thêm phần đệm dọc vào văn bản trong các thẻ

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

Làm mới trang web của bạn một lần nữa và bạn sẽ thấy cả lề ngang và dọc hiện đã được thêm vào

Hãy tiếp tục bằng cách sử dụng Tailwind CSS để cập nhật phông chữ cho văn bản

 href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Đây là mã hoàn chỉnh

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

Làm mới trang web của bạn một lần nữa và bạn sẽ thấy những thay đổi trong hành động

Một ví dụ khác để minh họa cách hoạt động của CSS Tailwind là xung quanh các nút tạo kiểu. Trong trường hợp của chúng tôi, hãy thêm một “Đăng ký tại đây. ” nút màu xanh lam chuyển sang màu xanh đậm hơn khi kết thúc. Mã trông như thế này

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

Theo thứ tự Tailwind đang làm như sau

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container">
      
  Hello, Tailwind!
      
  Let's learn how to use this new CSS framework.
    
  
  
  

  3 đặt văn bản phông chữ thành màu trắng

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container">
      
  Hello, Tailwind!
      
  Let's learn how to use this new CSS framework.
    
  
  
  

  1 đặt phông chữ thành đậm

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container">
      
  Hello, Tailwind!
      
  Let's learn how to use this new CSS framework.
    
  
  
  

  5 đặt màu nền thành màu xanh với bóng 600

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container">
      
  Hello, Tailwind!
      
  Let's learn how to use this new CSS framework.
    
  
  
  

  6 đặt màu nền di chuột thành xanh đậm hơn (800)

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container">
      
  Hello, Tailwind!
      
  Let's learn how to use this new CSS framework.
    
  
  
  

  7 đặt phần đệm dọc (_______13_______8) thành

  
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container">
      
  Hello, Tailwind!
      
  Let's learn how to use this new CSS framework.
    
  
  
  

  9 rems

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container mx-5">
      
  Hello, Tailwind!
       class="my-5">Let's learn how to use this new CSS framework.
  
    
  
  
  

  0 đặt phần đệm ngang

  
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container mx-5">
      
  Hello, Tailwind!
       class="my-5">Let's learn how to use this new CSS framework.
  
    
  
  
  

  1) thành

  
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container mx-5">
      
  Hello, Tailwind!
       class="my-5">Let's learn how to use this new CSS framework.
  
    
  
  
  

  2 rems

• 
  
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  
  
     class="container mx-5">
      
  Hello, Tailwind!
       class="my-5">Let's learn how to use this new CSS framework.
  
    
  
  
  

  3 làm tròn các cạnh của nút

Lưu các thay đổi của bạn và làm mới trang web để xem các thay đổi đang hoạt động

Và Voila. Phần giới thiệu nhanh như chớp về Tailwind và cách tiếp cận mới để viết CSS

Tùy chọn CDN là một cách tuyệt vời để bắt đầu nhưng nó có một số hạn chế. Phương pháp được đề xuất là sử dụng Tailwind làm plugin PostCSS để tận dụng tất cả các tính năng của nó. Chúng tôi sẽ đề cập đến điều đó trong phần tiếp theo

Plugin PostCSS

Tailwind CSS về cơ bản là một plugin PostCSS, vì vậy, để tận dụng tối đa Tailwind về các tính năng và hiệu suất, nó nên được chạy như vậy. Làm như vậy yêu cầu thiết lập nhiều hơn một chút so với sử dụng CDN nhưng rất khả thi. Người sáng tạo Tailwind Adam Wathan đã phát hành một chuỗi YouTube vào năm 2019 về thiết lập này. Những ghi chú này có một vài cập nhật nhưng phần lớn bắt chước cách trình bày của anh ấy

Ghi chú. Bạn sẽ cần cài đặt npm nếu bạn chưa cài đặt trên máy tính cục bộ của mình

Để bắt đầu, hãy tạo một thư mục mới trên máy tính của bạn và nhập vào đó. Tôi đã quyết định gọi điện cho tôi là

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

$ mkdir tailwind-fun
$ cd tailwind-fun

Bước đầu tiên là tạo một tệp

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

$ npm init -y

tập tin kết quả của tôi trông như sau

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Tiếp theo, cài đặt

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Xem bên trong tệp

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Để tùy chỉnh Tailwind sau này, chúng tôi sẽ cần một tệp

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Đây là tập tin kết quả

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Tiếp theo, tạo tệp

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Tailwind hoạt động bằng cách xem qua một tệp CSS để tìm điểm đánh dấu tùy chỉnh và thay thế chúng bằng mã do Tailwind tạo ra. Tạo một tệp CSS mới có tên là

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Sau đó, trong tệp, thêm ba chỉ thị cho

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Bước cuối cùng trước khi xây dựng Tailwind là chúng ta cần một tập lệnh đơn giản để xử lý CSS thông qua plugin PostCSS. Trong tệp

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Bây giờ xây dựng nó. Trên dòng lệnh chạy

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

Tệp CSS mới được tạo được xử lý thông qua PostCSS hiện có sẵn ở vị trí đầu ra của chúng tôi. Mở tệp có tại

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

Đây là một tệp dài, dài được điền bởi ba chỉ thị–

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

  

Để xem những gì

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

$ mkdir tailwind-fun
$ cd tailwind-fun

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

     class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
      Button!
    
  

Nếu bạn cuộn xuống dòng 549, chúng ta sẽ thấy một lớp

$ mkdir tailwind-fun
$ cd tailwind-fun

$ mkdir tailwind-fun
$ cd tailwind-fun

$ mkdir tailwind-fun
$ cd tailwind-fun

$ npm init -y

$ npm init -y

$ npm init -y

$ npm init -y

$ npm init -y

$ npm init -y

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
    
Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

Với hệ thống này, hãy tạo một tệp HTML đơn giản và cuối cùng là sử dụng Tailwind đúng cách. Tạo một tệp HTML đơn giản có tên là

$ open index.html

$ npm init -y

$ open index.html

Sau đó điền vào một mẫu HTML cơ bản tương tự như những gì chúng tôi đã có trong phần CDN. Thay đổi duy nhất là chúng tôi đang nhập

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />
   href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


   class="container mx-5">
     class="text-2xl font-bold">Hello, Tailwind!
     class="my-5">Let's learn how to use this new CSS framework.

 class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
Button!

$ open index.html

Một công cụ tuyệt vời để tự động tải lại trình duyệt của chúng tôi dựa trên các thay đổi văn bản được gọi là máy chủ trực tiếp. Nó nhẹ và có thể được cài đặt trên toàn cầu như sau

$ open index.html

Sau đó trỏ nó vào thư mục

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0" />


   class="container">
    
Hello, Tailwind!
    
Let's learn how to use this new CSS framework.

$ open index.html

Thao tác này sẽ hiển thị http. //127. 0. 0. 1. 8080 trong trình duyệt web của bạn, nơi chúng ta có thể thấy văn bản và kiểu dáng cơ bản giống như chúng ta đã thấy trong phần trước. Điều này xác nhận quá trình cài đặt Tailwind đang hoạt động

Phần kết luận

Hướng dẫn này vẫn đang được thực hiện nhưng tôi hy vọng hướng dẫn thiết lập sẽ giúp ích cho bất kỳ ai muốn tìm hiểu thêm về Tailwind. Tôi sẽ bổ sung thêm nội dung khi thời gian cho phép

Xin lưu ý rằng vì Tailwind không đi kèm với thiết kế riêng nên nhiều nhà phát triển đã sử dụng Tailwind UI, một bộ thành phần giao diện người dùng trả phí tạo sẵn có thể thêm vào trang web nếu bạn không phải là nhà thiết kế.

CSS Tailwind có khó học không?

Có đáng để học Tailwind CSS không?

Cách tốt nhất để tìm hiểu Tailwind CSS là gì?

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