Utilizando tailwind css en una app ionic/react

Utilizando tailwind css en una app ionic/react

Instalar ionic-cli

npm install -g @ionic/cli native-run cordova-res

Crear proyecto

ionic start dummy tabs --type=react --capacitor

cd dummy

Instalar tailwind

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

npx tailwind init tailwind.config.cjs

Modificar tailwind.config.cjs

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,cjs}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Crear postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Modificar tsconfig.json

"target": "es5",

Crear tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

importar estilo en App.tsx

import "./tailwind.css"

Ejecutar aplicación

ionic capacitor add android

npm run build

npx cap run android -l --local