Ionic과 함께 tailwindcss 사용 — React

이 기사에서는 Ionic의 React 기반 애플리케이션을 설정하고 tailwindcss 를 설치하는 방법을 다룰 것 입니다.

전제 조건

이 기사의 단계를 따르려면 Nodejs와 Ionic의 cli가 설치되어 있어야합니다. Ionic 설치 지침은 ionic 웹 사이트에서 찾을 수 있습니다 ( Installing Ionic — Ionic Documentation (ionicframework.com) ).

Ionic 애플리케이션 만들기

다음 명령을 사용하여 Ionic 반응 애플리케이션을 만드는 것으로 시작합니다.

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",