Chiều rộng css tailwind

Tailwindcss là 1 css framework có điểm nổi bật đặc biệt là các thuộc tính css đều được gán cho các class css giúp người dùng dễ dàng gọi ra để sử dụng thông qua set css class trên html. Bài viết này sẽ hướng dẫn bạn cài đặt Tailwindcss vào Laravel

Ưu nhược điểm của Tailwindcss

Ưu điểm của Tailwindcss

  • Các lớp có tên gợi đến tính năng của chúng, nhìn vào lớp chúng ta có thể đoán được tính năng của chúng style cho cái gì
  • Khả năng tùy biến linh hoạt và mở rộng cao
  • Các lớp đặt tên đồng bộ, thuận tiện cho việc làm việc nhóm
  • Thu nhỏ trùng lặp các thuộc tính css trên cùng 1 phần tử html
  • Chỉ những class được gọi trong html mới được build ra nên file css sẽ nhỏ lại và load nhanh hơn

nhược điểm

  • Có rất nhiều lớp, nên cần phải tương thích với thành phần css thuần trước khi bắt đầu với Tailwind
  • tệp html chứa nhiều lớp css nên sẽ dài hơn thông thường
  • Khi thiết kế, nếu cần chỉnh sửa các phần khác nhau sẽ tốn thời gian hơn là phải chỉnh sửa rồi sao chép lại các lớp
  • Có những giá trị không như ý muốn nên nhiều khi sẽ cần tùy chỉnh lại

Cài đặt Tailwindcss vào Laravel

Tạo dự án Laravel

composer create-project laravel/laravel my-project
cd my-project

Tích hợp Tailwindcss vào dự án

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2 tập tin tailwind. cấu hình. js và postcss. cấu hình. js sẽ được tạo tại thư mục gốc của dự án, mở tệp tailwind. cấu hình. js and edit as after

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Mở tệp /resources/css/app. css and add on as after

@tailwind base;
@tailwind components;
@tailwind utilities;

run command after to auto build css each when have instead of change in the type of file was khai báo trong tailwind. cấu hình. js

npm run dev

If have error

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
1

then run command

npm install
npm run dev

If error

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
2

thì vào trang chủ nodejs tải về bản mới nhất và cài đặt để cập nhật lên phiên bản mới nhất, sau đó chạy lại lệnh

npm run dev

Nếu lệnh npm run dev chạy thành công thì tiếp tục chạy lệnh run serve laravel

php artisan serve

Bắt đầu sử dụng Tailwindcss

trong phần

add lines after

@vite('resources/css/app.css')

Ví dụ

Chỉnh sửa tệp mặc định của Laravel.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3



    
        
        

        Laravel

        @vite('resources/css/app.css')
    
    
       

Laravel Tailwind

Tùy chỉnh các giá trị trong tailwindcss

Tuy các lớp trong Tailwindcss rất nhiều nhưng vẫn có những giá trị không có sẵn, khi đó chúng ta cần tùy chỉnh định nghĩa lại hoặc thêm vào các giá trị mới

cách thêm new value

open file tailwind. cấu hình. js và thêm vào phần mở rộng, Ví dụ. thêm giá trị khoảng cách hoặc màu sắc

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
0

Lời kết

Tailwind Css là 1 css framework khá thú vị và dễ sử dụng, và bài viết này đã giới thiệu cách tích hợp Tailwindcss vào Laravel. Bạn cảm thấy không nhận được gì về Tailwindcss thì hãy bình luận lại nhé

Tailwind CSS được nhiều người sử dụng phổ biến hiện nay và là một trong những cách tạo trang web giao diện hiện đại nhất, nhanh chóng và có khả năng tùy biến tốt nhờ các chương trình mã khai báo trực tiếp trên tệp . Vì sao CSS Tailwind là gì ? . Mua bán tìm hiểu qua bài viết bên dưới nhé.  

Giới thiệu chung về Tailwind CSS

Nếu bạn đang muốn tìm hiểu Tailwind CSS là gì thì đừng bỏ qua nội dung dưới đây

Tóm tắt nội dung

Tailwind CSS là gì?

Bạn có biết Tailwind CSS là gì không? . Tailwind CSS được phát hành lần đầu tiên vào tháng 10/2019 do Adam Wathan phát triển. Nếu so sánh với các nền tảng lập trình CSS khác như Bootstrap, Materialize, Foundation, Material Design… thì giữa chúng có điểm chung với nhau

Nhưng điểm khác biệt rõ ràng nhất là các khung CSS cấp thấp (khung CSS cấp thấp), với các khung này sẽ cung cấp cho bạn rất nhiều chức năng phát triển thành phần tùy biến mà bạn không nhất thiết phải viết lại CSS

Chiều rộng css tailwind
Chiều rộng css tailwind
Tailwind CSS là gì?

Nhiều khung CSS hiện nay đang chọn hướng tiếp cận là Thành phần đầu tiên. Đây được xem là hướng tiếp cận theo kiểu đánh nhanh thắng nhanh, người ta sẽ tạo ra các thành phần có sẵn giúp lập trình viên (lập trình viên) sử dụng để hoàn thiện sản phẩm một cách nhanh nhất. Tuy nhiên, vẫn gặp phải nhược điểm là khó khăn khi ghi đè các thành phần

Vì vậy, nhiều người đã chuyển hướng sang sử dụng Tailwind CSS vì sử dụng hướng tiếp cận là Khung công tác ưu tiên tiện ích

Có nên học Tailwind CSS không?

Tailwind CSS là gì? . Điển hình nhất mà nhiều người thường hay thắc mắc là có nên học Tailwind CSS hay không. Mua Bán sẽ giải đáp cho bạn qua nội dung bên dưới

Đối với một người đã hiểu Tailwind CSS là gì và đang làm việc với CSS thuần hoặc Bootstrap khi sử dụng Tailwind CSS, họ nhận thấy điểm mạnh chính là cho mình một khoảng thời gian không gian để có thể biến xây dựng được giao . Qua đó, trả lời cho câu hỏi trên là bạn nên dành thời gian để học thêm Tailwind CSS nhé.

Tuy nhiên, trước khi học nó, bạn cần nắm rõ những kiến ​​thức về CSS thuần túy, nếu không bạn sẽ thực sự có thể tạo ra một giao diện như ý muốn nếu bạn không biết mình đang cần phải làm gì để gọi lớp phù hợp

Chiều rộng css tailwind
Chiều rộng css tailwind
Tailwind CSS là gì?

Hiểu rõ Tailwind CSS là điều bạn sẽ nhận thấy rằng Tailwind CSS là một lựa chọn tuyệt vời nhất dành cho bạn, giúp hỗ trợ trong quá trình tạo giao diện người dùng có tùy chọn biến cao. Nếu bạn muốn tạo ra một cấu trúc hệ thống quản lý với hình thức và bố cục cục bộ theo những kết cấu có sẵn thì nên lựa chọn tốt nhất là Bootstrap phần mềm.

Lý do phổ biến mà nhiều người dùng Tailwind là gì?

Nếu bạn thắc mắc về lý do nên sử dụng Tailwind CSS là gì thì hãy xem qua một số điểm nổi bật như sau

  • Khai báo lớp trên tệp HTML có thể xây dựng giao diện
  • Support for user mode dark Mode
  • Trên lớp HTML Hỗ trợ tương tác focus, hover,…
  • Thiết lập Responsive một cách dễ dàng hơn
  • Xuất các tệp CSS chứa lớp đã sử dụng trong giao diện.  
  • Với cấu trúc HTML có sự lặp lại sẽ được tối ưu hóa
  • Dễ dàng thực hiện các thao tác như mở rộng, quản lý, biến đổi và chỉnh sửa
  • Trên Mã VS sẽ tăng tốc độ mã với Tiện ích mở rộng thông minh
  • Lớp mới sẽ được phân phối bởi những lớp có sẵn trong Tailwind
  • Có sử dụng Flex nên rất dễ chia Layout
  • Tailwind cài đặt và sử dụng rất dễ, tài liệu thì rất dễ hiểu.  
  • Có khả năng trích xuất các kiểu biến phổ biến, lặp lại các thành phần tùy chỉnh đó và không cần phải viết một dòng CSS tùy chỉnh mà vẫn có thể sử dụng nhiều trường hợp.   
  • Tối ưu cho môi trường di động và hỗ trợ một cách dễ dàng, nhanh chóng nhất
  • Các tên lớp được đặt rất dễ hiểu và thân thiện với người dùng, bạn chỉ cần vào sẽ biết được thuộc kiểu nhìn của lớp nào
Chiều rộng css tailwind
Chiều rộng css tailwind
Lý do phổ biến mà nhiều người dùng Tailwind là gì?

Những lý do cụ thể mà bạn nên sử dụng Tailwind CSS là gì?

Lý do cụ thể để chúng ta sử dụng Tailwind CSS là gì? . Các cụ thể như sau

Trợ giúp tiết kiệm thời gian

Các lớp tiện ích (Lớp tiện ích) của Tailwind CSS sẽ giúp bạn thuận lợi hơn khi viết và duy trì được rất nhiều mã CSS phức tạp

Một lớp tiện ích của Tailwind CSS sẽ tương ứng với một tập hợp CSS nhỏ. các hạn định như

  • p-4 nghĩa là phần đệm. 1rem (các số tiền tố trong Tailwind thường là bội số của 0,25 rem)
  • m-4 mean is margin. 1rem
  • text-lg mean is font-size. 1. 125rem; . 1,75rem

Một khi kết hợp tất cả lại với nhau thì HTML này sẽ kích hoạt Tailwind CSS

  • Chào thế giới

Tương ứng với HTML cơ bản như sau

  • Chào thế giới

Nhờ sự trợ giúp của các Lớp tiện ích này, chúng ta không cần phải xây dựng lại từ đầu và có thể tạo các trang web tốt hơn trong khoảng thời gian ngắn nhất có thể

Các lớp tiện ích (Lớp tiện ích) sẽ thực hiện theo nguyên tắc trách nhiệm đơn lẻ

Các lớp tiện ích của Tailwind CSS được thiết kế để phục vụ cho một mục đích cụ thể. Thí dụ

  • w-4 nghĩa là chiều rộng. 1rem;
  • bg-transparent nghĩa là màu nền. trong suốt;

Một số Lớp tiện ích đóng gói nhiều hơn 1-3 khai báo CSS cùng một lúc. Những lớp này gần giống như các phím tắt để viết mã trực tiếp với các kiểu thuộc tính. Điều này thường gây khó chịu bởi dòng dài và phức tạp

Chiều rộng css tailwind
Chiều rộng css tailwind
Những lý do cụ thể mà bạn nên sử dụng Tailwind CSS là gì?

Tuy nhiên gần đây nhiều nhà phát triển đã đưa ra lập luận nếu bạn đã quen với kiểu lớp tiện ích thì sẽ thấy rằng điều đó có nghĩa là các phần tử HTML không thể xen vào nhau, giúp đơn giản hóa công việc giảm lỗi tốt hơn

Ví dụ: khi không có class .card và class .featured trên toàn trang web, thì sẽ không gặp bất cứ chuyện gì với:

Tailwind CSS bao gồm hàng chặn các Lớp tiện ích riêng lẻ như vậy và bạn có thể kết hợp lại một cách sáng tạo để xây dựng các thành phần trang web được tùy chỉnh cao, cho dù bạn có đặt ở bất kỳ đâu trên trang web

Tài liệu là đỉnh cao

Tailwind CSS bên cạnh đơn giản tài liệu còn đơn giản về mã. Tailwind CSS giúp bạn dễ dàng truy cập bất kỳ chủ đề nào trên trang web. Chiều rộng tìm kiếm sẽ dẫn đến chiều rộng hướng dẫn và đối với việc tìm kiếm w-8 cũng vậy. Làm như vậy việc truy cập tài liệu trở nên dễ dàng hơn đối với những người mới bắt đầu sử dụng Tailwind CSS.  

Tạo một cộng đồng lớn và phát triển

Trước khi chuyển sang một framework, luôn đánh giá mức độ phổ biến và thường được nhiều người cho rằng đó là một ý tưởng tuyệt vời. Đối với các framework có lượng người theo dõi nhiều, không tăng, không giảm thì sẽ dễ dàng hơn khi tìm thấy các nhà phát triển tuyệt vời và các cộng đồng trực tuyến hỗ trợ để hỗ trợ khi gặp tình trạng khó khăn

Hiện nay có nhiều người sử dụng Tailwind CSS nhờ có thể giúp người dùng giải quyết các vấn đề tiềm ẩn dễ dàng hơn với sự hỗ trợ của cộng đồng

Chiều rộng css tailwind
Chiều rộng css tailwind
Tailwind CSS là gì?

Not but Media Queries

Tất cả các lớp tiện ích trong CSS Tailwind đều có thể được áp dụng có điều kiện tại các điểm dừng khác nhau, nghĩa là bạn không cần phải tạo các truy vấn phương tiện tệp riêng biệt để làm cho các thành phần phản hồi nhanh. Tailwind sẽ cung cấp 5 điểm dừng khác nhau như sau

  • sm. 640px
  • md. 768px
  • lg. 1024px
  • xl. 1280px
  • 2xl. 1536px

Ví dụ như sau:

Chiều rộng css tailwind
Chiều rộng css tailwind
Lợi ích khi học Tailwind CSS là gì?

Delete the class not used

Để nâng cao trải nghiệm cho người dùng tốt hơn, Tailwind CSS đã tạo ra rất nhiều lớp tiện ích và hầu hết như trong số đó đều không được sử dụng trong phiên bản sản phẩm chính thức. Để giải quyết tình trạng này, Tailwind đã có tính năng đó là loại bỏ mọi lớp tiện ích không sử dụng để thoát khỏi phiên bản chính thức.  

Việc xóa các lớp không sử dụng sẽ làm giảm đáng kể kích thước tệp CSS được gửi cho người dùng, dẫn đến việc trang web sẽ được tải xuống nhanh hơn

Create a private way

Đối với nhiều khung khác nhau, Tailwind CSS sẽ có một phong cách riêng. Không giới hạn như với các yếu tố định mức được sử dụng. . m-4 có nghĩa là 1rem, còn sử dụng m-5 có nghĩa là 1. 25rem

Nhiều người thắc mắc còn 0,25 rem ở giữa thì sao? . Nếu chúng ta có nhu cầu thì Tailwind CSS vẫn có thể định cấu hình, vì chỉ là CSS nên chúng ta vẫn có thể thiết lập theo phong cách riêng của mỗi người.  

Unable to rule set name mode

Đối với việc đặt tên cho các lớp trong CSS thì người dùng thường gặp khó khăn nhất. BEM sẽ có các nguyên tắc quy ước đặt tên phổ biến riêng, còn đối với Tailwind thì sẽ có cách để loại bỏ nhu cầu viết các tùy chỉnh lớp CSS. Thông thường đối với các lớp tiện ích của Tailwind CSS thì cũng đủ để xây dựng web

Tạo cho người dùng một cảm giác như đang viết CSS

Tailwind CSS sẽ giúp bạn tạo giao diện người dùng một cách dễ dàng để phát triển cơ sở hạ tầng và cấp độ cao với sự trợ giúp của các lớp tiện ích. Như lý do thứ 2 mà Mua Bán đã được cập nhật bên trên, thì các tiện ích chủ yếu chỉ là một lớp tham chiếu cho một dạng cụ thể

Việc làm này sẽ giúp bạn cảm thấy giống như đang viết CSS, vì vậy với việc học một framework như Bootstrap thì Tailwind CSS đã bao gồm việc học một hệ thống các thành phần được đặt tên

Chiều rộng css tailwind
Chiều rộng css tailwind
Tailwind CSS là gì?

Cách cài đặt và sử dụng Tailwind CSS

Bạn đã hiểu Tailwind CSS là gì vậy bạn có muốn biết về cách cài đặt Tailwind CSS hay không?

Cách cài đặt Tailwind CSS

Biết Tailwind CSS là gì?

Bước 1. Cài đặt Tailwind CSS qua yarn hoặc npm.  

  • sợi thêm tailwind css
  • cài đặt npm -D tailwind css

Bước 2. Để sử dụng tạo cấu hình Tailwind CSS cơ bản, bạn cài đặt tệp tailwind. cấu hình. js. npx tailwindcss init

Bước 3. Định nghĩa các đường dẫn mà bạn sử dụng Tailwind CSS

  • mô-đun. xuất khẩu = {
  • nội dung. [“. /src/**/*. {html,js}”],
  • chủ đề. {
  • gia hạn. {},
  • },
  • bổ sung. [],
  • }

Bước 4. Tiến hành tạo tệp CSS dùng để chứa từng lớp tệp lệnh Tailwind, tiếp theo là thêm đoạn mã sau vào tệp CSS

  • cơ sở @tailwind;
  • các thành phần @tailwind;
  • tiện ích @tailwind;

Bước 5. Sử dụng câu lệnh build Tailwind CSS

  • Bạn có thể bật thiết bị đầu cuối và viết thẳng. npx Tailwind CSS -i. /src/đầu vào. css -o. /dist/đầu ra. css –xem
  • Trong đó /src/input. css is file which you made before that and. /dist/đầu ra. css là tệp mà các CSS được xây dựng (xây dựng) ra để sử dụng
  • Một cách khác là viết câu lệnh build (xây dựng) trong tập lệnh của gói tệp. json to easy caller. "kịch bản". { "xây dựng". “npx Tailwind CSS -i. /src/đầu vào. css – o. /dist/đầu ra. css –watch” }, và cuối cùng là bạn chỉ cần bật terminal và gọi npm run build

Bước 6: Nhúng file CSS vào đường link sau:

Chiều rộng css tailwind
Chiều rộng css tailwind
Tailwind CSS là gì?

Hướng dẫn sử dụng Tailwind CSS

Hiểu được Tailwind CSS là gì bạn sẽ sử dụng Tailwind thông qua link CDN. Nếu bạn đang sử dụng phiên bản Tailwind CSS hiện tại là V3.0.0 thì có thể sử dụng link viết theo dạng script như sau: . Ngoài ra, bạn có thể dùng link CDN theo dạng link CSS ở phiên bản

V2

Với phiên bản V3, đặc biệt tại chỗ là khi sử dụng tập lệnh liên kết là bạn có thể tùy biến thêm CSS trong tập lệnh

  • Gió cùng chiều. cấu hình = {
  • chủ đề. {
  • gia hạn. {
  • màu sắc. {
  • vách đá. '#da373d',
  • }
  • }
  • }
  • }
  •   

Một số framework được Tailwind hỗ trợ

Hiện tại, Tailwind support a number framework as. Laravel, Gatsby, VueJS, AngularJS, NextJS, ReactJS, Nuxt. js

Qua những thông tin mà Mua bán  đã chia sẽ bên trên, chắc chắn cũng giúp bạn biết Tailwind CSS là gì và cách cài đặt cũng như sử dụng ra sao. Đối với những người mới bắt đầu sử dụng CSS thì Tailwind CSS là framework rất dễ học. Tuy nhiên để sử dụng một cách tốt nhất thì bạn cần phải trang bị những kiến thức liên quan đến CSS. Hãy theo dõi website Muaban.net để