Bài viết này sẽ giải thích:
- Màn hình, Màu sắc và Khoảng cách có tác dụng gì trong Chủ đề Tailwind?
- Cách sử dụng Màn hình, Màu sắc và Khoảng cách trong Chủ đề Tailwind?
- Làm cách nào để định cấu hình màn hình, màu sắc và khoảng cách trong chủ đề Tailwind?
Màn hình, Màu sắc và Khoảng cách có tác dụng gì trong Chủ đề Tailwind?
Các màn hình key cho phép người dùng sửa đổi các điểm ngắt phản hồi trong dự án Tailwind. Điểm ngắt là những điểm mà bố cục thay đổi dựa trên chiều rộng màn hình. Theo mặc định, Tailwind bao gồm năm màn hình, tức là sm (nhỏ), md (trung bình), lg (lớn) và xl (cực lớn). Tuy nhiên, người dùng có thể xác định các điểm ngắt của họ bằng cách sử dụng phím “màn hình”, sau đó sử dụng chúng trong chương trình HTML.
Màu sắc phím được sử dụng để sửa đổi bảng màu. Màu sắc là một trong những tính năng quan trọng nhất của thiết kế. Chủ đề Tailwind cung cấp bảng màu mặc định với nhiều sắc độ khác nhau, nhưng người dùng cũng có thể tùy chỉnh hoặc mở rộng bảng màu này bằng các màu của mình. Người dùng có thể xác định màu bằng cách sử dụng phím “màu”, sau đó sử dụng chúng với bất kỳ lớp tiện ích nào liên quan đến màu trong mã HTML.
Các khoảng cách phím được sử dụng để sửa đổi khoảng cách và tỷ lệ kích thước. Khoảng cách là một khía cạnh thiết yếu khác của thiết kế, vì nó ảnh hưởng đến khả năng đọc, căn chỉnh và cân bằng của các yếu tố. Chủ đề Tailwind cung cấp tỷ lệ khoảng cách nhất quán dựa trên giá trị cơ bản là 4 pixel (0,25rem). Tuy nhiên, nó cũng có thể được tùy chỉnh hoặc mở rộng với các giá trị tùy chỉnh. Người dùng có thể xác định các giá trị khoảng cách bằng cách sử dụng phím “khoảng cách”, sau đó sử dụng chúng với bất kỳ lớp tiện ích nào liên quan đến khoảng cách trong tệp chương trình.
Cách sử dụng Màn hình, Màu sắc và Khoảng cách trong Chủ đề Tailwind?
Để sử dụng màn hình, màu sắc và khoảng cách trong chủ đề Tailwind, hãy tạo một chương trình HTML và sử dụng các thuộc tính màn hình, màu sắc và khoảng cách mặc định theo yêu cầu. Sau đó, chạy chương trình HTML và xem trang web HTML. Hãy để chúng tôi làm theo các bước được đề cập dưới đây:
Bước 1: Tạo trang web HTML
Đầu tiên, tạo một chương trình HTML và sử dụng các thuộc tính màn hình, màu sắc và khoảng cách mặc định:
< cơ thể >< lớp div = 'h-screen p-10 sm:bg-red-700 md:bg-blue-600 lg:bg-green-500 xl:bg-pink-700' >
= 'text-3xl m-5 sm:text-white text-center' >
Gợi ý Linux!
>
< lớp h2 = 'text-2xl m-5 md:text-white text-center' >
Chào mừng bạn đến với Hướng dẫn này
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS đuôi gió
>
CSS đuôi gió
>
= 'text-2xl m-5 xl:text-white text-center' >
chủ đề
>
>
>
Đây:
- “ -p-10 ' Và ' m-5 ” là thuộc tính giãn cách.
- “ sm ”, “ md ”, “ lg ', Và ' xl ” là các thuộc tính màn hình.
- “ đỏ-700 ”, “ màu xanh-600 ”, “ xanh-500 ”, “ hồng-700 ', Và ' trắng ” là các thuộc tính màu sắc.
Bước 2: Chạy chương trình HTML
Sau đó, chạy chương trình HTML để xem trang web HTML:
Trong đầu ra ở trên, có thể thấy các thuộc tính màn hình, màu sắc và khoảng cách mặc định.
Làm cách nào để định cấu hình màn hình, màu sắc và khoảng cách trong chủ đề Tailwind?
Để định cấu hình màn hình, màu sắc và khoảng cách trong chủ đề Tailwind, hãy xem các bước được cung cấp sẵn:
- Mở ' tailwind.config.js ' tài liệu.
- Chuyển đến phần “ chủ đề ” và tùy chỉnh các thuộc tính màn hình, màu sắc và khoảng cách theo yêu cầu.
- Sử dụng các thuộc tính tùy chỉnh trong chương trình HTML.
- Xem trang web HTML để xác minh.
Bước 1: Định cấu hình màn hình, màu sắc và khoảng cách trong tệp cấu hình Tailwind
Bên trong ' chủ đề ” phần của “ tailwind.config.js ”, tùy chỉnh các thuộc tính màn hình, màu sắc và khoảng cách theo nhu cầu. Chẳng hạn, chúng tôi đã tùy chỉnh các thuộc tính này như sau:
mô-đun .xuất khẩu = {nội dung : [ './index.html' ] ,
chủ đề : {
// tùy chỉnh màn hình
màn hình : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//tùy chỉnh màu sắc
màu sắc : {
trắng : #ffffff ,
đen : '#000000' ,
màu xanh da trời : '#08609c' ,
màu xanh lá : '#089c28' ,
màu đỏ : '#9c0306' ,
màu vàng : '#ede60e' ,
hồng : '#ed0e55' ,
} ,
//tùy chỉnh khoảng cách
khoảng cách : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25rem' ,
'2' : '0,5rem' ,
'3' : '0,75rem' ,
'4' : '1 Điều' ,
'5' : '1,25rem' ,
'6' : '1.5rem' ,
'số 8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'hai mươi' : '5rem' ,
}
} ,
} ;
Trong mã này:
- Các ' màn hình ” thuộc tính xác định các điểm ngắt màn hình cho các kích thước khác nhau. Nó cung cấp các bí danh (chẳng hạn như sm, md, lg, xl) và các giá trị tương đương của chúng.
- Các ' màu sắc ” thuộc tính xác định màu tùy chỉnh bằng cách sử dụng tên và cặp giá trị thập lục phân của chúng.
- Các ' khoảng cách ” thuộc tính chỉ định các giá trị khoảng cách tùy chỉnh cho nhiều kích thước. Nó sử dụng các bí danh (chẳng hạn như px, 0, 1, 2, v.v.) để biểu thị các giá trị khoảng cách cụ thể trong đơn vị “rem”.
Bước 2: Sử dụng Thuộc tính được định cấu hình trong Chương trình HTML
Bây giờ, hãy sử dụng các thuộc tính tùy chỉnh trong chương trình HTML:
< cơ thể >< lớp div = 'h-screen p-10 sm:bg-red md:bg-blue lg:bg-green xl:bg-pink ' >
= 'text-3xl m-5 sm:text-white text-center' >
Gợi ý Linux!
>
< lớp h2 = 'text-2xl m-5 md:text-white text-center' >
Chào mừng bạn đến với Hướng dẫn này
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS đuôi gió
>
CSS đuôi gió
>
= 'text-2xl m-5 xl:text-white text-center' >
chủ đề
>
>
>
Bước 3: Xem trang web HTML
Cuối cùng, xác minh đầu ra bằng cách xem trang web HTML:
Có thể quan sát thấy rằng nội dung của trang web thay đổi theo các thuộc tính màn hình, màu sắc và khoảng cách được định cấu hình.
Phần kết luận
Các màn hình key cho phép người dùng tùy chỉnh/sửa đổi các điểm ngắt đáp ứng, màu sắc phím được sử dụng để tùy chỉnh bảng màu cho dự án và khoảng cách phím được sử dụng để tùy chỉnh khoảng cách và tỷ lệ kích thước. Hơn nữa, người dùng có thể tùy chỉnh các phím hoặc thuộc tính này theo nhu cầu của họ. Bài viết này đã giải thích về màn hình, màu sắc và khoảng cách trong chủ đề Tailwind.