I am trying to use Tailwind CSS in the react project. I followed the steps given in the documentation from here. But after completing all the steps, I am unable to see the tailwind CSS changes.
I am adding the styles in the file Home.js like this,
import React from "react";
.
.
.
return (
<>
<div className="bg-red-500 h-96 py-80">
<h1 className="text-3xl font-bold underline bg-yellow-400">
Hello world!
</h1>
</div>
</>
);
};
export default Home;
But it is not showing anything
Following are the required files:
package.json
{
"name": "authlogin-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"express": "^4.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.11"
}
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
App.js
import { useState } from "react";
import "./App.css";
import "./index.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import SignupPage from "./components/SignupPage";
import LoginPage from "./components/LoginPage";
import ForgotPasswordPage from "./components/ForgotPasswordPage";
import ChangePasswordPage from "./components/ChangePasswordPage";
import Alert from "./components/Alert";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert({ msg: message, type: type });
setTimeout(() => setAlert(null), 1500);
};
return (
<>
<Router>
<Navbar showAlert={showAlert} />
<Alert alert={alert} />
<Routes>
<Route path="/" element={<Home showAlert={showAlert} />} />
.
.
</Router>
</>
);
}
export default App;
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Also, my project structure is
On thing I noticed that in my index.css, I am getting this warning
I don't know the reason, I have restarted the laptop twice but not working.
This is not working because you haven't added the CRACO layer to your React app. Your setup is fine, but something is still to be added, you just need to run npm install #craco/craco inside your react app root and change your package.json file with the new value of start, build and eject command as shown below in the image, and finally start your server again this will work.
Related
I am building [this react tutorial][1] but get stuck at the beginning because my react components are not being recognized.
Here is my code:
import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.scss';
import Header from "./components/Header/Header";
import Home from "./components/Home/Home";
import MovieDetails from "./components/MovieDetails/MovieDetails";
import Footer from "./components/Footer/Footer";
import PageNotFound from "./components/PageNotFound/PageNotFound";
function App() {
return (
<div className="app">
<Router>
<Header></Header>
<Routes>
<Route path="/" component= {Home} />
<Route path="/movie/:imdbID" component={MovieDetails}/>
<Route element={PageNotFound}/>
</Routes>
<Footer />
</Router>
</div>
);
}
export default App;
Basically, it recognizes the imported components but it does not display them in the correct yellow font color. Also, when I run the app only the footer and the header and footer are present. None of the routes work.
Here is the basic Home, Header, and footer component respectively.
import React from 'react'
const Home = () => {
console.log("hello");
return (
<div>Home</div>
)
}
export default Home;
import React from 'react'
const Header = () => {
return (
<div>Header</div>
)
}
export default Header
import React from 'react'
const Footer = () => {
return (
<div>Footer</div>
)
}
export default Footer
This is my package.json:
{
"name": "movie-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Check your React router version, the tutorial seems to be old, and those are deprecated components. this may help
https://reactrouter.com/docs/en/v6/upgrading/v5
check your packag.json and chose the best method for the version you are using.
App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className='App'>
<Route path="/abou" component={About} />
</div>
</Router>
);
}
}
export default App;
about.js
import React from 'react'
const about = () => {
return (
<div>about</div>
)
}
export default about
package.json
{
"name": "react-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Doubt???????????????????????????????????????????????????????????????????????????
I have installed react-router-dom as you can see in the package.json file but though it is compiling correctly, I am unable to see anything. What could be the error please let me know?
The component Route should be a child of the component Routes and in Route component you have to use the property element to specify the component to render instead of the property component.
import React, {Component} from 'react';
import './App.css';
import About from './About';
import Home from './Home';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className='App'>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}
}
export default App;
I noticed that you have confusion between react-router v5 and v6 (you are using v6)
So for more information about react-router v6 visit the official react-router documentation website : https://reactrouter.com/docs/en/v6
ALERT: My english is not good.
Hello everybody, I'm getting started with React and I installed react-router-dom for my project. I read the documentation and I have followed step by step what it said, but is not work for me. The problem is when I add in App.js.
This is my App.js component:
import '.App.css'
import { Routes, Route } from 'react-router-dom';
import Home from './views/home/Home';
function App() {
return (
<div className="App">
<h1>Welcome to React Router !</h1>
<Routes>
<Route path="/" element={<Home />}/>
</Routes>
</div>
);
}
export default App;
and my Home component is:
import React from "react";
import { Link } from 'react-router-dom';
function Home() {
return(
<>
<main>
<h1>Welcome to Lukson Passwords</h1>
<p>You can do this, I believe in you.</p>
</main>
<nav>
<Link to="/about">About</Link>
</nav>
</>
);
}
export default Home();
package.json:
{
"name": "",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This not work, when I load my page this one shows nothing, but if I delete from my App.js it works fine.
Does anyone know what is going on?
Thank you so much, and sorry for my english xd
You should wrap your app with BrowserRouter. Let's see what happens when you do that
My package.json file where I also tried including the previous solutions "homepage"... in this
Any syntax mistakes or references I mistakenly added here in here ? My build was successful but all I could see i a blank page in my deployed site
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.12.2",
"#material-ui/pickers": "^3.3.10",
"#reduxjs/toolkit": "^1.6.1",
"#syncfusion/ej2-react-calendars": "^19.2.55",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"framer-motion": "^4.1.17",
"mdbreact": "^5.1.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-beta.4",
"react-calendar": "^3.4.0",
"react-datepicker": "^4.1.1",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-minimal-side-navigation": "^1.9.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-switch": "^6.0.0",
"rsuite": "^4.10.2",
"web-vitals": "^1.0.1",
"homepage": "."
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
My App.js file where I imported all my React and Redux Routers..
import "./App.css";
import Sidebar from "./Components/Sidebar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import FoodCatalog from "./Components/Pages/FoodCatalog";
import 'bootstrap/dist/css/bootstrap.min.css';
import Promotions from "./Components/Pages/Promotions";
import UserManagement from "./Components/Pages/UserManagement";
import axios from 'axios';
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import reducer from './redux/reducers'
import Tickets from "./Components/Pages/Tickets";
function App() {
return (
<Provider store={store}>
<BrowserRouter>
<div className="App">
<div>
<Sidebar />
</div>
<div style={{width: '100%',overflow: 'hidden'}}>
<Switch>
<Route path="/foodcatalog" component={FoodCatalog } />
<Route path="/promotions" component={Promotions } />
<Route path="/usermanagement" component={UserManagement } />
<Route path="/tickets" component={Tickets } />
</Switch>
</div>
</div>
</BrowserRouter>
</Provider>
);
}
export default App;
Have you tried going into your vercel environment variables and putting:
CI=false
Sometimes vercel needs that environment variable in production.
Specifiying “homepage”
If you’re using create-react-app, you won’t have to deal with Webpack configs. (Which is nice) Instead – ejected or not – we just have to specify “homepage” in our package.json:
example
The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. (If you want to know more about the publicPath setting, have a look at the Webpack documentation)
Refer this: https://www.andreasreiterer.at/fix-whitescreen-static-react-app/
For anyone facing the same problem while deploying react apps to Vercel, adding "homepage": "." to package.json worked for me. I was initially using gh-pages but wanted to shift to Vercel and hence I completely removed the homepage settings because of which I was getting a blank screen after visiting the deployed URL on vercel. So I added that homepage setting and finally worked.
I developed an application with this major components React + Material-UI + react-router. Here is my full package.json:
{
"name": "trader-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.2.0",
"#material-ui/icons": "^3.0.1",
"#stomp/stompjs": "^5.0.0",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:8080"
}
It works just fine on the development server:
$ npm start
Here it is:
However, when I tried to serve a production build:
$ npm run build
$ npm install -g serve
$ serve -s build
It looks:
Could somebody tell me what went wrong with the production build?
Thanks to #giorgim for his suggestion. It was correct. Use Material-UI FAQ to resolve the issue:
https://material-ui.com/getting-started/faq/#why-aren--39-t-my-components-rendering-correctly-in-production-builds-
My code for styles setup was in withRoot.js:
import React from 'react';
import {createMuiTheme, MuiThemeProvider} from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
});
function withRoot(Component) {
function WithRoot(props) {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Component {...props} />
</MuiThemeProvider>
);
}
return WithRoot;
}
export default withRoot;
I simply wrapped my components with JssProvider:
import React from 'react';
import { create } from 'jss';
import JssProvider from 'react-jss/lib/JssProvider';
import {
MuiThemeProvider,
createMuiTheme,
createGenerateClassName,
jssPreset,
} from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
});
const jss = create(jssPreset());
const generateClassName = createGenerateClassName();
function withRoot(Component) {
function WithRoot(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Component {...props} />
</MuiThemeProvider>
</JssProvider>
);
}
return WithRoot;
}
export default withRoot;
Of course you should install react-jss beforehand:
$ npm install react-jss