![tailwind-pre.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-tailwind%2Fpre%2Fpng-1d-1e-image%2Fpng-4837-1646937654631_tailwind-pre.png?alt=media&token=ecd80f9c-3b3c-4934-812c-f6c8fb052326)
1. Install tailwindcss:
Tại project root:
yarn add -D tailwindcss npx tailwindcss init
-> File tailwind.config.js
được sinh ra
2. tailwind.config.js
Watch sự thay đổi của html,js
trong ./src để re-compile, thêm jsx,ts,tsx
nếu cần thiết
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
3. Tạo file ./src/tailwind.css với nội dung:
@tailwind base; @tailwind components; @tailwind utilities;
4. Scripts tailwind:watch và tailwind:build
Thêm vào scripts
của package.json
"scripts": { "tailwind:watch": "npx tailwindcss -i ./src/tailwind.css -o ./public/styles/tailwind.build.css --watch", "tailwind:build": "npx tailwindcss build -i ./src/tailwind.css -o ./public/styles/tailwind.build.css --minify" }
5. Thêm style vào ./public/index.html
Trong vùng thẻ <head>
, thêm:
<link href="%PUBLIC_URL%/styles/tailwind.build.css" rel="stylesheet">
6. Chạy đồng thời với react-scripts
6.1. Cài đặt npm-run-all
yarn add -D npm-run-all
6.2. Script start:dev
và build
"scripts": { "start:dev": "npm-run-all -p tailwind:watch dev", "dev": "env-cmd -f .env.development react-scripts start", "build:stg": "yarn tailwind:build && env-cmd -f .env.stg react-scripts build", "build:prod": "yarn tailwind:build && env-cmd -f .env.production react-scripts build", }
7. Ignore file /public/styles/tailwind.build.css
Thêm vào file .gitignore
/public/styles/tailwind.build.css
Sử dụng:
Cài đặt plugins
![Ảnh chụp Màn hình 2022-03-11 lúc 01.46.47.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F11%2Flu%2Fc%2F01%2F46%2F47%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-113620-1646938041830_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-11%20lu%CC%81c%2001.46.47.png?alt=media&token=61f4f22c-cba1-416a-9bec-c9ad76c33b41)
Bắt đầu sử dụng:
![Ảnh chụp Màn hình 2022-03-11 lúc 01.48.39.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2022%2F03%2F11%2Flu%2Fc%2F01%2F48%2F39%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-218542-1646938125352_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202022-03-11%20lu%CC%81c%2001.48.39.png?alt=media&token=7b353586-8a0a-42ff-9950-c066b4b40b36)
Link hữu ích: https://tailwindcss.com/ https://tailwindui.com/ https://tailblocks.cc/
😱🍖🍺