Hướng Dẫn Cho Người Mới Bắt đầu Về Tailwind CSS Trong React

Tailwind CSS là một khung CSS đầu tiên của tiện ích cho phép các nhà phát triển thiết kế các thành phần web tùy chỉnh mà không cần chuyển sang tệp CSS. Trong hướng dẫn này, bạn sẽ học cách cài đặt Tailwind CSS trong React và cách bạn có thể sử dụng nó để xây dựng một trang React đơn giản.

Mục Lục

• Tại sao nên sử dụng CSS Tailwind?
• Nhược điểm của usingTailwind CSS
• Bắt đầu: Tạo một dự án React
• Sử dụng Tailwind CSS trong React
  • Khởi tạo CSS Tailwind
  • Định cấu hình Đường dẫn Mẫu
  • Đưa CSS Tailwind vào React
• Sử dụng Tailwind CSS để tạo kiểu cho một thành phần React
• Viết mã theo phong cách với CSS Tailwind

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

Đã có rất nhiều khung công tác CSS đơn giản hóa cách các nhà phát triển thiết kế trang web. Vậy tại sao bạn nên sử dụng Tailwind CSS?

Các khung công tác CSS như Bootstrap và Foundation là các khung công tác được xác định rõ ràng, có nghĩa là chúng cung cấp cho các nhà phát triển các thành phần được xác định trước có kiểu mặc định. Điều này hạn chế cả khả năng tùy chỉnh và khả năng sáng tạo, và cuối cùng bạn sẽ có những trang web trông khá chung chung.

Tuy nhiên, Tailwind CSS là một khung công tác ưu tiên tiện ích cung cấp cho bạn quyền kiểm soát sáng tạo để tạo các thành phần động. Và không giống như Bootstrap, bạn có thể dễ dàng tùy chỉnh thiết kế theo ý muốn.

Một lợi thế khác của việc sử dụng Tailwind CSS là bạn sẽ có kích thước gói CSS nhỏ vì nó loại bỏ tất cả CSS không sử dụng trong quá trình xây dựng (điều này khác với Bootstrap, vì nó bao gồm tất cả các tệp CSS trong bản dựng).

Tìm hiểu thêm về sự khác biệt giữa Tailwind CSS và Bootstrap từ bài viết của chúng tôi về chủ đề này.

Nhược điểm của usingTailwind CSS

Tailwind CSS có một đường cong học tập dốc ngay cả đối với các nhà phát triển có kinh nghiệm. Cần một chút thời gian để học cách sử dụng đầy đủ các lớp tiện ích và bạn có thể cần tham khảo tài liệu thường xuyên. Tuy nhiên, sau khi làm quen với các lớp, bạn sẽ thấy nó dễ dàng hơn và nhanh hơn so với CSS thông thường.

LÀM VIDEO TRONG NGÀY

Hầu hết các nhà phát triển thích tuân theo nguyên tắc phân tách các mối quan tâm để các tệp CSS và HTML được viết trong các tệp khác nhau. Với Tailwind CSS, bạn viết CSS trực tiếp trong phần đánh dấu HTML — một hạn chế đối với một số.

Ngay cả với những nhược điểm này, Tailwind CSS vẫn là một framework mà bạn nên xem xét nghiêm túc nếu bạn đã quen với CSS và muốn xây dựng thiết kế nhanh hơn.

Bắt đầu: Tạo một dự án React

Chạy lệnh sau trong terminal để tạo ứng dụng React bằng cách sử dụng tạo-phản ứng-ứng dụng.

npx create-react-app react-tailwind

tạo-phản ứng-ứng dụng cung cấp một cách dễ dàng để tạo ứng dụng React mà không cần định cấu hình các công cụ xây dựng như webpack, babel hoặc linters. Điều này có nghĩa là bạn sẽ có một môi trường React hoạt động trong vòng vài phút.

Lệnh trên tạo một thư mục mới có tên react-tailwind. Điều hướng đến thư mục và mở nó bằng trình soạn thảo văn bản ưa thích của bạn.

cd react-tailwind

Tiếp theo, cài đặt Tailwind CSS và định cấu hình nó hoạt động với ứng dụng React.

Sử dụng Tailwind CSS trong React

Cài đặt Tailwind CSS và các phụ thuộc của nó bằng lệnh này:

npm install tailwindcss postcss autoprefixer

PostCSS sử dụng các plugin JavaScript để làm cho CSS tương thích với hầu hết các trình duyệt. Nó kiểm tra trình duyệt mà ứng dụng đang chạy và xác định các polyfills cần thiết để làm cho CSS của bạn hoạt động liền mạch. Autoprefixer là một plugin PostCSS sử dụng các giá trị từ caniuse.com để tự động thêm tiền tố của nhà cung cấp vào các quy tắc CSS.

Khởi tạo CSS Tailwind

Chạy tailwind init lệnh để tạo tệp cấu hình mặc định Tailwind CSS.

npx tailwindcss init

Điều này tạo ra tailwind.config.js trong thư mục gốc lưu trữ tất cả các tệp cấu hình của Tailwind và chứa các thông tin sau:

module.exports = {content: [],theme: {extend: {},},plugins: [],}

Định cấu hình Đường dẫn Mẫu

Bạn cần cho Tailwind CSS biết các tệp mà nó nên kiểm tra để xem những lớp CSS nào đang được sử dụng. Điều này cho phép Tailwind xác định và loại bỏ các lớp không sử dụng và do đó giảm kích thước của CSS được tạo.

Ở trong tailwind.config.js, thêm các đường dẫn mẫu bên dưới khóa nội dung.

module.exports = {content: ["./src/**/*.{js,jsx,ts,tsx}",],theme: {extend: {},},plugins: [],}

Đưa CSS Tailwind vào React

Bước tiếp theo là đưa CSS Tailwind vào ứng dụng bằng cách sử dụng @Gió cùng chiều các chỉ thị.

Xóa mọi thứ trong index.css và thêm phần sau để nhập các kiểu, thành phần và tiện ích cơ sở.

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

Cuối cùng, hãy chắc chắn rằng index.css được nhập khẩu vào index.js và Tailwind CSS sẽ sẵn sàng để sử dụng.

Sử dụng Tailwind CSS để tạo kiểu cho một thành phần React

Bạn sẽ tạo trang web đơn giản bên dưới và tạo kiểu bằng cách sử dụng các lớp tiện ích của Tailwind.

Trang này chứa hai phần chính: thanh điều hướng và phần anh hùng (có tiêu đề và nút).

Để minh họa cách Tailwind CSS giúp viết CSS dễ dàng hơn, hãy thử tạo kiểu trang web bằng CSS thuần túy và CSS Tailwind.

Bắt đầu bằng cách sửa đổi App.js bên trong src thư mục để xóa mã không cần thiết.

import './App.css'function App() {return (<div className='app'></div>);}export default App;

Tiếp theo, thêm nội dung trang web vào App.js.

import "./App.css";function App() {return (<div className="wrapper"><nav><div className="logo">Tailwind CSS</div><ul><li>Install</li><li>Docs</li></ul></nav><div className="hero"><h1 className="header">Tailwind CSS makes styling React components easier!</h1><button className="btn">Get Started</button></div></div>);}

Để sử dụng CSS thuần túy, hãy thêm CSS vào App.css.

nav {display: flex;justify-content: space-between;padding: 16px 36px;color: #000;box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);}.logo {font-size: 18px;font-weight: bold;}ul {list-style: none;display: inline-flex;}ul li {margin-left: 16px;cursor: pointer;}.hero {display: flex;flex-direction: column;align-items: center;margin-top: 64px;}h1 {font-size: 36px;text-align: center;}.btn {background-color: #000000;color: #fff;padding: 10px;width: fit-content;margin-top: 36px;}

Với Tailwind CSS, bạn không cần phải viết các quy tắc CSS cho mỗi lớp. Thay vào đó, bạn sử dụng các lớp tiện ích. Đây là các lớp có phạm vi đến một thuộc tính CSS duy nhất. Ví dụ: nếu bạn muốn tạo một nút có nền đen và màu văn bản trắng, bạn cần sử dụng bg-đen và văn bản trắng các lớp tiện ích.

App.js nên trông như thế này.

function App() {return (<div><Navbar /><div className="flex flex-col items-center mt-16"><h1 className="text-4xl text-center">Tailwind CSS makes styling React components easier!</h1><button className="bg-black text-white p-2.5 w-fit mt-9 ">Get Started</button></div></div>);}

Bạn không cần phải nhập App.css vì các kiểu do Tailwind CSS tạo được lưu trữ trong index.css mà bạn đã nhập vào index.js sớm hơn.

So với CSS thuần túy, cách tiếp cận này dẫn đến ít mã dễ hiểu hơn.

Viết mã theo phong cách với CSS Tailwind

Trong bài viết này, bạn đã tìm hiểu về Tailwind CSS, điểm mạnh, nhược điểm của nó và cách bạn có thể sử dụng các lớp tiện ích của nó trong các ứng dụng React. Ngoài các lớp, Tailwind CSS cũng cung cấp các tính năng bổ sung khác bao gồm khả năng tạo bố cục đáp ứng và các thành phần có thể tái sử dụng.

Tuy nhiên, như chúng tôi đã đề cập trước đó, Tailwind khác xa với khung CSS duy nhất trên thị trường. Bạn sẽ sử dụng cái nào cho dự án tiếp theo của mình?

Tailwind CSS so với Bootstrap: Khung nào tốt hơn?

Khi chọn một khung CSS, điều quan trọng là phải tìm một khung đáp ứng các yêu cầu của bạn.

Đọc tiếp

Thông tin về các Tác giả

Mary Gathoni (10 bài báo đã xuất bản)

Mary Gathoni là một nhà phát triển phần mềm với niềm đam mê tạo ra nội dung kỹ thuật không chỉ mang tính thông tin mà còn hấp dẫn. Khi cô ấy không viết mã hoặc viết, cô ấy thích đi chơi với bạn bè và ở ngoài trời.

Xem thêm từ Mary Gathoni

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký