Hướng dẫn thêm Tailwind CSS vào dự án React JS
This post hasn't been updated for 2 years
Tailwind CSS và React JS
Tô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
npx create-react-app my-project
- Đi đến thư mục của dự án
cd my-project
- Lưu ý: bạn phải cài đặt Node JS và npm, npx. Bạn có thể tham khảo link này:https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Cài đặt Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3. Thêm thông tin vào file tailwind.config.js
file tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
4. Thêm các file của thư viện Tailwin vào file css của dự án
Ví 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
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Chạy thử dự án
App.js
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
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