Cài đặt Tailwindcss Cho Project React - Classfunc Blog

Trang chủ » Cài đặt Tailwind Css » Cài đặt Tailwindcss Cho Project React - Classfunc Blog

Có thể bạn quan tâm

CLASSFUNC BLOGWe Share Our KnowledgeCài đặt tailwindcss cho project react21 Th09 2020 08:31
  1. Tạo project react
npx create-react-app my-app cd my-app npm start
  1. Cài đặt tailwindcss
# Using npm npm install tailwindcss # Using Yarn yarn add tailwindcss
  1. Tạo tệp cấu hình tailwind
npx tailwind init --full

Lúc này sẽ xuất hiện file tailwind.config.js trong thư mục gốc. Tạo file tailwind.css trong thư mục src

  1. Add tailwind vào file tailwind.css mới tạo
@tailwind base; @tailwind components @tailwind utilities
  1. Trong file package.json. Cài đặt để build css từ tailwind. Đoạn scripts trong package.json sẽ có dạng code block
"scripts": { "start": "npm run build:css && react-scripts start", "build": "npm run build:css && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "build:css": "npx tailwindcss build src/tailwind.css -o src/index.css " },

Như vậy là xong, khi chạy npm start, file index.css sẽ chứa tất cả các className mà tailwind cung cấp

logo Chat

Từ khóa » Cài đặt Tailwind Css