Để nhập tệp CSS tương đối vào Tailwind, bắt buộc phải có
1. Cài đặt nhập postcss
yarn add postcss-import
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
2. thêm postcss. cấu hình. tập tin
postcss.config.js
module.exports = {
plugins: [
require['postcss-import'],
require['tailwindcss'],
require['autoprefixer'],
]
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
3. Thêm postcss để xây dựng. kịch bản css
trong gói. json thêm --postcss
cũ
{
"scripts": {
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
}
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Mới
{
"scripts": {
"build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
}
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
4. Tạo một lớp nút
Thêm một thành phần nút trong ứng dụng. Gió cùng chiều. css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-blue {
@apply text-white bg-blue-500 rounded-lg hover:bg-blue-700;
}
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Hãy xem nó, chúng tôi nhận được một nút màu xanh
Save
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
5. Hoán đổi chỉ thị tailwind để nhập
/* old */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* new */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
6. Trích xuất lớp nút vào tệp riêng
trong ứng dụng. Gió cùng chiều. css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/buttons.css";
@import "tailwindcss/utilities";
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong. /thành phần/nút. css
________số 8_______
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Một vài lưu ý từ tài liệu Tailwind
- Không trộn css tùy chỉnh và nhập trong cùng một tệp
- Bọc css tùy chỉnh trong các thành phần @layer để tránh các vấn đề về tính đặc hiệu
Quy tắc CSS tại @import
được sử dụng để nhập quy tắc kiểu từ các biểu định kiểu hợp lệ khác. Quy tắc @import
phải được xác định ở đầu biểu định kiểu, trước bất kỳ quy tắc nào khác [ngoại trừ @charset và @layer] và khai báo kiểu, nếu không nó sẽ bị bỏ qua
@import url;
@import url list-of-media-queries;
@import url layer;
@import url layer[layer-name];
@import url layer[layer-name] list-of-media-queries;
ở đâu
urlLà một hàm , một hàm
@import =0 hoặc một hàm
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import =1 đại diện cho vị trí của tài nguyên cần nhập. URL có thể là tuyệt đối hoặc tương đốidanh sách truy vấn phương tiện truyền thông
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
Là một danh sách các truy vấn phương tiện được phân tách bằng dấu phẩy, danh sách này chỉ định các điều kiện phụ thuộc vào phương tiện để áp dụng các quy tắc CSS được xác định trong URL được liên kết. Nếu trình duyệt không hỗ trợ bất kỳ truy vấn nào trong số này, nó sẽ không tải tài nguyên được liên kết
tên lớpLà tên của tầng xếp tầng mà nội dung của tài nguyên được liên kết được nhập vào
Các quy tắc đã nhập phải xuất hiện trước tất cả các loại quy tắc khác, ngoại trừ các quy tắc
@import =2 và lớp tạo câu lệnh
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import =3. Quy tắc
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import
không phải là một. Vì vậy, nó không thể được sử dụng bên trongĐể tác nhân người dùng có thể tránh truy xuất tài nguyên cho các loại phương tiện không được hỗ trợ, tác giả có thể chỉ định các điều kiện nhập phụ thuộc vào phương tiện. Các lần nhập có điều kiện này chỉ định các truy vấn phương tiện được phân tách bằng dấu phẩy sau URL. Trong trường hợp không có bất kỳ truy vấn phương tiện nào, việc nhập là vô điều kiện. Chỉ định
@import =5 cho
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import =6 cũng có tác dụng tương tự
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
Quy tắc @import
cũng có thể được sử dụng để tạo lớp xếp tầng bằng cách nhập quy tắc từ tài nguyên được liên kết. Các quy tắc cũng có thể được nhập vào một tầng tầng hiện có. Từ khóa
@import =8 hoặc hàm
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import =9 được sử dụng với
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import
cho mục đích này. Các khai báo trong quy tắc kiểu từ biểu định kiểu đã nhập tương tác với tầng như thể chúng được viết theo nghĩa đen vào biểu định kiểu tại thời điểm nhập@import =
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import "custom.css";
@import url["chrome://communicator/skin/"];
Hai ví dụ trên cho thấy cách chỉ định url dưới dạng hàm và hàm
@import =1
@import [ | ] [ layer | layer[ ] ]? ;
=
url[ * ] |
src[ * ]
=
[ '.' ]*
=
[ supports[ [ | ] ] ]? ?
=
not |
[ and ]* |
[ or ]*
=
[ ] |
|
=
=
[ ? ] ] |
[ [ ? ] ]
=
[ ]
@import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
Các quy tắc @import
trong các ví dụ trên cho thấy các điều kiện phụ thuộc vào phương tiện cần phải đúng trước khi áp dụng các quy tắc CSS được liên kết. Vì vậy, chẳng hạn, quy tắc @import
cuối cùng sẽ chỉ tải biểu định kiểu
@import "custom.css";
@import url["chrome://communicator/skin/"];
5 trên một thiết bị màn hình theo hướng ngang@import "theme.css" layer[utilities];
Trong ví dụ trên, một lớp xếp tầng có tên là
@import "custom.css";
@import url["chrome://communicator/skin/"];
6 được tạo và lớp này sẽ bao gồm các quy tắc từ biểu định kiểu đã nhập @import "custom.css";
@import url["chrome://communicator/skin/"];
7@import url[headings.css] layer[default];
@import url[links.css] layer[default];
@layer default {
audio[controls] {
display: block;
}
}
Trong ví dụ trên, các quy tắc trong biểu định kiểu
@import "custom.css";
@import url["chrome://communicator/skin/"];
8 và @import "custom.css";
@import url["chrome://communicator/skin/"];
9 xếp tầng trong cùng một lớp với quy tắc @import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
0@import "theme.css" layer[];
@import "style.css" layer;
Đây là một ví dụ về việc tạo hai lớp xếp tầng ẩn danh riêng biệt và nhập các quy tắc được liên kết vào từng lớp một cách riêng biệt. Tầng tầng được khai báo không có tên là tầng tầng ẩn danh. Các lớp xếp tầng ẩn danh được hoàn thiện khi tạo. chúng không cung cấp bất kỳ phương tiện nào để sắp xếp lại hoặc thêm các kiểu và chúng không thể được tham chiếu từ bên ngoài