Npm tailwindcss

Lưu ý rằng đối với các dự án React mới, chúng tôi khuyên bạn nên sử dụng Vite, Next. js, Remix hoặc Parcel thay vì Tạo ứng dụng React. Chúng cung cấp trải nghiệm tương đương hoặc tốt hơn cho nhà phát triển nhưng linh hoạt hơn, giúp bạn có nhiều quyền kiểm soát hơn đối với cách cấu hình Tailwind và PostCSS

1. npx create-react-app my-projectcd my-project

2. Cài đặt

   cd my-project
   

   5 và các phụ thuộc ngang hàng của nó thông qua npm, sau đó chạy lệnh init để tạo cả

   cd my-project
   

   6 và

   cd my-project
   

   7

   Lúc này sẽ xuất hiện file tailwind. cấu hình. js trong thư mục gốc. Tạo tệp tailwind. css trong thư mục src

   1. Thêm tailwind vào file tailwind. css mới tạo

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

   1. Trong gói tập tin. json. Cài đặt để xây dựng css từ tailwind. Đoạn mã trong gói. json sẽ có định dạng

      cd my-project
      

      8

   ` "scripts": {
       "start": "npm run build:css && react-scripts start",
       "build": "npm run build:css && react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css "
     },`

   Như vậy là xong, khi chạy npm start, file index. css sẽ chứa tất cả các className mà tailwind cung cấp

   Tôi thấy Tailwind CSS là 1 thư viện CSS rất khó hiểu hiện nay. Với Bootstrap, khả năng tùy biến thấp hơn nhiều so với Tailwind CSS. Tuy nhiên cần nhớ nhiều hơn vì mỗi lớp của Tailwind sẽ tương ứng với 1 thuộc tính trong CSS

   1. Tạo 1 dự án React

   npx create-react-app my-project
   

   • Go to the directory of project

   cd my-project
   

   • Lưu ý. you must install Node JS and npm, npx. Bạn có thể tham khảo liên kết này. https. // tài liệu. npmjs. com/download-and-installing-node-js-and-npm

   2. Cài đặt Tailwind CSS

   npm install -D tailwindcss postcss autoprefixer
   

   npx tailwindcss init -p
   

   3. Add information to file tailwind. cấu hình. js

   tập tin theo chiều gió. cấu hình. js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

   4. Thêm tệp của thư viện Tailwin vào tệp css của dự án

   Ví dụ tôi sẽ thêm vào chỉ mục tập tin. css của React js. Bạn có thể thêm vào các tệp khác nhau của dự án sau đó thêm tệp này vào chỉ mục tệp gốc. html

   mục lục. css

   ________số 8

   5. Run project project

   Ứng dụng. js

   export default function App() {
     return (
       
   
         Hello world!
       
     )
   }
   

   Add code side on file App. js and try. You can see results of the class tử tailwind as text-3xl, font-bold

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

   Tailwind CSS Là Gì?

   Tailwind là khung CSS tiện ích đầu tiên giúp bạn có thể nhanh chóng xây dựng giao diện người dùng. Thực hiện nó cũng giống với các thư viện khác như Bootstrap, Materialize. nhưng điểm khác biệt chính của nó là các khung CSS cấp thấp (low-level CSS framework) cung cấp cho chúng ta nhiều chức năng tùy biến phát triển thành phần mà không cần phải viết lại CSS

   

   Cách Cài Đặt Tailwind CSS

   Trước khi vào cài đặt tailwind, bạn phải cài đặt Nodejs trên máy tính đã có sẵn. Nếu bạn chưa cài đặt Nodejs thì có thể truy cập đường dẫn bên dưới để tải về nha

   Tải xuống Nodejs

   Nếu bạn chưa biết mình đã cài đặt hay chưa, có thể kiểm tra thông qua thiết bị đầu cuối của máy tính bằng đoạn mã sau

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

   0
   

   Bước tiếp theo chúng ta sẽ tạo tệp

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

   16 thông qua đoạn mã sau nha.

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

   1

   Và video dưới đây là cách thực hiện nhé

   Tiếp theo chúng ta sẽ vào cài đặt tailwind css bằng terminal thông qua đoạn mã

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

   3

   Và dưới đây là video thực hiện nha

   Cách thêm Tailwind vào tệp CSS

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

   Đầu tiên chúng ta sẽ tạo thư mục tên

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

   17 là nơi lưu trữ tập tin

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

   18 nha
   

   Bước tiếp theo mình sẽ đi vào nhập các hàm cơ bản trong tệp

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

   18 thông qua đoạn mã sau

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

   7

   Và để dễ dàng hình dung cách Tailwind active thì bạn xem hình ảnh bên dưới nha

   

   Như bạn đã thấy ở hình ảnh trên, sau khi tạo tệp lưu trữ CSS với các đoạn mã nhập tailwind cần thiết thì bước tiếp theo chúng ta sẽ tạo một thư mục

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

   30 dùng để lưu trữ tệp

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

   18 sau khi đã biên dịch nha
   

   Phần cuối cùng chúng ta sẽ đi vào thực thi biên dịch file

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

   18 bằng đoạn script trong file

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

   16 thông qua đoạn code dưới đây nha

   ` "scripts": {
       "start": "npm run build:css && react-scripts start",
       "build": "npm run build:css && react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css "
     },`

   2

   Ở đây mình có một số lưu ý là

   • "build-file-css". is name when run compile by nodejs
   • xây dựng src/kiểu. css. find file compile at directory src with file name is style. css
   • -o công khai/phong cách. css. after when compile file archive at public directory with name is style. css
   

   Bay giờ chúng ta sẽ chạy biên dịch thông qua đoạn mã

   ` "scripts": {
       "start": "npm run build:css && react-scripts start",
       "build": "npm run build:css && react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css "
     },`

   3

   Và kết quả bạn xem bên dưới nha

   Nếu bạn muốn tham khảo thêm về cách biên dịch tailwind css tại đây nha

   Giúp bạn có thể thiết lập tailwind css dễ dàng hơn thì mình tạo file có sẵn và chỉ cần tải về là có thể sử dụng được rồi nha.
   Tải tệp 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 tệp

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

   34 và lưu trữ trong thư mục

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

   30
   

   Tiếp theo chúng ta sẽ đi vào việc tạo cấu trúc trang HTML và liên kết nó với tệp

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

   18 đã được biên dịch trong thư mục

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

   30 nha

   ` "scripts": {
       "start": "npm run build:css && react-scripts start",
       "build": "npm run build:css && react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css "
     },`

   8

   Phần tiếp theo mình sẽ bổ sung các mã HTML cần thiết để giúp chúng ta thực hiện các ví dụ với tailwind CSS dễ dàng hơn

   To you don't lost time code, mình sẽ đặt đường dẫn download ở bên dưới nha.
   Tai File index. html

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

   Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo màu trong tailwind thông qua bảng sau nha

   

   Như các bạn thấy thì mình sẽ thiết lập color thông qua cú pháp sau

   ` "scripts": {
       "start": "npm run build:css && react-scripts start",
       "build": "npm run build:css && react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css "
     },`

   9

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

   npx create-react-app my-project
   

   0

   Bây giờ chúng ta sẽ vào thiết lập màu sắc cho các thành phần trong chỉ mục tệp. html nha

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

   

   Khi bạn muốn thiết lập font-size, chúng ta chỉ cần theo cú pháp sau

   npx create-react-app my-project
   

   1

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

   Trong phần này mình sẽ đi vào việc tạo độ dày phông chữ cho các tiêu đề bằng các lớp trong bảng sau đây

   

   Nếu bạn muốn tìm hiểu về font-weight thì truy cập tại đây nha. Như hình ở trên thì chúng ta rút cú pháp của font-weight như sau

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

   10

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

   Để bạn không bị mất thời gian đoạn code này thì mình sẽ đặt đường dẫn download ở bên dưới nha.
   Tai File index. html

   Margin, Padding và Border

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

   

   Nếu bạn muốn tìm hiểu về padding thì truy cập tại đây nha. Như bạn đã thấy, chúng ta sẽ có cú pháp tổng hợp cho phần đệm là

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

   11

   Ngoài ra nó còn có các thuộc tính đệm khác giúp chúng ta có nhiều lựa chọn hơn như

   • px-{kích thước}. Thiết lập phần đệm theo chiều ngang. Ví dụ px-1 tương đương với padding-left. 0. 25rem; . 0. 25rem
   • py-{size}. Thiết lập phần đệm theo chiều dọc. Ví dụ py-1 tương đương với padding-top. 0. 25rem; . 0. 25rem
   • pt-{size}. Thiết lập padding top
   • pb-{size}. Thiết lập padding bottom
   • vui lòng-{kích thước}. Thiết lập padding left
   • pr-{size}. Thiết lập phần đệm bên phải

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

   Đối với lề 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

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

   12

   Nếu bạn muốn tìm hiểu về margin thì truy cập tại đây nha. Bây giờ mình sẽ đi vào ví dụ chi tiết nha

   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

   

   Mình có một số lưu ý khi sử dụng border trong tailwind css là

   • Công thức tổng là. Biên giới
   • kích thước đường viền l. Tạo viền trái
   • đường viền-r-size. Tạo viền phải
   • kích thước đường viền. Tạo viền trên cùng
   • đường viền-b-size. Tạo viền đáy

   Nếu bạn muốn tìm hiểu về border thì truy cập tại đây nha. Bây giờ chúng ta sẽ đi vào ví dụ chi tiết nha

   Để bạn không bị mất thời gian đoạn code này thì mình sẽ đặt đường dẫn download ở bên dưới nha.
   Tai File index. html

   Use Flexbox Trong TailwindCSS

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

   Use Breakpoints Trong TailwindCSS

   Trong phần này sẽ đi vào tìm hiểu các lớp giúp chúng ta có thể thiết lập thuộc tính CSS dựa trên các màn hình khác nhau nhé. Nếu bạn muốn tìm hiểu về Breakpoints thì truy cập tại đây nha

   

   Như hình ảnh ở trên, các tên lớp trong tailwind sẽ tương ứng với các màn hình thiết bị khác nhau. Để giúp bạn dễ hình dung thì ta sẽ đi vào ví dụ chi tiết trong video dưới đây nha

   Mình đã lưu một số điểm trên video là

   • văn bản-xanh-500. Use green leaf tree default
   • sm. văn bản-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. chữ-đỏ-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 thẻ thành phần

   Trong phần này chúng ta sẽ vào thẻ thành phần thiết lập thông qua các lớp 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, bóng. cho thẻ thông qua đoạn mã sau nha

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

   13

   Và kết quả các bạn xem video dưới đây nha

   Grid Use

   Trong phần này chúng ta sẽ sử dụng class grid trong tailwind css để chia layout trong website nha. Để giúp bạn dễ hình dung thì chúng ta hãy vào ví dụ sau đay nhé. Nếu bạn muốn tìm hiểu về Grid thì truy cập tại đây nha

   Mình có một số lưu ý dành cho mình là

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

   Để bạn không bị mất thời gian đoạn code này thì mình sẽ đặt đường dẫn download ở bên dưới nha.
   Tai File index. html

   Cách Sử dụng @apply Chỉ thị Trong Tailwind CSS

   Thông thường khi một thành phần có nhiều lớp giống nhau thì việc ghi lại các lớp trên từng thành phần sẽ làm mất nhiều thời gian viết mã. Để giúp các bạn hiểu rõ hơn thì mình sẽ lấy hai nút đăng nhập và đăng ký làm ví dụ nha

   Bây giờ mình sẽ vào nút thiết kế giao diện thông qua đoạn mã sau nha

   

   Như hình ảnh phía trên, bạn có thể thấy rằng hai nút này đều có lớp chung là

   làm tròn-đầy đủ px-4 py-2 con trỏ theo dõi con trỏ-phông chữ rộng hơn-văn bản đậm-xs viền-2 viền-xanh-500

   Trong tailwind css cho phép chúng ta có thể ghép nhiều lớp giống nhau thành một lớp duy nhất bằng

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

   38. Để giúp các 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ẽ giải thích các bước để giúp các bạn hiểu rõ hơn nhé

   • Đầu tiên chúng ta sẽ vào sao chép các lớp chung của hai nút đăng nhập và đăng ký
   • Tiếp theo truy cập vào tệp

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

     18 trong thư mục

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

     17
   • Tạo một lớp

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

     71 bằng lệnh @apply và dán các thuộc tính chung của hai nút này
   • Truy cập vào gói tập tin. json để chỉnh sửa lại đoạn script biên dịch tailwind css
   • Sau khi chỉnh sửa xong, chúng ta cần phải chạy lại trình biên dịch để cập nhật kiểu tệp. css trong public
   • Bước cuối cùng là lớp thiết lập. btn into hai mục đăng nhập và đăng ký

   Nếu bạn muốn tìm hiểu về @apply thì truy cập tại đây nha. Phần tiếp theo chúng ta sẽ đi vào việc tạo hiệu ứng di chuột cho nút thông qua đoạn mã sau nha

   

   với di chuột. bg-blue-500. mà nền sẽ chuyển sang màu xanh dương khi di chuột và di chuột. chữ trắng. 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 chúng ta sẽ sử dụng một số lớp cơ bản của tailwind css để xây dựng thanh điều hướng cho trang web nha

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

   14

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

   

   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 base;
   @tailwind components
   @tailwind utilities`

   72 thông qua đoạn mã sau đây nha

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

   15

   Để dễ hiểu hơn các bạn xem video sau nha

   Phần tiếp theo chúng ta sẽ vào Google Font để copy đoạn mã import vào file css nha

   

   Tiếp theo chúng ta sẽ nhập đoạn mã trên vào kiểu tệp. css trong thư mục

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

   17 như hình ảnh bên dưới nha
   

   Bước kế tiếp chúng ta sẽ vào nhập Roboto Font bằng file tailwind. cònig. js như hình ảnh bên dưới

   

   Bước cuối cùng mình sẽ chạy lại lệnh biên dịch CSS và lớp bổ sung. font-body vào thẻ

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

   74 trong chỉ mục tệp. html to setting roboto font cho website

   Nếu bạn muốn tìm hiểu về thiết lập Cấu hình js thì truy cập tại đây nha

   Nếu bạn muốn tìm hiểu thêm các ví dụ về tailwind css, hãy truy cập 20 Công Cụ Và Ví Dụ Cho Tailwind CSS

   Tổng kết

   Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn kiến ​​thức cơ bản về Tailwind CSS và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ