Tailwind css v3.0.24 is not working in react app - reactjs

Tailwind css v3.0.24 is not working in react app.I have followed all the steps given in the official tailwindcss website but still not working.I have updated my react-script version even after that it is not working.
Here is my code.
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
package.json
{
"name": "my-portfolio-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"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"
]
}
}
App.js
import './App.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

maybe you forget to import index.css to App.js
import './App.css';
import './index.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;

Your package.json does not show tailwindcss is installed as dev devDependencies remember to includes index.css in your App.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Related

how to use nodejs modules in nw/react app

I'm trying to build an app with NW ans react and i'm having trouble calling node js modules fron react like the "fs" module i got the following error: TypeError: fs.readdir is not a function
this is my folders structure:
public
-----files generated by CRA
src
-----main.js
-----handlers.js
-----files generated by CRA
package.json
{
"name": "nw-react",
"version": "0.1.0",
"private": true,
"main": "./public/main.js",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"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",
"nw" : "nw ."
},
"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": {
"cross-env": "^7.0.3",
"nw": "^0.64.1"
}
}
main.js
nw.Window.open("http://localhost:3000", {}, function (win) {});
handlers.js
const fs = require("fs");
exports.getFiles = cb => {
const dir = "C:\\Users\\pc\\Documents";
fs.readdir(dir, (err, files) => {
cb(files);
});
};
App.js
import { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
const handlers = require("./handler");
function App() {
const [files, setFiles] = useState([]);
useEffect(() => {
handlers.getFiles(files => {
setFiles(files);
});
}, []);
return (
<div className='App'>
{files.map(file => (
<h1 key={file}>{file}</h1>
))}
</div>
);
}
export default App;
Add this to your package.json:
"node-remote": [
"http://localhost:3000",
"file://*"
]
You may also need this:
"eslintConfig": {
"extends": "react-app",
"globals": {
"nw": true
}
}
You cannot use fs module in browser.. it is node core module.

Tailwind css 3.0.5 classes is not working with react

Tailwind css 3.0.5 is not working with react. I have installed tailwind css as per the official installation guide of the tailwind css (https://tailwindcss.com/docs/guides/create-react-app).
The code which, I have written is below.
package.json
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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"
]
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.7"
}
}
src/index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/app.js
import "./index.css";
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
I think you need to update your create-react-app version, you're using version 4 which need something like Craco to let you override the PostCSS configuration natively
Try to update your create-react-app globally with this command
npm install -g create-react-app,
then try this step again https://tailwindcss.com/docs/guides/create-react-app
OR
Update your create-react-app only on current project
npm install react-scripts#latest
Just update your react-script from v4 to lastest 5 version by: npm install react-scripts#latest.
If you will stay with version 4 you have to use craco
That was helpful for me
Uninstall your create-react-app globally. Then do
npx create-react-app appname
After that follow the documentation for the framework create-react-app and you will be fine.
https://tailwindcss.com/docs/guides/create-react-app

Styled-components is not working with react

I install styled components in my react project. but when I am styling using styled-components styling does not work. Is there any more additional setting doing to work with styled components?Plz help
yarn add styled-components
Navbar.jsx
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
height: '60px';
background-color: 'black';
`;
const Navbar = () => {
return <Container>nav</Container>;
};
export default Navbar;
package.json:-
{
"name": "client",
"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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.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": {
"#types/styled-components": "^5.1.15"
}
}
You are writing styled components in the wrong way. Write styled-components CSS as like as normal css. You don't need to put CSS value in string quotation (" ").
const Container = styled.div`
height: 60px;
background-color: black;
`;

I am having a difficult time getting a simple React JS to start or run

I am having a difficult time getting a simple React JS to start or run. Her are my 2 simple files and package.json.
App.js
export default App;const App = () => {
return (
<div className="container">
<h1>Hello World</h1>
</div>
)
}
export default App
index.js
import { render } from ReactDOM
import App from './App'
render(<App />, document.getElementById('app'))
package.json
{
"name": "first-react-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
I have tried start index.js and start App.js. I don't get any errors server just won't run. I try to connect to 127.0.0.0:3000 and localhost:3000 and my browser never connects.
Any help would be greatly appreciated.
Thanks
Dawson
Get rid of the ‘ export default App;’ before the const in App.js

How do I get the react-bootstrap progress bar to display in my React application

I need help getting my progress bar from react-bootstrap to display. I have installed both bootstrap and react-bootstrap from yarn and I imported both files and the component into my react app. Somehow it still doesn't work for me. Any suggestions
Dashboard.js
import React,{useEffect,useState} from 'react';
import styled from 'styled-components'
import Bootstrap from 'bootstrap/dist/css/bootstrap.min.css';
import {Container,Row,Col, ProgressBar} from 'react-bootstrap'
import './table.css';
function Dashboard(props) {
return (
<div>
<ProgressBar now={60}/>
</div>
);
}
export default Dashboard;
Package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"styled-components": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
try Progress instead of ProgressBar:
<div>
<Progress value={60} />
</div>
working stackblitz here
It might have something to do with the way that you are importing the bootstrap CSS file.
The documentation mentions to import it like this:
import 'bootstrap/dist/css/bootstrap.min.css';
The following line can be included in your src/index.js or App.js file
Add this to your webpack.config file
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...

Resources