Postcss-preset-env

Question

'element-ui', 'vue-awesome', ], plugin. [ env && thay thế ({ 'tiến trình. env. NODE_ENV'. JSON. stringify(env), }), nút({ phần mở rộng. ['. js', '. vue'], }), cjs(), postcss({ giải nén. sai, giảm thiểu. đúng, plugin. [ postcssPresetEnv() ] }), vue({ defaultLang. { Phong cách. 'scss', }, kiểu. { plugin postcss. [ cssnext(), cssnano(), ], }, }), babel({ loại trừ. 'node_modules/**', trình trợ giúp thời gian chạy. thật,

Nếu bạn chưa từng nghe về Tailwind CSS, thì đó là một khung CSS chứa rất nhiều lớp CSS cài sẵn mà bạn có thể áp dụng cho các thành phần HTML của mình mà không cần phải viết CSS tùy chỉnh cho chúng trong hầu hết thời gian

Nội dung chính Show

MỚI. Sân chơi trực tuyến Tailwind CSS
Dùng thử mà không cần loay hoay với javascript
Cài đặt Tailwind CSS trên ứng dụng Rails của bạn
Thay đổi cấu hình mặc định CSS của Tailwind
PostCSS Lọc CSS trong sản xuất
Gotcha nhỏ với PurgeCSS

Tôi đã thử nghiệm với Tailwind CSS trong ứng dụng Rails công việc demo này. https. //kldev. herokuapp. com , bạn có thể xem mã nguồn trên trang để thấy rằng mỗi phần tử được sử dụng rất nhiều lớp CSS

Ví dụ div này

lớp w đầy đủ

Lớp bg-blue-900

.bg-blue-900 {
  background-color: #2a4365;
}

Các lớp w-full và bg-blue-900 do Tailwind CSS cung cấp, chúng ta chỉ cần chèn các lớp này vào tên lớp để tạo kiểu cho thành phần mà không cần mở. tập tin css

MỚI. Sân chơi trực tuyến Tailwind CSS

Bạn có thể dùng thử Tailwind CSS trực tuyến trên sân chơi của họ, chỉ bằng cách điều hướng đến https. //chơi. đuôiwindcss. com trên trình duyệt web của bạn. Thay đổi tên lớp và HTML trên trình chỉnh sửa bên trái và xem bản xem trước thời gian thực ở bên phải

Dùng thử mà không cần loay hoay với javascript

Nếu bạn muốn dùng thử Tailwind CSS mà không làm phiền nút. js/npm/sợi, giống như trên đồng bằng. html, bạn có thể sử dụng CDN

Thật tuyệt khi có bản demo nhanh trên Tailwind CSS, nhưng nhược điểm (như đã đề cập trong ) là

Bạn không thể tùy chỉnh chủ đề mặc định của Tailwind
Bạn không thể sử dụng bất kỳ lệnh nào như
3,
4, v.v.
Bạn không thể bật các tính năng như
Bạn không thể cài đặt plugin của bên thứ ba
Bạn không thể rung chuyển các kiểu không sử dụng

Cài đặt Tailwind CSS trên ứng dụng Rails của bạn

Tôi thích sử dụng yarn để cài đặt Tailwind CSS, mở terminal, điều hướng đến ứng dụng Rails của bạn, sau đó thực thi

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Ở đây, chúng tôi đang sử dụng bản dựng tương thích PostCSS7 của Tailwind, vì PostCSS 8 dường như hiện đang gặp sự cố với trình đóng gói web Rails 6

Tôi khuyên bạn nên sử dụng Webpacker để quản lý Tailwind CSS vì điều này sẽ giúp quản lý dễ dàng hơn và chúng ta có thể định cấu hình cài đặt PostCSS (như PurgeCSS) sau này

Để sử dụng trình đóng gói web cho Tailwind CSS, hãy tạo một thư mục có tên là biểu định kiểu bên trong ứng dụng/javascript (đường dẫn đầy đủ sẽ là ứng dụng/javascript/bảng định kiểu)

Bên trong thư mục app/javascript/stylesheets, tạo một tệp và đặt tên là “application. scss”, sau đó nhập CSS liên quan đến Tailwind bên trong tệp này

/* application.scss */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Cấu trúc tập tin trông như thế này

Sau đó, trong ứng dụng/javascript/gói/ứng dụng. js , yêu cầu ứng dụng. scss

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()

require("stylesheets/application.scss")

Tiếp theo, nhập plugin tailwindcss và autoprefixer vào tệp postcss. cấu hình. js (trên thư mục gốc của thư mục ứng dụng Rails của bạn)

________số 8

Tiếp theo, chúng ta phải thêm stylesheet_pack_tag tham chiếu ứng dụng/javascript/stylesheets/application. scss trong tệp bố cục (ứng dụng/lượt xem/bố cục/ứng dụng. html. sai). Vì vậy, bố cục có thể nhập biểu định kiểu ở đó





  
    Bootstraper
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    
    
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  
....

Giờ đây, chúng ta có thể sử dụng các lớp CSS của Tailwind trên các phần tử HTML của mình

.bg-blue-900 {
  background-color: #2a4365;
}

0

Bạn có thể tham khảo tài liệu CSS của Tailwind để biết danh sách các lớp bạn có thể sử dụng

Ghi chú. Nếu bạn nhận thấy rằng bố cục/kiểu không thay đổi ngay cả sau khi bạn đã thêm một số lớp, hãy thử mở terminal và chạy. /bin/webpack-dev-server cùng với máy chủ đường ray để có thể làm mới kiểu dáng

Thay đổi cấu hình mặc định CSS của Tailwind

Tailwind CSS đi kèm với cấu hình đặt sẵn, chẳng hạn đối với phông chữ sans-serif, cấu hình này sử dụng mặc định này

.bg-blue-900 {
  background-color: #2a4365;
}

1

Nếu bạn muốn sử dụng phông chữ sans-serif mặc định khác, bạn có thể ghi đè lên tệp cấu hình và chèn tên phông chữ của riêng bạn

Bạn có thể xem toàn bộ cấu hình mặc định tại đây. https. //github. com/tailwindlabs/tailwindcss/blob/master/stub/defaultConfig. sơ khai. js

Bạn có thể tạo tệp cấu hình Tailwind bằng lệnh này trong Terminal (chạy nó trên thư mục gốc của ứng dụng Rails)

Điều này sẽ tạo một tệp

6 tối thiểu ở thư mục gốc của dự án của bạn

.bg-blue-900 {
  background-color: #2a4365;
}

0

Bất kỳ cấu hình nào (ví dụ:. font-family) bạn đã chỉ định trong cấu hình sẽ ghi đè mặc định được hiển thị trong liên kết Github ở trên, nếu bạn không chỉ định cấu hình, nó sẽ sử dụng lại mặc định

Ví dụ: tôi đã thay đổi phông chữ mặc định thành Gibson cho ứng dụng Rails demo của mình, sau đó là tailwind của tôi. cấu hình. js trông như thế này

.bg-blue-900 {
  background-color: #2a4365;
}

1

Bạn có thể đọc thêm về cách tùy chỉnh cấu hình chủ đề mặc định tại đây. https. //tailwindcss. com/docs/theme

Bạn cũng có thể tạo tệp cấu hình với tất cả mặc định được liệt kê bên trong, mặc dù bản thân Tailwind không khuyến khích

.bg-blue-900 {
  background-color: #2a4365;
}

2

Khi sử dụng Tailwind CSS để tạo nguyên mẫu cho thiết kế của mình, bạn có thể thấy nhiều phần tử HTML có chung một lớp mà bạn có thể tạo một thành phần cho phần tử đó

Ví dụ

.bg-blue-900 {
  background-color: #2a4365;
}

3

Chúng tôi có ba div có cùng lớp, chỉ khác nội dung bên trong. Để tránh gõ các lớp dài giống nhau cho mỗi lớp, chúng ta có thể trích xuất các lớp này thành một lớp bằng cách áp dụng lớp tailwind trên đó

Trong ứng dụng/javascript/bảng định kiểu/ứng dụng của bạn. tập tin scss,

.bg-blue-900 {
  background-color: #2a4365;
}

4

Bằng cách sử dụng @apply, chúng ta có thể áp dụng các thuộc tính trong các lớp bg-red-500 my-4 w-3/4 mx-auto p-4 cho. lớp tùy chỉnh thẻ đỏ mà chúng tôi đã tạo, sau đó chúng tôi cũng áp dụng text-white text-2xl cho

bên trong div thẻ đỏ

Bây giờ chúng ta có thể cấu trúc lại mã HTML của mình thành mã này

.bg-blue-900 {
  background-color: #2a4365;
}

5

Điều này giúp việc sử dụng lại lớp CSS dễ dàng hơn, thay vì phải gõ đi gõ lại tất cả các tên lớp này

Để tránh vấn đề về tính đặc hiệu ngoài ý muốn, Tailwind CSS khuyên chúng ta nên bọc các dòng @apply bên trong lớp thành phần, như thế này

.bg-blue-900 {
  background-color: #2a4365;
}

6

Từ CSS Tailwind

Tailwind sẽ tự động di chuyển các kiểu đó đến cùng một vị trí với
7, vì vậy bạn không phải lo lắng về việc sắp xếp thứ tự ngay trong tệp nguồn của mình
Việc sử dụng lệnh
8 cũng sẽ hướng dẫn Tailwind xem xét các kiểu đó để xóa khi xóa lớp
9

PostCSS Lọc CSS trong sản xuất

Vì Tailwind CSS có rất nhiều lớp và chúng tôi thường chỉ sử dụng một phần nhỏ trong số các lớp này để tạo kiểu, nên bạn nên xóa các lớp không sử dụng khỏi Tailwind CSS để giảm kích thước tệp

Từ tài liệu CSS của Tailwind

Khi xây dựng để sản xuất, bạn phải luôn sử dụng tùy chọn
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
0 của Tailwind để chuyển đổi các kiểu không sử dụng và tối ưu hóa kích thước bản dựng cuối cùng của bạn. Khi xóa các kiểu không sử dụng bằng Tailwind, rất khó để có hơn 10kb CSS nén

Chúng ta có thể sử dụng plugin PurgeCSS cho PostCSS để loại bỏ các lớp CSS không sử dụng

Cho phép cài đặt PurgeCSS trong thiết bị đầu cuối

.bg-blue-900 {
  background-color: #2a4365;
}

7

Sau đó bao gồm plugin purgeCSS trong postcss. cấu hình. js (trên thư mục gốc của thư mục ứng dụng Rails của bạn)

.bg-blue-900 {
  background-color: #2a4365;
}

8

Đoạn script trên sẽ đẩy plugin postcss-purgecss vào mảng plugin cho biến môi trường (tức là.

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

1)

Chúng tôi sẽ giải thích hành động mà tập lệnh trên thực hiện bên dưới

.bg-blue-900 {
  background-color: #2a4365;
}

9

Đoạn mã trên có nghĩa là tập lệnh PurgeCSS sẽ tìm tên lớp CSS trong các tệp này (ví dụ:. . /ứng dụng/lượt xem/tĩnh/chỉ mục. html. sai)

Ví dụ: giả sử chúng tôi có một tệp trong. /ứng dụng/lượt xem/tĩnh/chỉ mục. html. erb như thế này

0

Sau đó, PurgeCSS sẽ quét tệp này và nhận thấy lớp “thẻ đỏ” đang được sử dụng và thẻ đỏ áp dụng một vài lớp CSS Tailwind như “bg-red-500 my-4 w-3/4 mx-auto p-4

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2 có nghĩa là PurgeCSS sẽ quét bất kỳ tệp nào có. html. erb và được đặt bên trong thư mục ứng dụng hoặc bất kỳ thư mục con nào bên trong nó

** có nghĩa là khớp với bất kỳ số lượng thư mục con nào và bất kỳ tên thư mục con nào

* có nghĩa là khớp với bất kỳ tên tệp nào

ví dụ

ứng dụng/lượt xem/tĩnh/chỉ mục. html. trận đấu erb,

ứng dụng/lượt xem/phụ/phụ/phụ/bla. html. erb cũng phù hợp

Tương tự với các tiện ích mở rộng khác được đề cập trong đoạn mã trên (*. html. haml, ứng dụng/javascript/*/. js, v.v.)

1

Đoạn mã trên có nghĩa là trình trích xuất (scanner) sẽ quét tìm tên lớp CSS có chứa bảng chữ cái (A-Z, a-z), số (0-9), dấu gạch ngang/gạch nối (-), dấu gạch dưới (_) và dấu hai chấm (. ). “+” có nghĩa là một hoặc nhiều ký tự, “g” có nghĩa là khớp toàn cầu hoặc khớp tham lam, khớp với tất cả các từ (tức là. các lớp CSS) đáp ứng mẫu (bảng chữ cái, số, dấu gạch nối, v.v.)

Gotcha nhỏ với PurgeCSS

Một điều cần lưu ý với PurgeCSS là nếu các lớp CSS mà ứng dụng Rails của bạn sử dụng không xuất hiện ở vị trí được chỉ định trong mảng nội dung, nó sẽ bị xóa trong quá trình sản xuất

Ví dụ: bạn có thể sử dụng gói select2 npm (_______53) để tùy chỉnh trình đơn thả xuống và chúng đi kèm với tệp css của riêng chúng, nằm trong /node_modules/select2/dist/css/select2. tối thiểu. css. Vì thư viện javascript sẽ chỉ thêm các lớp CSS vào danh sách thả xuống khi chạy, trình quét PurgeCSS sẽ không phát hiện các lớp này trong quá trình quét và sẽ xóa chúng khi sản xuất trong quá trình triển khai

Điều này sẽ làm cho trình đơn thả xuống của bạn hoạt động kỳ lạ khi sản xuất vì các lớp CSS select2 không được áp dụng trong thời gian chạy. Để giải quyết vấn đề này, chúng ta có thể sử dụng danh sách an toàn, yêu cầu PurgeCSS không xóa các lớp khớp với biểu thức chính quy nhất định

Đối với ví dụ select2, tôi muốn PurgeCSS cho phép các lớp CSS có chứa “select” tồn tại (không bị xóa), sau đó tôi thêm lớp này vào danh sách an toàn như thế này

2

Kẻ tham lam sẽ chọn bất kỳ bộ chọn nào khớp với biểu thức chính quy trong bất kỳ phần nào, ví dụ:. cái nút. select2-abc. lớp không tồn tại sẽ khớp với /select/

programming css

Postcss-preset-env

MỚI. Sân chơi trực tuyến Tailwind CSS

Dùng thử mà không cần loay hoay với javascript

Cài đặt Tailwind CSS trên ứng dụng Rails của bạn

Thay đổi cấu hình mặc định CSS của Tailwind

PostCSS Lọc CSS trong sản xuất

Gotcha nhỏ với PurgeCSS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội