Rollup-plugin-postcss tailwind

Trong bài đăng này, tôi sẽ hướng dẫn cách thiết lập TailwindCss đúng cách trong ứng dụng Svelte. Tôi sẽ hiển thị tất cả các phụ thuộc cần thiết và các thay đổi cần thực hiện trong khi duy trì số lượng tối thiểu các phụ thuộc bổ sung và thay đổi tập lệnh

TL;DR

Đang vội?

rodolphocastro / editorconfig-io

Nhanh chóng tìm editorconfigs cho dự án của bạn

những điều cơ bản là

1. Thêm

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   3 +

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   4 vào phần phụ thuộc của bạn
2. Bắt đầu tailwindcss. cấu hình + postcss. cấu hình
3. Tạo một thành phần để lưu trữ tailwindcss và nhập thành phần đó vào Ứng dụng
4. Thay đổi quy trình của

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   5 để chạy

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   6
5. Thay đổi lệnh

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   0 để đặt

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   1 thành

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   2

TailwindCss

Thiết lập ban đầu

Đầu tiên và quan trọng nhất, chúng ta cần thêm tất cả các phụ thuộc cần thiết vào dự án của mình. Chạy

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

3

Những phụ thuộc đó là cần thiết để tự thiết lập tailwind và cho phép chúng tôi tải cấu hình postcss từ một tệp riêng biệt

Sau khi npm hoàn tất tải xuống, các phụ thuộc chạy

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

4 để tạo tệp

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

5

Xóa các lớp không mong muốn

Để tailwind biết lớp nào được sử dụng, chúng ta cần trỏ nó vào đúng tệp. Điều này được thực hiện bằng cách chỉnh sửa tệp

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

5 và yêu cầu nó tính đến tất cả các tệp

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

7 và

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

8 mà chúng tôi có

Điều này được thực hiện bởi đoạn mã sau

module.exports = {
  purge: [
           "./**/*.svelte",  // Look for .svelte files
           "./**/*.html" // Look for .html files
        ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thiết lập cấu hình PostCSS

Bây giờ hãy tạo một tệp mới có tên là

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

9. Tệp này sẽ chứa tất cả cấu hình liên quan đến PostCSS

Trong tệp này, bạn sẽ chỉ ra những plugin nào mà đường dẫn postcss nên sử dụng. Đoạn mã sau thực hiện điều đó cho cấu hình taildwindcss cơ bản

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhập Tailwind vào Ứng dụng

Cuối cùng, việc nhập tailwind vào Ứng dụng của chúng tôi có thể được thực hiện theo nhiều cách, chẳng hạn như

1. Nhập nó từ tệp

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   20
2. Nhập nó từ bên trong thẻ

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   21
3. Nhập nó từ thẻ

   module.exports = {
           plugins: [
                   require("tailwindcss"),
                   require("autoprefixer")
           ]
   }
   

   21 của một thành phần cụ thể

Tôi sẽ làm điều đó như một thành phần riêng biệt với phần

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

23. Đoạn mã sau tạo thành phần khởi động tailwindcss

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi thành phần được tạo, tất cả những gì chúng ta cần làm là nhập nó vào Ứng dụng của mình

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Dọn dẹp

Đây là tùy chọn, tôi đoán bạn có thể giữ kiểu cũ nếu muốn

Xóa tệp

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

24 và thẻ

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

25 của nó khỏi

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

26

Kích hoạt Postcss trong Svelte's Rollup

Mở

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

27 và tìm phần bổ trợ > phần mảnh dẻ

Ở đây chúng tôi sẽ chỉ ra rằng svelte cần chạy một số loại tiền xử lý và chúng tôi sẽ cho svelte biết nên thực hiện tiền xử lý nào

Đoạn mã sau hiển thị điều này bên cạnh cấu hình mặc định

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đảm bảo xây dựng NPM cho Sản xuất

Nếu bạn chạy

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

28, bạn sẽ thấy rằng

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

29 được tạo ra khá nặng. Đó là bởi vì, theo mặc định, lệnh xây dựng của Svelte không thiết lập NODE_ENV để sản xuất

Để khắc phục điều này, tất cả những gì chúng ta cần làm là sử dụng các tùy chọn

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

70 được tích hợp trong

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

71 để đặt biến

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

1 thành

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

2 bất cứ khi nào chúng ta chạy tập lệnh xây dựng

Để thực hiện việc này, chỉ cần thay đổi dòng sau trong tệp

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

74 của bạn

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều này sẽ đảm bảo mỗi khi

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

28 được gọi, nó sẽ đặt

module.exports = {
        plugins: [
                require("tailwindcss"),
                require("autoprefixer")
        ]
}

1 cục bộ thành sản xuất. Điều này có nghĩa là nó hoàn toàn không ảnh hưởng đến trải nghiệm tải lại nóng của bạn

Tác động có thể xảy ra

Không giống như các phương pháp khác mà tôi đã thấy trên internet, phương pháp này dường như không có bất kỳ tác dụng phụ nào đối với bản dựng (để sản xuất) và trải nghiệm tải lại nóng của bạn. 😀