Hướng dẫn tailwind css react - tailwind css phản ứng
Show
Đã đăng vào thg 9 15, 8:36 SA 1 phút đọc 1 phút đọc Tailwind CSS và React JSTôi thấy Tailwind CSS là 1 thư viện CSS rất được ưa chuộng hiện nay. Với Bootstrap thì khả năng tùy biến thấp hơn nhiều so với Tailwind CSS. Tuy phải nhớ nhiều hơn vì mỗi class của Tailwind sẽ tương ứng với 1 thuộc tính trong CSS. 1. Tạo 1 project React
2. Cài đặt Tailwind CSS
3. Thêm thông tin vào file tailwind.config.js
4. Thêm các file của thư viện Tailwin vào file css của dự ánVí dụ tôi sẽ thêm vào file index.css của React js. Bạn có thể thêm vào các file khác của dự án sau đó add file này vào file gốc index.html
5. Chạy thử dự án
Thêm code bên trên vào file App.js và chạy thử. Bạn có thể thấy các kết quả của các class tử tailwind như text-3xl, font-bold All rights reserved Bước 1: Int project react native (LT;DR)cài đặt project react native
ngoài ra các bạn có thể tạo project bằng expo
Bước 2: Add dependencyChạy lệnh:
Tại thời điểm viết bài thư viện 2 đang ở version 4.2.0, có 3.5k start trên gitHub, 6000 lượt download mỗi tuần trên npm.Bước 3: Generate các file configChạy lệnh: 0Tại thời điểm viết bài thư viện 2 đang ở version 4.2.0, có 3.5k start trên gitHub, 6000 lượt download mỗi tuần trên npm.Bước 3: Generate các file config Sau khi chạy xong project sẽ tụ động xuất hiện 4 file:file 3, 4 là sản phẩm cuối dùng được tự động build ra.Bước 4: setup các componentTiếp tục làm theo hướng dẫn
import {TailwindProvider} from 'tailwind-rn'; import utilities from './tailwind.json'; 1Trường hợp này 5 đang là component root. 2Cho npm install -D tailwindcss postcss autoprefixer 5 return Component npm install -D tailwindcss postcss autoprefixer 8, tất cả các component còn lại là children của npm install -D tailwindcss postcss autoprefixer 8. npm install -D tailwindcss postcss autoprefixer 8 nên bao bọc phía ngoài cùng tất cả, kể cả npx tailwindcss init -p 1, npx tailwindcss init -p 2, ...File 3 sẽ trông như thế này: 34.3: Sử dụng các class tailwind CSSTạo component 4 với nội dung như sauđồng thời 2 của số terminal mỗi khi muốn run app trên điện thoại hoặc máy ảo:5: run và debug ứng dụng 45: run và debug ứng dụng 5hoặc 6Mở đồng thời 2 của số terminal mỗi khi muốn run app trên điện thoại hoặc máy ảo:Cửa số thứ nhất chạy lệnh:NHỮNG LƯU Ý KHÔNG CÓ TRONG DOCS 1. Class tailwind không có tác dụng khi sử dụng trực tiếp bên trong component root.Trường hợp dưới đây là không hợp lệ: 7 82. Config đường dẫn các component con 9nếu có nhiều thư mục với các đường dẫn khác nhau thì tạo thành mảng các đường dẫn: 0hoặc 1 |