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?
Đã 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.
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-tailwindtạ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-tailwindTiế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 autoprefixerPostCSS 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?
Đọc tiếp
Thông tin về các Tác giả
