build(style): ⬇️ Adiciona suporte ao tailwind

Foi preciso fazer um downgrade do CRA (create-react-app) para que fosse possivel o suporte ao tailwind

craco.config.js

@@ -0,0 +1,11 @@
+// craco.config.js
+module.exports = {
+    style: {
+      postcss: {
+        plugins: [
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ],
+      },
+    },
+  }

package.json

@@ -8,6 +8,7 @@
     "@capacitor/haptics": "1.1.4",
     "@capacitor/keyboard": "1.2.2",
     "@capacitor/status-bar": "1.0.8",
+    "@craco/craco": "^6.4.5",
     "@hookform/error-message": "^2.0.0",
     "@ionic-selectable/core": "^5.0.0-alpha.13",
     "@ionic/react": "^6.0.0",
@@ -17,21 +18,23 @@
     "@testing-library/user-event": "^12.6.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.19.15",
-    "@types/react": "^16.14.3",
+    "@types/react": "^18.0.18",
-    "@types/react-dom": "^16.9.10",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.26.1",
+    "cross-env": "^7.0.3",
     "ionicons": "^5.4.0",
     "lodash.isequal": "^4.5.0",
     "pigeon-maps": "^0.21.0",
     "pullstate": "^1.24.0",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-google-places-autocomplete": "^3.4.0",
     "react-hook-form": "^7.30.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
     "reselect": "^4.1.5",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
@@ -50,8 +53,10 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env TAILWIND_MODE=watch craco start",
-    "build": "react-scripts build",
+    "build": "craco build",
+    "ionic:serve": "cross-env TAILWIND_MODE=watch craco start",
+    "ionic:build": "craco build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject"
   },
@@ -77,7 +82,9 @@
     "@capacitor/cli": "3.4.3",
     "@types/axios": "^0.14.0",
     "@types/lodash.isequal": "^4.5.6",
-    "react-scripts": "5.0.1"
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   },
   "description": "Projeto de conclusão de curso a fim de resolver a dificuldade de alunos universitários ao buscar vans para suas universidades"
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  

src/App.tsx

@@ -1,4 +1,3 @@
-import { Redirect, Route } from 'react-router-dom';
 import {
   IonApp,
   IonIcon,
@@ -7,101 +6,115 @@ import {
   IonTabBar,
   IonTabButton,
   IonTabs,
-  setupIonicReact
+  setupIonicReact,
-} from '@ionic/react';
+} from "@ionic/react";
-import { IonReactRouter } from '@ionic/react-router';
+import { IonReactRouter } from "@ionic/react-router";
+import { Redirect, Route } from "react-router-dom";
 
 // importação das páginas
-import Cadastro from './pages/Cadastro/Cadastro';
+import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
-import Login from './pages/Login';
+import BuscarTransporte from "./pages/BuscarTransporte/BuscarTransporte";
-import Home from './pages/Home';
+import Cadastro from "./pages/Cadastro/Cadastro";
-import Perfil from './pages/Perfil';
+import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
-import PerfilEditar from './pages/PerfilEditar';
+import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
-import CadastroVan from './pages/CadastroVan';
+import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
-import CadastroCompletar from './pages/CadastroCompletar/CadastroCompletar';
+import CadastroVan from "./pages/CadastroVan";
-import CompletarDocumento from './pages/CadastroCompletar/CompletarDocumento';
+import Home from "./pages/Home";
-import CompletarTelefone from './pages/CadastroCompletar/CompletarTelefone';
+import Login from "./pages/Login";
-import Transportes from './pages/Transportes/Transportes';
+import Perfil from "./pages/Perfil";
-import BuscarPassageiro from './pages/BuscarPassageiro/BuscarPassageiro';
+import PerfilEditar from "./pages/PerfilEditar";
-import BuscarTransporte from './pages/BuscarTransporte/BuscarTransporte';
+import Transportes from "./pages/Transportes/Transportes";
 
 /* Core CSS required for Ionic components to work properly */
-import '@ionic/react/css/core.css';
+import "@ionic/react/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-import '@ionic/react/css/normalize.css';
+import "@ionic/react/css/normalize.css";
-import '@ionic/react/css/structure.css';
+import "@ionic/react/css/structure.css";
-import '@ionic/react/css/typography.css';
+import "@ionic/react/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import '@ionic/react/css/padding.css';
+import "@ionic/react/css/display.css";
-import '@ionic/react/css/float-elements.css';
+import "@ionic/react/css/flex-utils.css";
-import '@ionic/react/css/text-alignment.css';
+import "@ionic/react/css/float-elements.css";
-import '@ionic/react/css/text-transformation.css';
+import "@ionic/react/css/padding.css";
-import '@ionic/react/css/flex-utils.css';
+import "@ionic/react/css/text-alignment.css";
-import '@ionic/react/css/display.css';
+import "@ionic/react/css/text-transformation.css";
 
 /* Theme variables */
-import './theme/variables.css';
+import "./theme/variables.css";
 
-// import Tabs from './components/Tabs';
+/* Tailwind styles */
-import { search, home, person } from 'ionicons/icons';
+import "./theme/tailwind.css";
-import { useState, useContext } from 'react';
+
-import React from 'react';
+import { home, person, search } from "ionicons/icons";
-import MinhasVans from './pages/MinhasVans';
+import React, { useContext, useState } from "react";
-import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios';
+import CadastrarItinerario from "./pages/CadastrarItinerario/CadastrarItinerario";
-import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario';
+import MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios";
+import MinhasVans from "./pages/MinhasVans";
 
 setupIonicReact();
 
 const routes = (
-<>
+  <>
-  <Route exact path="/cadastro" component={Cadastro}></Route>
+    <Route exact path="/cadastro" component={Cadastro}></Route>
-  <Route exact path="/login" component={Login}></Route>
+    <Route exact path="/login" component={Login}></Route>
 
-  <Route exact path="/home" component={Home}></Route>
+    <Route exact path="/home" component={Home}></Route>
 
-  <Route exact path="/perfil" component={Perfil}></Route>
+    <Route exact path="/perfil" component={Perfil}></Route>
-  <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+    <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
-  <Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
+    <Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
-  <Route exact path="/perfil/completar/documento" component={CompletarDocumento}></Route>
+    <Route
-  <Route exact path="/perfil/completar/telefone" component={CompletarTelefone}></Route>
+      exact
+      path="/perfil/completar/documento"
+      component={CompletarDocumento}
+    ></Route>
+    <Route
+      exact
+      path="/perfil/completar/telefone"
+      component={CompletarTelefone}
+    ></Route>
 
-  <Route exact path="/transportes" component={Transportes}></Route>
+    <Route exact path="/transportes" component={Transportes}></Route>
-  <Route exact path="/buscar-passageiro" component={BuscarPassageiro}></Route>
+    <Route exact path="/buscar-passageiro" component={BuscarPassageiro}></Route>
-  <Route exact path="/buscar-transporte" component={BuscarTransporte}></Route>
+    <Route exact path="/buscar-transporte" component={BuscarTransporte}></Route>
 
-  <Route exact path="/usuario/:id" component={Perfil}></Route>
+    <Route exact path="/usuario/:id" component={Perfil}></Route>
 
-  <Route exact path="/cadastro-van" component={CadastroVan}></Route>
+    <Route exact path="/cadastro-van" component={CadastroVan}></Route>
-  <Route exact path="/minhas-vans" component={MinhasVans}></Route>
+    <Route exact path="/minhas-vans" component={MinhasVans}></Route>
-  <Route exact path="/cadastrar-itinerario" component={CadastrarItinerario}></Route>
+    <Route
-  <Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
+      exact
-  <Route exact path="/">
+      path="/cadastrar-itinerario"
-    <Redirect to="/login" />
+      component={CadastrarItinerario}
-  </Route>
+    ></Route>
-</>)
+    <Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
+    <Route exact path="/">
+      <Redirect to="/login" />
+    </Route>
+  </>
+);
 
 interface IUserManager {
   setIsLoggedIn: Function;
 }
 
 const user: IUserManager = {
-  setIsLoggedIn: () => {}
+  setIsLoggedIn: () => {},
 };
 
 export const UserContext = React.createContext<IUserManager>(user);
 
 const IonicApp: React.FC = () => {
-
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const user = useContext(UserContext);
 
   user.setIsLoggedIn = setIsLoggedIn;
 
-  return(
+  return (
-  <IonApp>
+    <IonApp>
-    <IonReactRouter>
+      <IonReactRouter>
         {isLoggedIn ? (
           <IonTabs>
             <IonRouterOutlet>{routes}</IonRouterOutlet>
@@ -121,11 +134,13 @@ const IonicApp: React.FC = () => {
               </IonTabButton>
             </IonTabBar>
           </IonTabs>
-        ) : (<IonRouterOutlet>{routes}</IonRouterOutlet>)}
+        ) : (
+          <IonRouterOutlet>{routes}</IonRouterOutlet>
+        )}
       </IonReactRouter>
-  </IonApp>
+    </IonApp>
-  )
+  );
-}
+};
 
 const App: React.FC = () => {
   return (

src/components/Tabs.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
-
-import { logInOutline, logInSharp, personOutline, personSharp } from 'ionicons/icons';
-
-interface AppTab {
-    label: string;
-    iosIcon: string;
-    mdIcon: string;
-    // badge: string;
-}
-
-const appPages: AppTab[] = [
-    {
-        label: 'Login',
-        iosIcon: logInOutline,
-        mdIcon: logInSharp,
-        // badge: '',
-    },
-    {
-        label: 'Cadastro',
-        iosIcon: personOutline,
-        mdIcon: personSharp,
-        // badge: '',
-    }
-]
-
-const Tabs: React.FC = () => {
-    return (
-        
-            <IonTabs>
-                {appPages.map((appPage, index) => {
-                    <IonTabBar key={index} slot="bottom">
-                        <IonTabButton tab="speakers">
-                            <IonIcon ios={appPage.iosIcon} md={appPage.mdIcon} />
-                            <IonLabel>{appPage.label}</IonLabel>
-                        </IonTabButton>
-                    </IonTabBar>
-
-                })}
-            </IonTabs>
-    );
-}
-
-export default Tabs

src/theme/tailwind.css

@@ -0,0 +1,4 @@
+/* ./src/theme/tailwind.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx,css}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}