Trình tạo lớp tailwindcss

Bài đăng này giải thích cách tôi tạo tích hợp Tailwind CSS 3 + Middleman có sẵn trên GitHub

Tải xuống nguồn hoặc rẽ nhánh kho lưu trữ tại đây

Middleman là trình tạo trang tĩnh Ruby giúp dễ dàng tạo các trang tĩnh tùy chỉnh bằng ngôn ngữ Ruby (cũng như ERB, v.v.)

Lý do tại sao tôi sử dụng Middleman thay vì một trình tạo trang tĩnh khác là vì tôi xây dựng ứng dụng của mình trong Ruby on Rails và Middleman hỗ trợ một cú pháp rất giống với ngôn ngữ mẫu xem cũng như ngôn ngữ phát triển. Điều này cho phép tôi ít chuyển đổi ngữ cảnh hơn khi tôi đang làm việc trên trang web tiếp thị (thường là trang web tĩnh) hoặc ứng dụng SaaS hoàn chỉnh của tôi. Nói cách khác, tôi cũng đang sử dụng Ruby trên ứng dụng SaaS của mình

Để bắt đầu với Tailwind CSS 3 và Middleman 4, bạn sẽ không muốn làm như sau

Người trung gian thiết lập

Đây là cách thiết lập Middleman…

Cài đặt đá quý

gem install middleman

Sau đó khởi tạo một dự án

middleman init project

Bây giờ hãy thử xây dựng và chạy ứng dụng trung gian của bạn

middleman build && middleman serve

Bạn có thể gặp lỗi này với Middleman

TypeError: Cannot read property 'version' of undefined

Nếu bạn gặp lỗi đó, hãy cập nhật đá quý

middleman init project

1 như sau

gem 'middleman-autoprefixer', '~> 3.0'

trong Gemfile của bạn. Điều này sẽ sửa lỗi

middleman init project

2 ở trên

Xây dựng và bắt đầu trang web trung gian của bạn. Bạn sẽ được tốt để đi

Thiết lập Tailwind CSS 3 với Tailwind CSS CLI

Cài đặt Tailwind CSS bằng cách chạy lệnh sau

npm install -D tailwindcss
npx tailwindcss init

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

middleman init project

3

Mở tệp

middleman init project

4, thêm

middleman init project

5 và

middleman init project

6 vào đó, để thư mục

middleman init project

5 bị bỏ qua. Chúng ta sẽ nói về thư mục

middleman init project

6 bên dưới

Mở tệp

middleman init project

3 và thay đổi nội dung thành tệp này

middleman init project

5

Điều này sẽ yêu cầu Tailwind CSS CLI theo dõi các thay đổi nội dung trong bất kỳ tệp

middleman build && middleman serve

0 hoặc

middleman build && middleman serve

1 nào. Nếu phát hiện thay đổi, thì Tailwind CSS CLI sẽ biên dịch lại (khi không ở chế độ

middleman build && middleman serve

2)

Đổi tên

middleman build && middleman serve

3 thành

middleman build && middleman serve

4

Mở tệp

middleman build && middleman serve

5 đó và thay thế nội dung bằng tệp sau

middleman build && middleman serve

2

Mở tệp

middleman build && middleman serve

6 và thêm một

middleman build && middleman serve

7 cho Tailwind

middleman build && middleman serve

5

Hãy phá vỡ điều này …

external_pipeline này yêu cầu Middleman chạy một

middleman build && middleman serve

8 khi xây dựng/phục vụ

Ký hiệu

middleman build && middleman serve

9 là tên của đường ống bên ngoài mà bạn cung cấp cho nó. Bạn có thể gọi đây là George hoặc Fido, hoặc Hotdog, người trung gian không quan tâm. Nó chỉ dành cho bạn để sử dụng

Lệnh

middleman build && middleman serve

8

Sẽ biên dịch tệp

middleman build && middleman serve

5 thành đầu ra css hoàn chỉnh của nó trong thư mục

TypeError: Cannot read property 'version' of undefined

1

Lưu ý nội suy chuỗi

TypeError: Cannot read property 'version' of undefined

2 ở cuối

Điều này yêu cầu Tailwind CLI “theo dõi” mọi thay đổi tệp khớp với khối

TypeError: Cannot read property 'version' of undefined

3 trong tệp

middleman init project

3. Điều này sẽ CHỈ được thêm vào

middleman build && middleman serve

8 nếu Middleman KHÔNG có trong bản dựng (

TypeError: Cannot read property 'version' of undefined

6). Nếu bạn chạy

TypeError: Cannot read property 'version' of undefined

7, thuộc tính

TypeError: Cannot read property 'version' of undefined

8 sẽ sai, do đó,

TypeError: Cannot read property 'version' of undefined

9 sẽ được thêm vào lệnh. Khi có

TypeError: Cannot read property 'version' of undefined

9, Tailwind CLI sẽ theo dõi các thay đổi của tệp và tự động biên dịch lại

Tiếp theo, chúng tôi có độ trễ, điều này chỉ cho Middleman biết độ trễ bao nhiêu giữa việc kiểm tra các thay đổi mới. Mặc định là

gem 'middleman-autoprefixer', '~> 3.0'

1, sẽ hoạt động, tôi chỉ đổi giá trị này thành

gem 'middleman-autoprefixer', '~> 3.0'

2 để bớt trò chuyện hơn. Bạn có thể chơi với cái này và đặt nó thành thứ bạn muốn. Dưới mui xe, Middleman sử dụng viên ngọc lắng nghe, hãy xem để biết thêm thông tin về độ trễ

Biểu tượng

gem 'middleman-autoprefixer', '~> 3.0'

3 sẽ cho Middleman biết đường dẫn để hợp nhất vào bản dựng của người trung gian. Vì Tailwind CLI xuất nội dung của nó vào thư mục

gem 'middleman-autoprefixer', '~> 3.0'

4 nên toàn bộ nội dung sẽ được hợp nhất vào trang web tệp. Thư mục này không cần phải được kiểm tra trong kiểm soát nguồn, đây là lý do tại sao nó được thêm vào tệp

middleman init project

4

Đó là nó

Xây dựng và chạy ứng dụng Middleman

Bây giờ hãy chạy

TypeError: Cannot read property 'version' of undefined

6 và bạn sẽ thấy các tệp đang được tạo. Bạn sẽ có thể mở

gem 'middleman-autoprefixer', '~> 3.0'

7 và xem CSS Tailwind trong tệp đó

Nếu bạn chạy

TypeError: Cannot read property 'version' of undefined

7, trang web sẽ được phục vụ cục bộ

Điều chỉnh chỉ số. html để sử dụng Tailwind CSS để tạo kiểu

Nếu bạn nhìn vào

gem 'middleman-autoprefixer', '~> 3.0'

9, bạn sẽ nhận thấy rằng nó không có bất kỳ lớp tiện ích nào trong đó

Tôi sẽ thành thật mà nói, điều này làm tôi bối rối một chút và tôi nghĩ mình đã làm sai điều gì đó

Không, đó là mong đợi

Trên thực tế, nếu bạn nhìn vào trình duyệt khi chạy

TypeError: Cannot read property 'version' of undefined

7, trang sẽ không đẹp vì kiểu trong tệp

npm install -D tailwindcss
npx tailwindcss init

1 không đúng

Tailwind CLI sẽ đọc các tệp của bạn (như được xác định trong khối

TypeError: Cannot read property 'version' of undefined

3) của tệp

middleman init project

3. Tại thời điểm này, Tailwind CLI chưa thấy BẤT KỲ lớp tiện ích nào được sử dụng trong bất kỳ tệp phù hợp nào nên không có lớp tiện ích nào được đưa vào đầu ra

Tôi đã thay đổi tệp

npm install -D tailwindcss
npx tailwindcss init

1 thành tệp này, hãy lưu ý các lớp tiện ích Tailwind CSS được áp dụng

middleman init project

0

Bây giờ hãy chạy

TypeError: Cannot read property 'version' of undefined

7 (hoặc bản dựng) và xem tệp

gem 'middleman-autoprefixer', '~> 3.0'

9. Bạn sẽ nhận thấy rằng có một số lớp tiện ích ở cuối tệp. Đây là những lớp mà ứng dụng của bạn chúng tôi sử dụng. Khi bạn thêm các lớp mới và xây dựng lại ứng dụng (hoặc chỉ để phục vụ chạy với cờ

TypeError: Cannot read property 'version' of undefined

9)

Tại sao Tailwind CSS lại phổ biến đến vậy?

Tailwind CSS có dễ học không?

CSS Tailwind có tốt không?

Tôi có thể sử dụng Tailwind CSS miễn phí không?