Xây dựng ứng dụng Ember đẹp và đáp ứng với Tailwind CSS

Ví dụ về tailwind

Tất cả các ví dụ mà tôi tìm thấy ngay sau khi phiên bản Tailwind 2.0 được phát hành đều liên quan đến việc tích hợp Tailwind 1.x vào ứng dụng Ember. Cài đặt chỉ khác một chút, đủ để gây ra một số lỗi kỳ lạ. Đối với những người không quá quen thuộc với PostCSS, điều này gây nhầm lẫn. Tôi đã tạo kho lưu trữ ví dụ này để tìm hiểu một ví dụ làm việc tối thiểu. Hy vọng nó sẽ giúp ích cho ai đó khác.

Bước 1 – Cài đặt Các Phụ Thuộc

Nếu bạn đã sử dụng ember-cli-postcss, hãy đảm bảo cập nhật lên phiên bản v7 mới nhất. Tailwind 2.x chuyển sang PostCSS v8. Xem tài liệu README của ember-cli-postcss để biết chi tiết về phiên bản: (https://github.com/jeffjewiss/ember-cli-postcss)

ember install ember-cli-postcss
npm install --save-dev tailwindcss autoprefixer

Bước 2 – Tạo tệp cấu hình tailwind

npx tailwindcss init config/tailwindcss-config.js --full

Bước 3 – Cấu hình ember-cli-build.js

Đây là phần khá khác biệt. Cấu hình trước đây sử dụng một mảng các module, và plugin tailwind được truyền địa chỉ cấu hình bằng cách gọi module.

Với tailwind 2.0, ember-cli-postcss v7, và PostCSS v8, cấu hình mong đợi một mảng các đối tượng, mỗi đối tượng chứa một thuộc tính module và options.

/* ember-cli-build.js */

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');
const tailwind = require('tailwindcss');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          {
            module: autoprefixer,
            options: {}
          },
          {
            module: tailwind,
            options: {
              config: './config/tailwindcss-config.js'
            }
          }
        ],
      }
    }
  });

  return app.toTree();
};

Bước 4 – Nhập Tailwind vào app.css

// app/stytles/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Bước 5 – Thay thế application.hbs bằng tailwind css

{{!-- app/templates/application.hbs --}}
<div class="container mx-auto">
  <h1 class="font-mono text-blue-500">Hello Tailwind</h1>
</div>

Bước 6 (Tùy chọn) – Sửa đổi cấu hình tailwind để loại bỏ css không sử dụng

Cảm ơn @kamal trên Twitter đã chỉ ra rằng Tailwind hiện đi kèm với tùy chọn “purge”. Thực hiện các thay đổi sau trong tệp tailwindcss-config.js để quét các tệp mẫu index.html và hbs để tìm các lớp css. Điều này sẽ giúp giảm kích thước của tệp css được gửi đến trình duyệt một cách đáng kể. Trong ứng dụng mẫu này, tệp css đã giảm từ 2.73MB trong quá trình phát triển xuống còn 2.75 KB sau khi đã thực hiện việc “purge”.

Xem (https://tailwindcss.com/docs/optimizing-for-production) để biết thêm thông tin về tùy chọn “purge”. Lưu ý rằng tailwind chỉ thực hiện “purge” khi NODE_ENV=production. ember-cli không đặt NODE_ENV thành production theo mặc định, để có một phiên bản “purge” build, tôi đã chạy lệnh sau:

NODE_ENV=production ember build --prod

/* config/tailwindcss-config.js */
 const colors = require('tailwindcss/colors')

 module.exports = {
-  purge: [],
+  purge: [
+    './app/**/*.html',
+    './app/**/*.hbs',
+  ],
   presets: [],
   darkMode: false, // or 'media' or 'class'
   theme: {

VIỆC CẦN LÀM

Sửa đổi tailwindcss-config.js không tạo lại file css, điều này hơi phiền khi bạn muốn điều chỉnh cấu hình của mình. Bạn cần dừng / khởi động ember s để áp dụng các thay đổi. Nếu ai đó biết cách giải quyết vấn đề này, xin vui lòng mở một yêu cầu PR 🙂

Cảm ơn

Xin cảm ơn những nhà phát triển tuyệt vời đã xây dựng tất cả các công cụ đã làm cho điều này trở thành điều có thể.

Chi tiết tải về:

Tác giả: raytiley
Nguồn: https://github.com/raytiley/tailwind-ember-example