Sử dụng tailwindcss với Ionic - React

Trong bài viết này, tôi sẽ trình bày cách thiết lập ứng dụng dựa trên React của Ionic và cài đặt tailwindcss .

Điều kiện tiên quyết

Để làm theo các bước trong bài viết này, bạn sẽ cần phải cài đặt Nodejs và Ionic's cli. Hướng dẫn cài đặt Ionic có thể tìm thấy trên trang web của ionic ( Cài đặt Ionic - Tài liệu về Ionic (ionicframework.com) )

Tạo ứng dụng Ionic

Chúng ta bắt đầu bằng cách tạo một ứng dụng phản ứng ion bằng lệnh sau:

ionic start myApp blank --capacitor --type=react

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

npm install @craco/craco

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;
"ionic:build": "craco build",
"ionic:serve": "craco start",

"ionic:build": "craco build",
"ionic:serve": "craco start",