Reddit tailwindcss

Tôi hiện đang ở giữa khóa học NodeJS của Schwarzmuller - nó khá toàn diện và nếu khóa học bạn đã tìm thấy là bất cứ điều gì giống với nó thì tôi nghĩ nó có thể sẽ khá tốt;

Trong khóa học tôi theo dõi, anh ấy cũng cung cấp các tùy chọn mô-đun như phần giới thiệu hoặc ví dụ cho các trường hợp sử dụng khác cũng hữu ích

Tôi muốn giới thiệu các khóa học của anh ấy cho người khác nhưng tôi cũng là người mới bắt đầu hoàn toàn, vì vậy hãy tiếp nhận lời giới thiệu của tôi với một hạt muối vì tôi không có đào tạo chính thức/học thuật để so sánh

Có rất nhiều điều để học nhưng đừng nản lòng. ‹ liên kết

Chương trình giáo dục của bạn không bao giờ dừng lại, hãy cập nhật các hướng dẫn mới nhất của JavaScript. , luôn cập nhật các hướng dẫn JavaScript mới nhất

Công ty làm việc từ xa 100% nên rất tiện cho các bạn Front-end dù các bạn đang ngồi ở đâu. Nếu kỹ năng tốt tinh thần thì trách nhiệm tốt, có thể làm part-time 3-4h/ngày vẫn được lợi cực tốt (cộng tích lũy kinh nghiệm dự án thương mại điện tử thị trường toàn cầu)

Yêu cầu chung

• Trung thực và có tinh thần trách nhiệm cao. Do chủ yếu làm việc từ xa cần có thái độ làm việc chuyên nghiệp tương tác với nhóm tốt hơn
• Thái độ chủ động trong mọi công việc. Ví dụ. bàn giao code nên có tài liệu hướng dẫn (tối thiểu là 1 file readme. md để người nhận dễ dàng sử dụng repo)
• Phát triển các ứng dụng (ứng dụng web) bằng tích hợp đa nền tảng nên cần có khả năng tự học, thích ứng dụng hoàn cảnh & sẵn sàng học hỏi công nghệ mới là một lợi thế lớn
• Yêu thích và luôn mong muốn làm & cải tiến website cho UX/UI ngày càng tối ưu hơn

Yêu cầu chuyên môn

• Có 1-3 năm kinh nghiệm Front-end (hoặc nhiều hơn là vẫn được). Cụ thể là Reactjs, Nextjs, TypeScript – know Sveltejs and TailwindCSS is lợi thế
• Kiến thức nền HTML5/CSS3 và Javascript tự tin trụ (bởi vì cái này tự học được mà không cần thiết phải đưa vào bất kỳ dự án nào)
• Có khả năng đánh giá yêu cầu để phân tích và đưa ra giải pháp kỹ thuật trước khi bắt tay vào mã
• Biết sử dụng Figma, Sketch cơ bản để có thể làm việc với nhóm thiết kế tốt hơn (có thể được đào tạo nếu không biết)

Bạn có thể ứng tuyển vào EGANY bằng cách gửi CV và thông tin của mình tới email

> @tailwind base;

5, nêu rõ vị trí muốn ứng tuyển trong email tiêu đề và trình bày nội dung về nguyện vọng của bạn

Đừng chỉ gửi mỗi CV mà không có chia sẻ gì cả, các đồng nghiệp tương lai của bạn sẽ không thể hiểu về bạn đâu. Hãy chủ động chia sẻ chân thành về bản thân và những mong muốn của bạn từ những dòng email đầu tiên trước khi chúng ta đồng hành cùng nhau phát triển nhé 🤜🤛

Bài viết này giúp bạn cài đặt Tailwind Css vào dự án của mình một cách dễ dàng và dễ thực hiện. Đây là một Framework Css giúp bạn tạo giao diện với css có tùy biến độ cao và hiệu suất cao

Nội dung chính Hiển thị

Tính năng nổi bật của Tailwind

• Build interface only to khai báo class on file html
• Chỉ xuất ra những tệp css chứa những lớp đã sử dụng trong giao diện
• Dễ dàng thiết lập Responsive ngay trên tệp html
• Hỗ trợ tương tác hover, focus… ngay trên class html
• Tối ưu cấu trúc html css có tính năng lặp lại
• Định nghĩa lớp bổ sung mới được phân phối bởi các lớp có sẵn trong tailwind
• Hỗ trợ chế độ tối Dark Mode
• Dễ dàng mở rộng, chỉnh sửa và biến đổi
• Tăng tốc độ mã với tiện ích mở rộng thông minh trên Mã VS

Xem thêm. Tailwind là gì?

Video hướng dẫn cài đặt Tailwind Css

Để giúp bạn hiểu rõ tư duy cũng như các thao tác rõ ràng nên tôi đã làm video bên dưới. Bạn xem và thực hành để hiểu và sử dụng tailwind css trong quá trình xây dựng giao diện website của mình

Chuẩn bị

Bạn chuẩn bị những thứ bên dưới để phục vụ cho quá trình cài đặt và sử dụng tailwind css trong dự án

• nodejs
• VSCode + Tiện ích mở rộng Tailwind CSS IntelliSense, Hỗ trợ ngôn ngữ PostCSS

Các bước cài đặt tailwind Css vào website

Để cài đặt Tailwind Css vào trang web, bạn thực hiện từng bước theo video và phần ghi chú các câu lệnh đã sử dụng ở bên dưới

1. Cài đặt Tailwind CSS

> npm install -D tailwindcss

> npx tailwindcss init

2. Định cấu hình đường dẫn mẫu của bạn

> "./public/**/*.{html,js}"

3. Thêm lệnh Tailwind vào CSS của bạn

Tập tin. src/tailwind. css

_______3____4____5

4. Bắt đầu quá trình xây dựng Tailwind CLI

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

5. Bắt đầu sử dụng Tailwind trong HTML của bạn

> 

Kết luận

Trong nội dung bài viết bao gồm video hướng dẫn này, tôi tin rằng bạn sẽ hiểu và cài đặt Tailwind Css vào trong dự án của mình

Tuy nhiên để sử dụng Tailwind Css hiệu quả đầu tiên bạn phải nắm giữ nền tảng Css cơ bản trong trang web, bạn có thể tham khảo Html Css 21 Ngày hoàn thiện kỹ năng Css của mình trước khi đến với Framework Css như Bootstrap, Tailwind Css

1. Open start

---

Đổi với những bạn đang làm việc bên front-end hoặc thậm chí cả back-end thì cái tên

> "./public/**/*.{html,js}"

6 không còn xa lạ gì với chúng ta. Đây là một trong những framework nổi tiếng hỗ trợ chúng ta trong phong cách làm việc cho trang web của chúng ta. Framework này cũng đã gắn bó với mình trong rất nhiều dự án khác nhau cho đến gần đây mình thấy có một cái tên khác bắt đầu nổi lên đó là

> "./public/**/*.{html,js}"

7 và mình đã có cơ hội để thử sử dụng nó trong dự án mình tham gia . Trong bài viết này mình sẽ chia sẻ với các bạn về những trải nghiệm của mình với nó

2. TailwindCSS

---

a. Tiện ích đầu tiên

If you used once

> "./public/**/*.{html,js}"

6 thì chắc chắn sẽ nhận được phần này

Về cách sử dụng thì giống như cách chúng ta thêm trạng thái bổ sung vào các phần tử hoặc sử dụng các bộ chọn như ở mục trước. Để hiểu rõ hơn thì các bạn có thể nhìn ví dụ như sau

> npx tailwindcss init

5

Ban đầu giao diện của chúng ta sẽ có dạng như sau trên màn hình di động

Sua that mình has more a new class is

> @tailwind utilities;

8 to change the interface as on this as this instance when min-width is 768 (md)

Ở màn hình có chiều rộng tối đa là 768px mình đã làm cho thẻ

> @tailwind base;

9 và thẻ

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

0 Bên cạnh nhau đồng thời giới hạn chiều rộng tối đa cho ảnh với lớp là

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

1. Đó là toàn bộ những gì bạn cần làm để có thể sử dụng tính năng đáp ứng này. Ngoài ra, bạn cũng có thể tự định nghĩa các điểm dừng khác theo ý muốn bằng cách sửa đổi tệp

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

2. Chi tiết bạn có thể xem tại đây

e. tùy chỉnh cơ bản

Ngoài việc cung cấp sẵn cho chúng ta các lớp trợ giúp để sử dụng, Tailwind còn cho phép chúng ta chỉnh sửa hoặc bổ sung các lớp mới để phù hợp với Style Guide của chúng ta. Giả sử mình không muốn sử dụng các mã màu có sẵn của Tailwind như

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

3,. thì mình có thể vào file

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

4 và thêm màu của mình như sau.

> npx tailwindcss init

6

Sau đó trong mã của mình có thể sử dụng luôn tất cả các lớp có thể gắn màu như văn bản, nền,. as after

> npx tailwindcss init

7

Và đây là kết quả chúng ta thu được

Tuy nhiên, nếu ta viết màu trực tiếp như nói trên và thực tế ta sẽ phải tái sử dụng mã màu của nó ở rất nhiều chỗ trong dự án của chúng ta thì việc viết trực tiếp như trên sẽ không hay lắm. Thay vào đó, trong file css chúng ta có thể viết như sau

> "./public/**/*.{html,js}"

1

Và ta sẽ thu được kết quả như mong muốn ban đầu. Ở đây Tailwind cung cấp cho chúng ta thêm một chức năng đặc biệt là

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

8 cho phép chúng ta lấy các giá trị mà chúng ta bổ sung trong tệp

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

4 ra để sử dụng trong tệp js. Tham số truyền vào cho hàm

> 

0 này bạn có thể hiểu rằng nó giống như đường dẫn đến vị trí của màu đó trong tệp cấu hình vậy.

> "./public/**/*.{html,js}"

2

g. xây dựng sản xuất

Cuối cùng, khi chúng ta đã hoàn thiện phần mã UI của chúng ta và muốn xây dựng thành bản sản xuất thì Tailwind vẫn hỗ trợ chúng ta tối ưu hóa phần css chúng ta đã sử dụng trong dự án. Giả sử ta không thêm gì trong cấu hình tệp và chạy lệnh

> "./public/**/*.{html,js}"

3

Thì ta sẽ thu được một thư mục

> 

1 and in that when you open file

> 

2 up will see as after

Và đăng nhập vào phần chạy lệnh, ta sẽ thấy kích thước tệp của chúng ta khá lớn, hơn 3Mb

Điều này không tốt chút nào vì nó sẽ làm cho web của bạn tải chậm hơn do cần tải xuống một tệp css lớn và đồng thời trên thực tế ta hầu như ít khi sử dụng hết toàn bộ lớp mà Tailwind cung cấp mà chỉ một phần mà thôi. Để làm điều này thì Tailwind cung cấp cho chúng ta phương pháp cấu hình đơn giản để loại bỏ những lớp mà chúng ta không sử dụng đến như sau

> "./public/**/*.{html,js}"

4

At in item

> 

3, ta sẽ khai báo tên những class mà ta sử dụng Tailwind và dựa vào đây khi build lên, những class mà chúng ta không sử dụng đến trong các file được khai báo ở đây sẽ bị loại bỏ khỏi production build. Chạy lại bản dựng một lần nữa và đây là kết quả ta thu được

FIle of they ta at this only but have

> 

4 thay vì

> 

5 as ban đầu. Lưu ý ở phần ________ 73 này, bạn hoàn toàn có thể khai báo theo dạng đối tác như sau.

> "./public/**/*.{html,js}"

5

3. Kết bài

---

Bài viết của mình đến đây là kết thúc, mong rằng nó sẽ giúp ích cho các bạn phần nào nếu quyết tâm thử sức với Tailwind. Nếu các bạn có bất cứ thắc mắc gì hãy comment ngay phía dưới cho mình biết và cũng đừng quên để lại 1 upvote để ủng hộ mình nhé