Ionicでtailwindcssを使用する— React

この記事では、セットアップにイオン性ののベースのアプリケーションとインストールどのように反応するかカバーしますtailwindcssを。

前提条件

この記事の手順に従うには、NodejsとIonicのCLIをインストールする必要があります。Ionicのインストール手順は、ionic Webサイト（Ionicのインストール— Ionicドキュメント（ionicframework.com））にあります。

Ionicアプリケーションを作成する

次のコマンドを使用して、IonicReactアプリケーションを作成することから始めます。

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