Hướng dẫn sử dụng tailwindcss

Bài viết này giới thiệu Tailwind CSS, một thư viện CSS cung cấp cho bạn tất cả các nền tảng cần thiết để xây dựng các thiết kế riêng. Qua bài viết bạn có thể biết cách thiết lập Tailwind CSS trong dự án React của mình.

Trong quá trình phân phối các thư viện và khung CSS, rất nhiều thư viện tuyệt vời đã được xây dựng để đơn giản hóa công việc của nhà phát triển trong nhiệm vụ tạo giao diện trực quan. Tuy nhiên, khá nhiều trong số họ (Bootstrap, Foundation) áp đặt các quyết định thiết kế khó hoàn tác; chúng đi kèm với các thành phần được xác định trước nên khó để tùy chỉnh một cách chủ động. Đây là lý do tại sao Tailwind CSS được coi là một lựa chọn tốt để xây dựng giao diện web thế kỷ 21.

Với Tailwind CSS, bạn có thể tạo các thành phần phù hợp với những gì bạn muốn hoặc những gì bạn đang làm. Bạn có thể tạo các thành phần này bằng cách khai thác sức mạnh của CSS Tailwind. Nếu bạn cảm thấy mệt mỏi với việc sử dụng Bootstrap và các mục tương tự của nó, thì bạn sẽ thấy Tailwind CSS rất phù hợp để làm việc trên các giao diện đẹp mắt khi bạn triển khai các thiết kế mình cần bằng cách sử dụng các lớp tiện ích mà nó cung cấp.

Tại sao nên sử dụng CSS Tailwind?

Có thể bạn chưa sẵn sàng để “phản bội” các frameworks khác hoặc bạn chưa bị thuyết phục để đón nhận những điều tốt đẹp đi kèm với Tailwind CSS. Cho phép tôi cung cấp cho bạn một số lý do khiến bạn có thể cân nhắc sử dụng Tailwind CSS ngay lập tức.

Một trong những phần gây khó khắn nhất khi viết CSS tùy chỉnh là phải đặt tên cho các class. Tại mọi thời điểm, bạn đang cân nhắc class nào nên chung chung hay cụ thể. Làm thế nào để bạn tổ chức chúng và đảm bảo chúng được xếp tầng? Tailwind CSS giải quyết các vấn đề đó một cách liền mạch bằng cách cung cấp các class dựa trên tiện ích có thể sử dụng mọi lúc.

Tuy nhiên, có thể phát sinh trường hợp bạn cần đặt tên cho một số class. Đôi khi điều này có xu hướng xảy ra khi bạn cần trích xuất một số thành phần nhất định và sử dụng chúng sau này trong thiết kế của mình (với sự trợ giúp của chỉ thị @apply).

Khi viết CSS tùy chỉnh (hoặc sử dụng bất kỳ khung CSS truyền thống nào khác), bạn luôn phải thay đổi các tệp CSS của mình khi thực hiện các thay đổi trong thiết kế của mình. Với Tailwind CSS, bạn không cần lo lắng chút nào về điều đó vì bạn đang sử dụng đi sử dụng lại các class giống nhau trong phần đánh dấu. Điều này có nghĩa là bạn không phải phá vỡ bộ đệm CSS của mình mọi lúc để thực hiện các thay đổi nhỏ đối với thiết kế của mình.

Khi nào không nên sử dụng Tailwind CSS?

Có thể bạn sẽ đặt câu hỏi rằng chúng ta nên luôn sử dụng Tailwind CSS cho mọi dự án? Dĩ nhiên là không! Có một vài trường hợp sử dụng mà bạn có thể không muốn sử dụng Tailwind CSS.

1. NẾU BẠN ĐANG LÀM VIỆC TRONG MỘT DỰ ÁN NHỎ

Khi bạn cần bắt đầu với một dự án nhỏ có thời hạn rất ngắn (đặc biệt là dự án mà một số người dùng hoặc chỉ một mình bạn sử dụng), thì Tailwind CSS không phải là lựa chọn tốt nhất. Trong những trường hợp đó, tôi khuyên bạn nên sử dụng Bootstrap, Foundation hoặc bất kỳ framework nào khác để thay thế. Đó là bởi vì chúng đi kèm với các thành phần sẵn sàng sử dụng được xác định trước. Với Tailwind CSS, bạn phải tự tạo một cách sáng tạo.

1. NẾU BẠN LÀ NGƯỜI MỚI BẮT ĐẦU CSS

Trước khi đi sâu vào Tailwind CSS cho bất kỳ dự án nào, bạn nên biết về CSS. Những người mới bắt đầu muốn sử dụng Tailwind CSS cho các dự án dựa trên web trước tiên nên thành thạo CSS ở một mức độ nhất định. Nó cung cấp các lớp tiện ích được liên kết với CSS bên dưới, do đó, chỉ những người có kiến ​​thức vững chắc về CSS mới có thể dễ dàng xây dựng với nó.

1. NẾU BẠN KHÔNG THÍCH THÊM NHIỀU CLASS VÀO CODE CỦA MÌNH

Khi viết Tailwind CSS, bạn luôn phải viết nhiều class, điều này khiến code (HTML) của bạn trông có vẻ lộn xộn và đôi khi khó đọc. Nếu muốn giữ cho code của mình gọn gàng, bạn có thể cân nhắc viết CSS tùy chỉnh hoặc sử dụng bất kỳ khung CSS nào khác (chẳng hạn như Bootstrap).

Với những lý do này, đã đến lúc chuyển sang công việc chính hôm nay: hãy cùng nhau thiết lập Tailwind CSS trong một dự án React!

Bắt đầu thôiii!

Để thiết lập dự án của chúng ta, chúng ta sẽ tạo ra một ứng dụng React mới bằng . Nếu bạn đã thực hiện việc này, hãy bỏ qua quy trình này, nếu không, hãy chạy lệnh bên dưới tại cửa sổ terminal của bạn:

npx create-react-app react-tailwindcss && cd react-tailwindcss

Tiếp theo, chúng ta cài đặt một số gói phụ thuộc phát triển. Bạn có thể sử dụng bất kỳ tùy chọn nào phù hợp với mình.

SỬ DỤNG NPM

npm install tailwindcss postcss-cli [email protected] -D

SỬ DỤNG YARN

yarn add tailwindcss postcss-cli autoprefixer -D

Chúng ta cần khởi tạo Tailwind CSS bằng cách tạo các cấu hình mặc định. Nhập lệnh bên dưới trong cửa sổ terminal của bạn:

npx tailwind init tailwind.js --full

Lệnh này tạo một tailwind.js trong thư mục cơ sở của dự án của bạn; tệp này chứa cấu hình, chẳng hạn như màu sắc, chủ đề, truy vấn phương tiện, v.v. Đó là một tệp hữu ích trợ giúp với các bộ thuộc tính được xác định trước sẽ hỗ trợ nhu cầu đổi thương hiệu cho các quy ước hoặc thuộc tính nhất định nếu có nhu cầu.

Làm cách nào để cấu hình PostCSS?

PostCSS là một công cụ để chuyển đổi phong cách bằng các plugin Java Script. Các plugin này có thể tạo ra CSS của bạn, hỗ trợ các biến và mixin, dịch mã cú pháp CSS trong tương lai, hình ảnh nội tuyến, v.v..

TẠI SAO LÀ AUTOPREFIXER?

Bạn cần cài đặt Autoprefixer cùng với Tailwind CSS vì Autoprefixer thường theo dõi caniuse.com để xem những thuộc tính CSS nào cần thêm tiền tố. Do đó, Tailwind CSS không cung cấp bất kỳ tiền tố nhà cung cấp nào. Nếu bạn tò mò về PostCSS, hãy điều hướng đến tài liệu của họ.

Tạo tệp cấu hình PostCSS trong thư mục cơ sở của bạn theo cách thủ công hoặc sử dụng lệnh:

touch postcss.config.js

Thêm các dòng mã sau vào tệp PostCSS của bạn:

const tailwindcss = require("tailwindcss");
module.exports = {
    plugins: [tailwindcss("./tailwind.js"), require("autoprefixer")],
};

TÓM TẤT CÁC BƯỚC

• Tìm nạp gói Tailwind CSS và đặt nó vào một biến.
• Gói tailwind.js (cấu hình cơ sở mặc định của chúng ta) trong biến tailwindcss.
• Tìm nạp gói autoprefixer.

Cách đưa các thành phần, tiện ích và kiểu cơ bản của Tailwind vào ứng dụng của bạn

Trong thư mục src của bạn, hãy tạo một thư mục, đặt tên là assets, đây là nơi lưu trữ tất cả các styles của bạn. Trong thư mục đó, tạo tệp tailwind.css và tệp main.css tương ứng. Chúng ta sẽ sử dụng tệp tailwind.css để nhập các kiểu CSS của Tailwind cũng như cho các cấu hình và quy tắc tùy chỉnh. Main.css sẽ giữ các kiểu được tạo ra từ những gì chúng ta có trong tệp tailwind.css.

Tiếp theo, chúng ta cần nhập các kiểu và cấu hình cơ sở. Chúng ta sẽ làm điều đó trong một trong các tệp CSS mà chúng ta đã tạo ở trên. Hãy thêm đoạn code sau vào tệp tailwind.css của bạn.

@tailwind base; 

@tailwind components; 

@tailwind utilities;

Lưu ý rằng chúng ta đã sử dụng lệnh @tailwind để đưa các kiểu cơ sở, thành phần và tiện ích của Tailwind vào CSS của mình:

• @tailwind base: Thao tác này đưa vào các kiểu cơ sở của Tailwind, là sự kết hợp giữa Normalize.css và một số kiểu cơ sở bổ sung.
• @tailwind components: Điều này đưa vào bất kỳ lớp thành phần nào (kiểu có thể tái sử dụng như thẻ và thành phần biểu mẫu, v.v.) được đăng ký bởi các plugin dựa trên tệp cấu hình của chúng ta.
• @tailwind utilities: Thao tác này đưa vào tất cả các lớp tiện ích của Tailwind (bao gồm cả tiện ích mặc định và tiện ích của riêng bạn), chúng được tạo dựa trên tệp cấu hình của chúng ta.

Tailwind CSS sẽ hoán đổi các lệnh này tại thời điểm xây dựng với tất cả CSS được tạo. Nếu bạn đang sử dụng postcss-import, hãy sử dụng cái này để thay thế:

@import "tailwindcss/base"; 

@import "tailwindcss/components"; 

@import "tailwindcss/utilities";

Cách định cấu hình ứng dụng của bạn để xây dựng CSS 

Tiếp theo, chúng ta cần định cấu hình dự án của mình để xây dựng các kiểu CSS mỗi khi chúng ta chạy lệnh npm start hoặc yarn start.

Mở tệp pack.json của bạn và sử dụng đoạn mã bên dưới thay cho phần tập lệnh của tệp pack.json của bạn:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
}

Thêm vào CSS của chúng ta

Chúng ta cần nhập tệp CSS của mình một cách thích hợp để đảm bảo rằng nó được xem và xây dựng đúng cách khi chúng ta chạy yarn start hoặc npm start.

Mở tệp index.js của bạn và thực hiện các thay đổi sau:

• Nhập tệp main.css của chúng tôi và xóa  import ‘./index.css’;.

import './assets/main.css'

File *index.js* của bạn sẽ trông như thế này sau khi thay đổi:

npm install tailwindcss postcss-cli [email protected] -D

Truy cập App.js và xóa  import logo from ‘./logo.svg’; chỉ để lại import React from ‘react’;. Đồng thời xóa mọi thứ bên trong thành phần App.

Tối ưu hóa sản phẩm

Khi xây dựng cho môi trường sản phẩm, bạn nên cắt bớt các tệp bản dựng của mình, đặc biệt là các tệp css và js. Cả hai tệp hiện có kích thước quá lớn.

Bạn sẽ đồng ý với tôi rằng kích thước tệp CSS rất đáng sợ đối với quá trình sản xuất, nhưng tin tốt là vẫn có một lối thoát. Để giảm thiểu kích thước CSS của chúng tôi, hãy chạy npm i @fullhuman/postcss-purgecss trong cửa sổ terminal của bạn, sau đó thêm mã sau vào postcss.config.js:

npm install tailwindcss postcss-cli [email protected] -D

Các bước thực hiện:

• Bước đầu tiên chúng ta thực hiện là yêu cầu @fullhuman/postcss-purgecss, tiếp theo chúng ta gọi nó như một hàm và chuyển vào một số cấu hình.
• Thuộc tính nội dung chỉ định đường dẫn đến tệp mẫu của chúng ta và trong trường hợp này, tệp mẫu là tệp js và html của chúng ta và do đó chúng ta đã chỉ định đường dẫn.
• Tiếp theo, chúng ta cần cho purgecss biết cách tìm các lớp css không sử dụng và xóa chúng, chúng ta thực hiện việc này bằng cách sử dụng khóa defaultExtractor và chúng ta chuyển một hàm truy xuất nội dung của tệp và trả về các tên class mà nó tìm thấy trong tệp đó bằng cách sử dụng regEx.
• Sử dụng biểu thức chính quy, chúng ta kiểm tra xem nội dung được tìm thấy khớp với một mẫu (các lớp có chữ hoa, chữ thường, số, dấu gạch dưới, dấu hai chấm và dấu gạch chéo) và nếu không khớp, chúng ta sẽ trả về một mảng trống.
• Bây giờ, khi chúng ta chạy npm run build trong terminal của mình, bạn sẽ thấy như sau

Bây giờ, bạn có thể thấy rằng kích thước CSS của chúng tôi đã được cắt giảm từ 186,67KB xuống còn 1,02KB. Đó là rất nhiều nếu bạn hỏi tôi! Bây giờ, bạn có thể chuyển ứng dụng của mình sang môi trường sản phẩm. 👌

Kết luận

Tôi hy vọng bạn thích hướng dẫn này. Tất nhiên, bạn luôn có thể tiến xa hơn một chút bằng cách biến ứng dụng này thành một ứng dụng hồ sơ nhỏ nói lên nhiều điều về bạn ngoài những thông tin ít ỏi mà chúng tôi có ở trên. Ví dụ: bạn có thể tiếp tục chia sẻ danh sách các bộ kỹ năng mà mình có hoặc thêm bảng vào các dự án bạn đã thực hiện và có thể là biểu mẫu liên hệ. Hãy để sự sáng tạo của bạn tuôn trào và vui lòng chia sẻ các dự án của bạn trong phần nhận xét bên dưới – Tôi rất muốn biết bạn nghĩ ra được gì!