Hướng dẫn thêm Tailwind CSS vào dự án React JS

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

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

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

Nguồn: viblo.asia

Bài viết liên quan

Những ngành nghề AI có thể thay thế dần trong tương lai.

Những ngành nghề AI có thể thay thế trong tương lai gần Dựa trên các báo cáo và

Tạo Subdomain miễn phí với is-a.dev 🤪

Cuối tuần mọi người thế nào, mình thì rảnh quá lướt Facebook, tớ tình cờ th

Dùng TailwindCSS v4 trong SpringBoot + JTE

Giới thiệu JTE là gì? JTE (Java Template Engine) là một template engine an toàn, nhẹ và

WebGL và Three.js cho hệ thống thử đồ ảo

Giới thiệu Với sự phát triển nhanh chóng của thương mại điện tử, kỳ vọng