Tailwind CSS Dành Cho Bạn Mới Bắt Đầu 2021

[ad_1]

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu Tailwind CSS là gì, các thuộc tính cơ bản và cách áp dụng chúng vào phát triển dự án thực tế nha.

Tailwind CSS Là Gì?

Tailwind là một utility-first CSS framework giúp bạn hoàn toàn có thể nhanh gọn thiết kế xây dựng giao diện người dùng. Thực ra nó cũng giống với những thư viện khác như Bootstrap, Materialize … nhưng điểm độc lạ chính của nó là khung CSS cấp thấp ( low-level CSS framework ) phân phối cho tất cả chúng ta nhiều tính năng tuỳ biến tăng trưởng component mà không cần phải viết lại CSS .tailwind CSS

Cách Cài Đặt Tailwind CSS

Bạn đang đọc: Tailwind CSS Dành Cho Bạn Mới Bắt Đầu 2021

Trước khi đi vào cài tailwind thì bạn phải cài Nodejs trên máy tính đã nha. Nếu bạn chưa cài Nodejs thì hoàn toàn có thể truy vấn đường dẫn bên dưới để tải về nha .Nodejs DownloadNếu bạn chưa biết mình đã thiết lập hay chưa thì hoàn toàn có thể kiểm tra trải qua terminal của máy tính bằng đoạn code sau :

node -v

Check Nodejs Version

Bước tiếp theo chúng ta sẽ tạo file package.json thông qua đoạn mã sau nha:

npm init

Và video dưới đây là cách mà thực thi nhé !Tiếp theo tất cả chúng ta sẽ đi vào setup tailwind css bằng terminal trải qua đoạn mã :

npm install tailwindcss

Và dưới đây là video triển khai nha .

Cách Thêm Tailwind Vào File CSS

Mặc dừ tailwind phân phối rất nhiều tính năng có ích để điều khiển và tinh chỉnh component nhưng đa phần trong dự án Bất Động Sản thực tiễn thì bắt buộc tất cả chúng ta phải viết những mã CSS riêng. Do đó trong phần này mình sẽ hướng dẫn bạn cách để hoàn toàn có thể sử dụng tailwind và CSS với nhau nha .

Đầu tiên chúng sẽ tạo thư mục tên src là nơi lưu trữ file style.css nha.

Create file style css

Bước tiếp theo mình sẽ đi vào import các hàm cơ bản trong file style.css thông qua đoạn mã sau:

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

Và để dễ tưởng tượng cách Tailwind hoạt động giải trí thì bạn xem hình ảnh bên dưới nha .How Tailwind css work

Như bạn thấy ở hình ảnh trên thì sau khi tạo file lưu trữ CSS với các đoạn mã import tailwind cần thiết thì bước kế tiếp chúng ta sẽ tạo một thư mục public dùng để lưu trữ file style.css sau khi đã biên dịch nha.

Create Folder Public

Phần cuối cùng chúng ta sẽ đi vào thực hiện biên dịch file style.css bằng đoạn script trong file package.json thông qua đoạn code dưới đây nha.

 "build-file-css": tailwindcss build src/style.css -o public/style.css

Ở đây mình có 1 số ít chú ý quan tâm là :

  • “build-file-css”: là tên khi chạy biên dịch bằng nodejs
  • build src/style.css: tìm file biên dịch tại thư mục src với file tên là style.css
  • -o public/style.css: sau khi biên dịch thư lưu file tại thư mục public với tên là style.css

Add script in package jsonBay giờ tất cả chúng ta sẽ chạy biên dịch trải qua đoạn mã :

npm run build-file-css

Và hiệu quả bạn xem bên dưới nha :Nếu bạn muốn tìm hiểu thêm thêm về cách biên dịch tailwind css ở đây nha .

Xem thêm :  Top 20 dẻo miệng trong tiếng anh là gì mới nhất 2022

Để giúp bạn có thể thiết lập tailwind css dễ dàng hơn thì mình có tạo file sẵn và chỉ cần tải về là có thể sử dụng rồi nha.
Tải File Tailwind

Tạo Trang HTML Và Liên Kết Tailwind CSS

Trong phần này chúng ta sẽ đi vào tạo file index.html và lưu trữ trong thư mục public:

Create File index.html

Tiếp theo chúng ta sẽ đi vào tạo cấu trúc trang HTML và liên kết nó với file style.css đã được biên dịch trong thư mục public nha.

html>




    
    
    
    Niem Vui Lap Trinh
    
 rel="stylesheet" href="https://globalizethis.org//tailwind-la-gi-1641038869/style.css"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="x-ua-compatible" content="ie=edge"> charset="utf-8">


 lang="en">

Phần tiếp theo mình sẽ thêm những code HTML thiết yếu để giúp tất cả chúng ta thực thi những ví dụ với tailwind CSS thuận tiện hơn .

Để bạn không phải mất thời gian code thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Font Và Màu Sắc Trong Tailwind CSS

Trong phần này tất cả chúng ta sẽ đi vào khám phá cách tạo màu trong tailwind trải qua bảng sau nha :Color in tailwindNhư bạn thấy thì mình sẽ thiết lập sắc tố trải qua cú pháp sau :

.text-color(màu sắc)-weight(Độ đậm nhạt)

Nếu bạn muốn tìm hiểu và khám phá về text-color thì truy vấn ở đây nha. Ví dụ khi muốn mình muốn tạo chữ màu đỏ với weight là 400 thì tất cả chúng ta sẽ gọi như sau :

.text-red-400

Bây giờ tất cả chúng ta sẽ đi vào thiết lập sắc tố cho những thành phần trong file index.html nha .

Tiếp theo mình sẽ đi vào thiết lập font-size cho nội dung trong trang web bằng các class có sẵn trong bảng dưới đây:

Font Size in tailwind cssKhi bạn muốn thiết lập font-size thì tất cả chúng ta chỉ cần theo cú pháp sau :

.text-size(kích cỡ bạn muốn)

Nếu bạn muốn khám phá về font-size thì truy vấn ở đây nha. Và để giúp bạn dễ hiểu thì mình sẽ đi vào thực hành thực tế ví dụ nha .

Trong phần này mình sẽ đi vào tạo font weight cho các tiêu đề bằng các class trong bảng sau đây:

Font Weight in tailwind cssNếu bạn muốn khám phá về font-weight thì truy vấn ở đây nha. Như hình ở trên thì tất cả chúng ta rút được cú pháp của font-weight như sau :

.font-tên font weight

Sau khi nắm đươc cú pháp thì bạn hãy cùng mình đi vào ví dụ sau nha .

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Margin, Padding Và Border

Bây giờ chúng ta sẽ đi vào tìm hiểu về padding trong Tailwind thông qua bảng sau nha:

Padding in tailwind cssNếu bạn muốn khám phá về padding thì truy vấn ở đây nha. Như bạn thấy thì tất cả chúng ta sẽ có cú pháp tổng quát cho padding là :

.p-size(kích thước padding)

Ngoài ra nó còn có những thuộc tính padding khác giúp tất cả chúng ta có nhiều lựa chọn hơn như :

  • px-{size}: Thiết lập padding theo chiều ngang. Ví dụ px-1 tương đương với padding-left: 0.25rem; padding-right: 0.25rem.
  • py-{size}: Thiết lập padding theo chiều dọc. Ví dụ py-1 tương đương với padding-top: 0.25rem; padding-bottom: 0.25rem.
  • pt-{size}: Thiết lập padding top.
  • pb-{size}: Thiết lập padding bottom.
  • pl-{size}: Thiết lập padding left.
  • pr-{size}: Thiết lập padding right.

Bây giờ tất cả chúng ta sẽ đi vào ví dụ để hiểu rõ hơn nhé !

Xem thêm: Công nghệ đèn UVC là gì – Ánh sáng tia cực tím diệt vi khuẩn ? – DaiThuCompany – 0904723825

Đối với margin thì cú pháp và cách sử dụng cũng y chang như padding nha. Điểm khác biệt của nó là thay vì sử dụng p thì chúng ta sẽ sử dụng m.

.m-size(kích thước margin)

Nếu bạn muốn khám phá về margin thì truy vấn ở đây nha. Bây giờ mình sẽ đi vào ví dụ cụ thể nha .

Xem thêm :  Phimmoi, zphimmoi đổi tên thành tên miền gì ? – Sao Hải Vương

Phần tiếp theo chúng ta sẽ đi vào tìm hiểu thuộc tính border thông qua hình ảnh sau:

Border in tailwind cssMình có 1 số ít chú ý quan tâm khi sử dụng border trong tailwind css là :

  • Công Thức tổng quát là : border-size
  • border-l-size: Tạo border left
  • border-r-size: Tạo border right
  • border-t-size: Tạo border top
  • border-b-size: Tạo border bottom

Nếu bạn muốn tìm hiểu và khám phá về border thì truy vấn ở đây nha. Bây giờ tất cả chúng ta sẽ đi vào ví dụ cụ thể nha .

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Sử dụng Flexbox Trong TailwindCSS

Trong phần này tất cả chúng ta sẽ đi vào khám phá cách vận dụng thuộc tính flexbox trong tailwind css để chỉnh sửa vị trí cho phần ĐK và đăng nhập trong file index.html nha. Nếu bạn muốn tìm hiểu và khám phá về flexbox thì truy vấn ở đây nha .

Sử dụng Breakpoints Trong TailwindCSS

Trong phần này sẽ đi vào tìm hiểu và khám phá những class giúp tất cả chúng ta hoàn toàn có thể thiết lập thuộc tính CSS dựa trên những màn hình hiển thị khác nhau nhé. Nếu bạn muốn khám phá về Breakpoints thì truy vấn ở đây nha .Breakpoints in tailwind cssNhư hình ảnh ở trên thì những tên class trong tailwind sẽ tương ứng với những màn hình hiển thị thiết bị khác nhau. Để giúp bạn dễ tưởng tượng thì tất cả chúng ta sẽ đi vào ví dụ cụ thể trong video dưới đây nha .Mình có chú ý quan tâm 1 số ít điểm ở video trên là :

  • text-green-500: Sử dụng màu xanh lá cây mặc định
  • sm:text-blue-500: Sử dụng màu xanh da trời khi màn hình có kích thước lớn hơn 640 px
  • md:text-red-500: Sử dụng màu đỏ khi màn hình có kích thước lớn hơn 768 px

Xây dựng Component Card

Trong phần này tất cả chúng ta sẽ đi vào thiết lập component card trải qua những class cơ bản của tailwind css nha. Đầu tiên mình sẽ đi vào thiết lập vị trí, màu nền, shadow … cho card trải qua đoạn mã sau nha :


    
    

        
        

            Article Title class="font-bold">
 class="m-4"> class="w-full object-cover" src="https:>
 class="bg-white shadow rounded overflow-hidden">
 class="mt-8">

            Write By Niem Vui Lap Trinh class=”block text-sm”>
        
    

Và tác dụng bạn xem video dưới đây nha .

Sử Dụng Grid

Trong phần này tất cả chúng ta sẽ sử dụng class grid trong tailwind css để chia layout trong website nha. Để giúp bạn dễ tưởng tượng thì tất cả chúng ta hãy đi vào ví dụ sau đay nhé ! Nếu bạn muốn khám phá về Grid thì truy vấn ở đây nha .Mình có một số ít chú ý quan tâm dành cho bạn là :

  • Để sử dụng đươc grid trong css thì ta sẽ gọi class grid.
  • lg:grid-cols-3: Sẽ chia 3 cột đối với màn hình lớn hơn 1024px
  • md:grid-cols-2: Sẽ chia 2 cột đối với màn hình lớn hơn 768px
  • sm:grid-cols-1: Sẽ chia 1 cột đối với màn hình lớn hơn 640px
  • gap-10: Là khoảng cách giữa các item trong grid.

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Cách Sử dụng @apply Directive Trong Tailwind CSS

Thông thường khi một thành phần có nhiều class giống nhau thì việc ghi lại những class trên từng component sẽ làm mất nhiều thời hạn viết mã. Để giúp bạn hiểu rõ hơn thì mình sẽ lấy hai button login và signup làm ví dụ nha .Bây giờ mình sẽ đi vào phong cách thiết kế giao diện button trải qua đoạn mã sau nha :Thiết Lập Style Cho Button tailwind cssNhư hình ảnh phía trên thì bạn hoàn toàn có thể thấy rằng hai button này đều có class chung là :

Xem thêm :  Phong cách Tân Cổ Điển (Neo Classic)-Truyền thuyết và sự thật-FEDIC

rounded-full px-4 py-2 cursor-pointer tracking-wider font-bold text-xs border-2 border-blue-500

Trong tailwind css cho phép chúng ta có thể gộp nhiều class giống nhau thành một class duy nhất bằng @apply. Để giúp bạn dễ dàng theo dõi thì mình sẽ hướng dẫn thông qua video sau nhé.

Mình sẽ lý giải những bước để giúp bạn hiểu rõ hơn nhé !

  • Đầu tiên chúng ta sẽ đi vào copy các class chung của hai button login và signup.
  • Tiếp theo truy cập vào file style.css trong thư mục src
  • Tạo một class btn với lệnh @apply và dán các thuộc tính chung của hai button này.
  • Truy cập vào file package.json để chỉnh sửa lại đoạn script biên dịch tailwind css.
  • Sau khi chỉnh sửa xong thì chúng ta cần phải chạy lại trình biên dịch để cập nhật file style.css trong public
  • Bước cuối cùng là thiết lập class .btn vào hai phần đăng nhập và đăng ký.

Nếu bạn muốn khám phá về @ apply thì truy vấn ở đây nha. Phần tiếp theo tất cả chúng ta sẽ đi vào tạo hiệu ứng hover cho button trải qua đoạn mã sau nha :Thiết Lập Hiệu Ứng Hover Cho Button tailwind cssVới hover : bg-blue-500 : mà nền sẽ chuyển sang màu xanh dương khi hover và hover : text-white : là chữ sẽ chuyển sang màu trắng khi ta hover .

Xây dựng Giao Diện Cho Navbar

Trong phần này tất cả chúng ta sẽ sử dụng một số ít class cơ bản của tailwind css để thiết kế xây dựng navbar cho website nha .

  class="flex justify-between">

        
    
    

 class=”flex p-4 justify-between”>         
        

  •             
                     Contact
                 href=”https://globalizethis.org//tailwind-la-gi-1641038869/#”>
  •  class=”text-blue-900 ml-4 font-bold”>         
            

  •             
                    About
                 href=”https://globalizethis.org//tailwind-la-gi-1641038869/#”>
  •  class=”text-blue-900 ml-4 font-bold”>         
        

    Kết quả bạn xem hình ảnh bên dưới nha .Result Of Navbar

    Cách Thiết Lập Font Cho Dự Án

    Bước đầu tiên chúng ta sẽ mở terminal và tạo file tailwind.config.js thông qua đoạn mã sau đây nha:

    npx tailwindcss init

    Để dễ hiểu hơn bạn xem video sau nha :Phần tiếp theo tất cả chúng ta sẽ đi vào đi vào Google Font để copy đoạn mã import vào file css nha :Google Font import

    Tiếp theo chúng ta sẽ import đoạn mã trên vào file style.css trong thư mục src như hình ảnh bên dưới nha.

    Google Font importBước sau đó tất cả chúng ta sẽ đi vào import Roboto Font bằng file tailwind. cònig. js như hình ảnh bên dưới :Google Font import

    Bước cuối cùng mình sẽ chạy lại lệnh biên dịch CSS và thêm class .font-body vào thẻ body trong file index.html để thiết lập roboto font cho website.

    Xem thêm: Downtown Là Gì? Uptown Là Gì ? Uptown Là Gì? Phân Biệt Downtown Và Uptown

    Nếu bạn muốn tìm hiểu và khám phá về thiết lập Configuration js thì truy vấn ở đây nha .Nếu bạn muốn khám phá thêm những ví dụ về tailwind css thì truy vấn 20 Công Cụ Và Ví Dụ Cho Tailwind CSS .

    Tổng kết:

    Qua đây mình mong bài viết sẽ phân phối thêm cho bạn kiến thức và kỹ năng cơ bản về Tailwind CSS và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !

    Source: https://globalizethis.org/
    Category: Hỏi Đáp

    [ad_2]

    Trả lời

    This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.